做新网站 备案证明交接最新网站查询工具
目录
1. HTML 语法规范
2. HTML 基本结构标签
3. 网页开发工具
4. HTML 常用标签
5. HTML 中的注释和特殊字符
6. 表格标签
7. 列表标签
8. 表单标签
1. HTML 语法规范
1.1 基本语法概述
1. HTML 标签是由尖括号包围的关键词,例如 <html>。
2. HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
3. 有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签。
1.2 标签关系
双标签关系可以分为两类:包含关系和并列关系。
包含关系(父子关系)
<head> <title> </title>
</head>
并列关系(兄弟关系)
<head> </head>
<body> </body>
2. HTML 基本结构标签
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。
HTML页面也称为 HTML 文档。
<html> <head> <title>第一个HTML网页</title></head><body>喔吼吼吼</body>
</html>
| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签,称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容,页面内容基本都是放到body里面的 |
HTML 文档的的后缀名必须是 .html 或 .htm ,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。
3. 网页开发工具
VSCode 工具生成骨架标签新增代码(<!DOCTYPE> 标签、lang 语言、charset 字符集)
3.1 文档类型声明标签
<!DOCTYPE> 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页。
注意:
1. <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。
2. <!DOCTYPE>不是一个 HTML 标签,它就是文档类型声明标签。
3.2 lang 语言种类
用来定义当前文档显示的语言。
<html lang="en">
1. en定义语言为英语
2. zh-CN定义语言为中文
简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页,fr法语网页。
其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文,这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的。
3.3 字符集
字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内,可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset="UTF-8" />
charset 常用的值有:GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家需要用到的字符。
注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量统一写成标准的 "UTF-8",不要写成 "utf8" 或 "UTF8"。
3.4 总结
1. 以上三个代码 vscode 自动生成,基本不需要我们重写。
2. <!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面。
3. <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站,本页面采取英文来显示。
4. <meta charset=“UTF-8” /> 必须写,采取 UTF-8来保存文字,如果不写就会乱码,具体原理后面分析。
4. HTML 常用标签
4.1 标签语义
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。
4.2 标题标签 <h1> - <h6>(重要)
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题, 即<h1> - <h6> 。
<h1> 这是一级标题 </h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减,</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见。</h6>
效果展示:

