前端基础学习html部分小结

1 了解知识

1.1 网页的组成

html（Hyper Text Markup Language）指的是超文本标记语言，可以加入图片、声音、动画、多媒体等内容。还可以从一个文件跳到另一个文件，即超链接，与全世界共通。

1.2 常用的浏览器

浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐、谷歌、safari、Opera。
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
目前流行的浏览器内核为Webkit（Safari）、Blink（chrome、opera）。

1.3 Web标准（重点）

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际著名的标准化组织。

Web标准主要包括结构（structure）、表现（Presentation）和行为（Behavior）三个方面。

结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript。

Web标准提出的最佳体验方案：结构、表现、行为相分离。

2 html语法规则

2.1 基本语法

2.1.1 HTML标签是由尖括号包围的关键词，例如<html>

2.1.2 HTML标签通常是成对出现的，例如<html>和</html>，我们称之为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。

2.1.3 有些特殊的标签必须是单个标签（极少情况），例如，<br>我们称之为单标签。也可简写为<br/>

2.2 标签关系

双标签关系分为两类：包含关系和并列关系。

3 HTML基本结构标签

3.1 第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

HTML页面也称为HTML文档。

<!DOCTYPE html>
<!--
不是HTML标签，是文档类型声明标签，必须写在文档最前面，处于<html>标签之前,作用是告诉浏览器使用的哪种HTML版本来显示网页。此处为HTML5。
-->
<html language="en">
<!--
HTML标签：页面中最大的标签，我们称之为根标签
language为语言种类。en定义语言为英文（英文网页），zh-CN定义语言为中文（中文网页）。这个属性对浏览器和搜索引擎有作用，辨别是哪国网页，本页面需要采用什么语言显示。
--><head><!--head标签，是文档的头部：注意在head标签中我们必须要设置的标签是title--><meta charset="UTF-8"><!--字符集（character set）是多个字符的集合。以便于计算机能够识别和存储各种文字通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。常用值为G2312（简中）、BIG5（繁体中文）、GBK（简繁均有）、UTF-8（万国码，基本包含全世界所有国家需要用的字符）。--><title><!--title标签，是文档的标题：让页面拥有一个属于自己的标题--></title><body><!--body标签，文档的主体：元素包含文档的所有内容，页面内容基本都是放在body里面--></body></html>

4 HTML常用标签

4.1 标题标签<h1>-<h6>

标签语义：作为标题使用，并且依据重要性递减。

4.2 段落标签<p></p>

标签语义：（paragraph）标签用于定义段落，可以将整个网页文档分为若干个段落。

文本在一个段落中会根据浏览器窗口的大小自动换行，且段落与段落之前保有空隙。

4.3 换行标签<br>

标签语义：(break)强制换行。

是一个单标签，只是一个简单的另起一行，中间不会和段落一样有很大的垂直间距。
注：<hr/>是水平线标签，且单标签在h5标准下不允许省略结束标签。

4.4 文本格式化标签

标签语义：突出重要性，比普通文字更重要。

加粗：<strong></strong>或<b></b>
倾斜：<em><em/>或<i></i>
删除线：<del><del/>或<s><s/>
下划线：<ins><ins/>或<u><u/>

4.5 <div>和<span>标签

没有语义，他就是一个盒子，用来装内容。division：分割、分区，span：跨度、跨区。

div标签用来布局，但是一行只能放一个div，可以看作一个大盒子。
span标签用来布局，一行可以放多个span，可以看作一个小盒子。

4.6 图像标签

标签语义：用于定义HTML页面中的图像。

<img src="C:\Users\ASUS\Desktop\前端基础第一天.html\笔记\图像URL">

图像标签的属性

src：图片路径，为必须属性。用于指定图像文件的路径和文件名。

alt：文本，替换文本。图像不能显示时，显示的文字。

title：文本，提示文本。鼠标放在图像上，显示的文字。

width：像素，设置图像的宽度。

height：像素，设置图像的高度。

border：像素，设置图像的边框粗细。

图像标签可以拥有多个属性，属性不分先后顺序，必须写在标签名的后面，以空格分开，键值对的格式。

4.7 路径

目录文件夹就是普通文件夹，只不过里面存放了网页所需要的相关素材，比如图片、HTML文件。

根目录就是打开目录文件夹的第一层就是根目录。

路径分类

相对路径：以引用文件所在的位置为参考基础，即图片相对于HTML页面的位置（使用反斜杠）。

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。但是每台设备的绝对路径不一致，很少使用该方式。（使用正斜杠）。

补充：网络中的绝对地址也可以使用。

4.8 超链接标签

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

a为单词anchor的缩写，意为锚。

超链接标签属性

href：用于指定链接目标的url地址，（必须属性）当为标签应用herf属性，才具备超链接功能。

target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开方式。

链接分类

外部链接：

<a href="http://www.qq.com" target="_self">当前窗口腾讯</a>

内部链接：网站内部页面之间的相互链接，语法格式为

<a href="05-HTML常用标签联系.html" target="_blank">盲盒新闻</a>

