开发工程师必备————【Day17】q前端HTML基础知识点

今日内容简介

前端简介
HTTP超文本传输协议
HTML简介
head内常见标签
body内常见标签

前端简介

1.前端与后端
（1）前端
与用户直接打交道的操作界面都可以称之为是前端
（2）后端(幕后工作者)
不直接与用户打交道的内部真正执行核心业务逻辑的代码程序

3.前端核心基础

HTML——网页的骨架
全称超文本标记语言，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
CSS——网页的样式
全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
JS——网页的动态
全称是JaveScript，JavaScript是一门脚本语言。
三者之间的区别：
HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。
我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。

超文本传输协议前戏

1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件为了实现无障碍沟通交流有了一些协议
HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题因为别人早就封装好了
问题出在我们自己写的服务端的响应数据格式

HTTP超文本传输协议

1.四大特性
（1）基于请求响应
服务端永远不会主动给客户端发消息必须是客户端先请求服务端被动响应
（2）基于TCP/IP之上作用于应用层的协议
应用层协议:HTTP HTTPS FTP …
（3）无状态
服务端不保存客户端状态
（4）无/短连接
不保持客户端与服务端之间的链接导通

2.数据格式
（1）请求数据格式

请求首行(请求方式:有很多种协议名称及版本)
请求头(一大堆K:V键值对)
换行
请求体(携带一些敏感的数据不是所有的请求都有请求体)

（2）响应数据格式

响应首行(响应状态码)
响应头(一大堆K:V键值对)
换行
响应体(一般情况下就是浏览器要展示给用户看的数据)

3.响应状态码
（1）利用数字来表示一些复杂的情况说明(类似于暗号)
1XX:服务端已经接收到你的请求正在处理你可以继续提交或者等待
2XX:200 OK服务端给出了相应响应
3XX:重定向
4XX:403请求不符合条件 404请求资源不存在
5XX:服务端内部错误
（2）我们在公司中还会自己定义更多的状态码
一般情况下从10000开始

HTML简介

超文本标记语言
是所有浏览器展示的页面必备的!!!
浏览器展示的界面我们也称之为HTML页面,存储HTML语言的文件后缀一般是.html。
HTML没有任何的逻辑，所见即所得；
HTML代码是不讲究缩进的。

1.HTML注释语法

(1)
< !-- 单行注释-->

(2)
< !--
多行注释
-->
1
2
3
4
5
6
7

2.HTML文件结构

<html>  所有的代码都必须写在html标签内部
   	<head></head>  head内的数据一般都不是给用户看的
    <body></body>  body内的数据就是浏览器展示给用户看的
</html>
1
2
3
4

3.HTML标签的分类
（1）单标签(自闭和标签)与双标签
单标签：
<img/>


双标签：
<a></a>
1
2
3
4
5
6
（2）块儿级标签与行内标签
块儿级标签：h1~h6 p hr br
一个标签独占一行

行内标签：u i s b
内部文本多大自身就占多大
1
2
3
4
5

head内常见标签

标签意义
< title> < /title> 定义网页标题
< style>< /style> 定义内部样式表
< script>< /script> 定义JS代码或引入外部JS文件
< link/> 引入外部样式表文件或网站图标
< meta/> 定义网页原信息

title标签
控制标签页小标题
style标签
内部支持编写CSS
link标签
引入外部CSS文件
script标签
内部支持编写JS代码还可以通过src属性引入外部JS文件
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Hello HTML</title>
   <style>
       body{
           color: rebeccapurple;
       }
   </style>
   <link rel="stylesheet" href="mycss.css">



   <script src="myjs.js"></script>
</head>
<body>
哈喽大家好~
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
meta标签
通过内部属性的不同可以有很多功能：
（1）< meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
（2）< meta>标签位于文档的头部，不包含任何内容。
（3）< meta>提供的信息是用户不可见的。
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
1
2
在head中设置网页标题和字符集编码
<head>

<title>这里是标题</title>

<meta charset="utf-8"/>