4.3 段落标签(重要)
<p> 这是一个段落标签 </p> 4.4 换行标签(重要)
<br /> 4.5 文本格式化标签
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong>标签加粗,语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签,语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签,语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签,语义更强烈 |
4.6 <div> 和<span>标签
<div> 一行只能放一个大盒子 </div>
<span> 一行上可以多个小盒子 </span> div 是 division 的缩写,表示分割、分区。span 意为跨度、跨距。
4.7 图像标签 (重点)
<img src="图像URL" /> | 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本,图像不能显示时用文字替换 |
| title | 文本 | 提示文本,鼠标放到图像上,显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
4.8 路径 (重点)
(1)目录文件夹和根目录:目录文件夹: 就是普通文件夹,里面存放了做页面所需要的相关素材,比如 html 文件、图片等。根目录: 打开目录文件夹的第一层就是根目录。(2) VSCode打开目录文件夹 :文件----> 打开文件夹,选择目录文件夹(或者直接把文件夹拉进vscode)。 方便后期管理文件
页面中的图片会非常多, 通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。路径可以分为:相对路径和绝对路径。
| 相对路径分类 | 符号 | 说明 |
| 同一级路径 | 图像文件位于HTML文件同一级,如<img src="baidu.gif" /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级,如<img src="images/baidu.gif" /> |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级,如<img src="../baidu.gif" /> |
相对路径是从代码所在的这个文件出发,去寻找目标文件的,而这里所说的上一级 、下一级和同一级就是图片相对于HTML页面的位置。
4.9 超链接标签 (重点)
1. 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> | 属性 | 作用 |
| href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式,其中_self为默认值(当前窗口打开),_blank为在新窗口中打开方式 |
2. 链接分类:
5. HTML 中的注释和特殊字符
5.1 注释
<!-- 注释语句 --> 快捷键: ctrl + / 5.2 特殊字符
| 特殊字符 | 描述 | 字符的代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2(上标2) | ² |
| ³ | 立方3(上标3) | ³ |
6. 表格标签
6.1 表格的主要作用
6.2 表格的基本语法
<table><tr><td>姓名</td> <td>性别</td> <td>年龄</td>...</tr>...
</table>
6.3 表头单元格标签
<table><tr><th>姓名</th>...</tr>...
</table> 
6.4 表格属性
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 规定表格相对周围元素的对齐方式。 |
| border | 1或"" | 规定表格单元是否拥有边框,默认为"",表示没有边框。 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
| cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
| width/height | 像素值或百分比 | 规定表格的宽度/高度。 |
<table align="center" width="500" height="249" border="1" cellspacing="0">……
</table> 6.5 表格结构标签
6.6 合并单元格
6.6.1 合并单元格方式
- 跨行合并:rowspan="合并单元格的个数"
- 跨列合并:colspan="合并单元格的个数"
6.6.2 目标单元格
- 跨行:最上侧单元格为目标单元格, 写合并代码
- 跨列:最左侧单元格为目标单元格, 写合并代码
6.6.3 合并单元格的步骤
7. 列表标签
7.1 无序列表(重点)
<ul><li>列表项</li><li>列表项</li><li>列表项</li>...
</ul> #CSS
li {/* 去掉li前面的小圆点 */list-style: none;
} 7.2 有序列表(理解)
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ol> 7.3 自定义列表(重点)
<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>
</dl> 7.4 列表总结
| 标签名 | 定义 | 说明 |
| <ul></ul> | 无序标签 | 里面只能包含li,没有顺序,使用较多,li里面可以包含任何标签 |
| <ol></ol> | 有序标签 | 里面只能包含li,有顺序,使用相对较少,li里面可以包含任何标签 |
| <dl></dl> | 自定义列表 | 里面只能包含dt和dd,dt和dd里面可以放任何标签 |
8. 表单标签
8.1 为什么需要表单
8.2 表单的组成
8.3 表单域
<form action=“url地址” method=“提交方式” name=“表单名称">各种表单元素控件
</form> | 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
| name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域。 |
8.4 表单控件(表单元素)
8.4.1 <input> 表单元素
<input type="属性值" /> - <input /> 标签为单标签
- type 属性设置不同的属性值用来指定不同的控件类型
| 属性值 | 描述 |
| button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。 |
| checkbox | 定义复选框。 |
| file | 定义输入字段和“浏览”按钮,供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
| image | 定义图像形式的提交按钮。 |
| password | 定义密码字段,该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮,重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮,提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。 |
| 属性 | 属性值 | 描述 |
| name | 由用户自定义 | 定义input元素的名称。 |
| value | 由用户自定义 | 规定input元素的值。 |
| checked | checked | 规定此input元素首次加载时应当选中。 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
<form action="xxx.php" method="get"><!-- text 文本框 用户可以里面输入任何文字 -->用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br> <!-- password 密码框 用户看不见输入的密码 -->密码: <input type="password" name="pwd" > <br> <!-- radio 单选按钮 可以实现多选一 --><!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 --><!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br> <!-- checkbox 复选框 可以实现多选 -->爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked"> <br> <!-- 点击了提交按钮,可以把表单域form里面的表单元素里面的值提交给后台服务器 --><input type="submit" value="免费注册"><!-- 重置按钮可以还原表单元素初始的默认状态 --><input type="reset" value="重新填写"><!-- 普通按钮 button 后期结合js 搭配使用--><input type="button" value="获取短信验证码"> <br><!-- 文件域 使用场景 上传文件使用的 -->上传头像: <input type="file" >
</form>
1. 有些表单元素想刚打开页面就默认显示几个文字怎么做?答: 可以给这些表单元素设置 value 属性=“值”用户名: <input type="text" value="请输入用户名" />2. 页面中的表单元素很多,如何区别不同的表单元素?答: name 属性:当前 input 表单的名字,后台可以通过这个 name 属性找到这个表单。页面中的表单很多,name 的主要作用就是用于区别不同的表单。用户名: <input type="text" value="请输入用户名" name="username" />
- name 属性后面的值,是自定义的
- radio (或者checkbox)如果是一组,我们必须给他们命名相同的名字
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女3. 如果页面一打开就让某个单选按钮或者复选框是选中状态?答: checked 属性:表示默认选中状态。用于单选按钮和复选按钮。性 别: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女4.如何让input表单元素展示不同的形态? 比如单选按钮或者文本框。答: type属性:type属性可以让input表单元素设置不同的形态。<input type="radio" name="sex" value="男" checked="checked" />男 <input type="text" value=“请输入用户名”>
8.4.2 <label> 标签
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" /> <label for="text"> 用户名:</label> <input type="text" id="text" >
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label> 8.4.3 <select> 表单元素
<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select> 8.4.4 <textarea> 表单元素
<textarea rows="3" cols="20">文本内容
</textarea> 8.5 表单元素总结点
<form><input type=“text" name=“username”><select name=“jiguan”><option>北京</option></select> <textarea name= "message"></textarea>
</form> 9. 查阅文档
- W3C : http://www.w3school.com.cn/
- MDN:https://developer.mozilla.org/zh-CN/