空链接：如果当时没有确定链接目标时，语法格式为
```
<a href="#" target="_blank">空链接</a>
```
下载链接：地址链接的是文件.exe或者是.zip等压缩文件会下载该文件，语法格式为
```
<a href="img.zip" target="_blank">下载文件</a>
```
网页元素的链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接，语法格式为
```
<a href="http://www.baidu.com" target="_blank"><img src="C:\Users\ASUS\Desktop\前端基础第一天.html\笔记\img.png" title="百度"></a>
```
锚点链接：点击链接，可以快速定位到当前页面的特定位置，语法格式为
```
<h4 id="six">
<a href="#six">锚点链接</a>
```

在链接文本的href属性中，设置属性值为#名字的形式。找到目标位置标签，里面添加一个id属性=刚才的名字。

5 HTML中的注释和特殊字符

5.1 注释

注释的语法格式

<！--注释内容-->

以<！–开头，以–>结尾。快捷键为 Ctrl+反斜杠。

5.2 特殊字符

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

6 表格标签

用于显示、展示数据。

6.1 表格的基本语法

表格的语法格式

<table>
<!--表格--><tr><!--表格行标签--><td><!--表格单元格标签--></td></tr>
</table>

6.2 表头单元格

将<tr>替换成<th>（table head），会加粗并居中显示.

6.3 表格属性（一般通过CSS设置）

属性	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

6.4 表格结构标签

<thead></thead>:用于定义表格头部，内部必须拥有<tr>标签，一般是第一行

<tbody></tbody>:用于定义表格主体，主要用于存放数据本体。

6.5 合并单元格

跨行合并：rowspan=“合并单元格的个数”。以最上侧单元格为目标单元格。

跨列合并：clospan=“合并单元格的个数”。以最左侧单元格为目标单元格。

注意：在<td>标签中添加。

7 列表标签

列表就是用来布局的。

7.2 无序列表

无序列表的语法格式

<ul><li>标签表示HTML页面中项目的无序列表，列表项以&lt;li&gt;标签定义</li><li>列表项1</li><li>列表项2</li>
</ul>

无序列表的列表项之间没有顺序之分是并列的，且<ul>里只能放<li>,<li>可以放任何元素。
无序列表有自己的样式属性，但实际开发中通常由css进行开发。

7.2 有序列表

有序列表的语法格式

<ol><li>标签表示HTML页面中项目的有序列表，列表项以&lt;li&gt;标签定义</li><li>列表项1</li><li>列表项2</li>
</ol>

在<ol>里只能放<li>,<li>可以放任何元素。
有序列表有自己的样式属性，但实际开发中通常由css进行开发。

7.3 自定义列表

自定义列表的语法格式

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>
</dl>

在<dl>里只能放<dt><dd>,<dt><dd>可以放任何元素。

8 表单标签

用于收集用户信息。

8.1 表单的组成

一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三部分组成。

8.2 表单域

表单域是一个包含表单元素的区域，表单域的语法格式

<from action="url地址" method="提交方式" name="表单域名称">

表单域会把它范围内的表单元素信息提交给服务器。

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的URL地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面的多个表单域

注意：写表单元素之前，要先有个表单域把他们包含；表单域就是。

8.3 表单控件（表单元素）

8.3.1 input输入表单元素

语法格式为

<input type="属性值">

<input/>标签是单标签，也可写作<input>。
type属性设置不同的属性值用来指定不同的控件类型。

type属性的属性值

button：定义可点击按钮（多数情况下，可以通过JavaScript启动脚本）。

checkbox：定义复选框。

file：定义输入字段和“浏览”按钮，供文件上传。

hidden：定义隐藏的输入字段。

image：定义图像形式的提交按钮。

password：定义密码字段。该字段中的字符被掩码。

radio：定义单选按钮。

reset：定义重置按钮。重置按钮会清除表单中的所有数据。

submit：定义提交按钮。提交按钮会把表单数据发送到服务器。

text：定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

input输入表单标签属性

属性	属性值	描述
type	输入框类型	定义input方式
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

实例

<form action="xxx.php" method="get"><!-- 文本框 用户可以看到输入内容 -->用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br><!-- 密码框 用户不可以看到输入内容 -->密  码：<input type="password" name="pwd"> <br><!-- radio 单选按钮 可以实现多选一 -->性  别：<label for="nan">男</label> <input type="radio" name="sex" value="男" checked="checked" id="nan"> <label for="nv">女</label> <input type="radio" name="sex" value="女" id="nv"> <br><!-- checkbox 勾选框 可以实现多选效果 -->爱  好：吃饭<input type="checkbox" name="hobby" value="eating" checked="checked"> 睡觉<input type="checkbox" name="hobby" value="sleeping">  打豆豆<input type="checkbox" name="hobby" value="bitdoudou"> <br><!-- 点击提交按钮，可以把表单域中的所有表单元素提交给后台服务器 --><input type="submit" value="免费注册"><!-- 点击重置按钮，还原表单域中的初始设置 --><input type="reset" value="重新填写"><!-- 普通按钮 ，后期结合js搭配使用--><input type="button" value="获取短信验证码"><!-- 上传文件 --><input type="file"></form>

注意：name和value是每个表单元素都由的属性值，主要给后台人员使用。单选按钮和勾选框要有相同的name值。

8.3.2 标签

<label>标签为input元素定义标注（标签）

<label>标签用于绑定一个表单元素

8.3.3 下拉元素标签

下拉元素标签语法格式

<select><option>选项一</option><option selected="selected">选项二</option>
</select>

8.3.4文本域标签

文本域标签语法格式

<textarea>初始内容
</textarea>