</head>
1
2
3
4
5
6
7

标签	意义
< title> < /title>	定义网页标题
< style>< /style>	定义内部样式表
< script>< /script>	定义JS代码或引入外部JS文件
< link/>	引入外部样式表文件或网站图标
< meta/>	定义网页原信息

body内基本标签

HTML标题
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。< h1>是最高的等级。
< hx>标题文本< /hx> (x为1-6)
1
HTML 段落标签
如果想在网页上显示文章，这时就需要< p>标签了，把文章的段落放到< p>标签中。
<p>段落 </p>
<p>标签的默认样式，段前段后都会有空白。
1
2
HTML 水平分割线
< hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
1
2
3
4
5
HTML 换行标签
如果希望在不产生一个新段落的情况下进行换行（新行），请使用 < br /> 标签：
<p>This is< br/>a para< br/>graph with line breaks</p>
1
HTML 水平线
< hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
1
2
3
4
5
HTML 下滑线
<u>下划线</u>-->
1
HTML斜体
<i>斜体</i>-->
1
HTML删除线
<s>删除线</s>-->
1
HTML加粗
<b>加粗</b>-->
1
HTML < span>标签
< span>它的作用就是为了结合CSS设置单独的样式用的，本身没有任何效果。

body内基本符号与布局标签

1.body内基本符号

内容对应代码
空格 & nbsp;
> & gt;
< & lt;
& & amp;
¥ & yen;
版权 & copy;
注册 & reg;

内容	对应代码
空格	& nbsp;
>	& gt;
<	& lt;
&	& amp;
¥	& yen;
版权	& copy;
注册	& reg;

2.body内布局标签
（1）块儿级标签——div
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
（2）行内标签——span
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
（3）两者特点与区别：

块儿级标签是可以通过CSS调整为不独占一行
标签之间很多时候可以嵌套（块儿级可以嵌套任何类型的标签；行内标签只能嵌套行内标签）
p标签虽然是块儿级标签但是不能块儿级标签（p标签不能包含块级标签，p标签也不能包含p标签。）

body内常见标签

1.a标签
链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
1
（1）href 可以填写网址点击自动跳转
href还可以填写其他标签的id值实现锚点功能
使用< a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
1
2
3
4
5
6
7
（2）target 可以控制是否新建页面跳转
_self表示在当前标签页中打开目标网页
_blank表示在新标签页中打开目标网页
1
2

2.img标签
图片标签
（1）src 填写图片地址(网络地址本地地址)
（2）title 鼠标悬浮在图片上就会有提示信息
（3）alt 图片加载失败提示的信息
（4）height 调整图片的高度
width 调整图片的宽度
上述两个（height与width）调整一个另外一个等比例缩放
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)>
1

标签两大重要属性

下面的两个属性都是用来快速定位需要操作的标签：
（1）id属性(一对一管理)
类似于身份证号在同一个html页面上 id值不能重复
（2）class属性(批量管理)
类似于分组多个标签可以拥有相同的class值

列表标签

1.无序列表
<ul>
     <li>python</li>
     <li>golang</li>
     <li>linux</li>
 </ul>
1
2
3
4
5
（1）页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
（2）type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表
（1）如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用< ol>标签来制作有序列表来展示。
<ol type="I" start="10">
	<li>第一项</li>
	<li>第二项</li>
	 <li>第三项</li>
</ol>
1
2
3
4
5
（2）type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

3.标题列表

	<dl>
     <dt>标题1</dt>
       <dd>内容1</dd>
     <dt>标题2</dt>
       <dd>内容1</dd>
       <dd>内容2</dd>
   </dl>
1
2
3
4
5
6
7

表格标签

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
想在网页上展示上述表格效果可以使用以下代码：
创建表格的四个元素：
table、tr、th、td
1、< table>…< /table>：整个表格以< table>标记开始、< /table>标记结束。

2、< tr>…< /tr>：表格的一行，所以有几对tr 表格就有几行。

3、< td>…< /td>：表格的一个单元格，一行中包含几对< td>…< /td>，说明一行中就有几列。

4、< th>…< /th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

表格标题

< caption> 指定表格标题，它显示在表格上方。
语法展示：

<table>
       <thead>
           <tr>
               <th>序号</th>
               <th>用户名</th>
               <th>密码</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>1</td>
               <td>jason</td>
               <td>123</td>
           </tr>
       </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

表单标签

1.表单属性

属性描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
获取命令：
<form action="" method=""></form>
1
2

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

2.action属性—— 用于控制数据的提交地址不写的话就是朝当前页面所在的地址提交
< input> 元素会根据不同的 type 属性，变化为多种形态。

type属性值表现形式对应代码
text 单行输入文本
password 密码输入框 < input type=“password” />
date 日期输入框 < input type=“date” />
checkbox 复选框 < input type=“checkbox” checked=“checked” />
radio 单选框 < input type=“radio” />
submit 提交按钮 < input type=“submit” value=“提交” />
reset 重置按钮 < input type=“reset” value=“重置” />
button 普通按钮 < input type=“button” value=“普通按钮” />
hidden 隐藏输入框 < input type=“hidden” />
file 文本选择框 < input type=“file” />

属性说明：

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type=“button”, “reset”, "submit"时，为按钮上显示的文本年内容
type=“text”,“password”,"hidden"时，为输入框的初始值
type=“checkbox”, “radio”, “file”，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

type属性值	表现形式	对应代码
text	单行输入文本
password	密码输入框	< input type=“password” />
date	日期输入框	< input type=“date” />
checkbox	复选框	< input type=“checkbox” checked=“checked” />
radio	单选框	< input type=“radio” />
submit	提交按钮	< input type=“submit” value=“提交” />
reset	重置按钮	< input type=“reset” value=“重置” />
button	普通按钮	< input type=“button” value=“普通按钮” />
hidden	隐藏输入框	< input type=“hidden” />
file	文本选择框	< input type=“file” />

3.method属性——用于控制请求的方式(get\post)
属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

3.代码说明

<form action="" method="post">
       <p>username:<input type="text"></p>
       <p>password:<input type="password"></p>
       <p>birthday:<input type="date"></p>
       <p>email:<input type="email"></p>
       <p>gender:
           <input type="radio" name="gender">男
           <input type="radio" name="gender">女
           <input type="radio" name="gender">其他
       </p>
       <p>hobby:
           <input type="checkbox" name="hobby">篮球
           <input type="checkbox" name="hobby">足球
           <input type="checkbox" name="hobby">双色球
       </p>
       <p>file:
          <input type="file">
       </p>
       <p>files:
           <input type="file" multiple>
       </p>
       <p>province:
           <select name="" id="">
               <option value="">上海</option>
               <option value="">北京</option>
               <option value="">深圳</option>
           </select>
       </p>
       <p>GF:
           <select name="" id="" multiple>
               <option value="">小明</option>
               <option value="">小波</option>
               <option value="">小冲</option>
               <option value="">小黄</option>
           </select>
       </p>
       <p>info:
           <textarea name="" id="" cols="30" rows="10"></textarea>
       </p>
       <input type="submit" value="用户注册">
       <input type="reset" value="重置内容">
       <input type="button" value="普通按钮">
   </form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

相关阅读:
WPF使用TextBlock实现查找结果高亮显示
 MySQL内外连接
 MFC Windows 程序设计[229]之驱动盘浏览(附源码)
系统日志记录注解方式动态记录
 MySQL数据文件被误删，如何进行恢复？
golang——工程组件logrus日志记录框架（结构化记录，支持文件切割，hook）
如何使用IPGeo从捕捉的网络流量文件中快速提取IP地址
 〖Python网络爬虫实战㊲〗- JavaScript 逆向实战（一）
springboot+mybatis-plus初尝试
 【结构型】享元模式(Flyweight)
原文地址：https://blog.csdn.net/DiligentGG/article/details/126470613