第一成品网站文军seo
目录
1 标签
2 html页面基本结构
3 常见标签
3.1 注释
3.2 标题（块级元素）
3.3 段落（块级元素）
3.4 格式化标签（行级元素）
3.5 图片标签（行级元素）
3.6 超链接（行级元素）
3.7 表格（块级元素）
3.8 列表（块级元素）
3.9 表单
（1）form（块级元素）
（2）input
（3）搭配form使用的input
3.10 无语义标签
（1）div
（2）span
4 实现简历页面
HTML是前端页面的骨架，HTML代码是由标签构成，并且不需要编译，直接双击打开html文件，依靠浏览器即可运行。
1 标签
标签是HTML的基本单元，由<标签名 属性(可选项)>内容</标签名>组成，其中带/的是结束标签，不带/的是开始标签。
属性是可选项，以键值对形式存在，键值对之间用空格分割，键与值之间用=分割。
部分标签没有结束标签，比如<meta 属性>，这个标签表示元，指页面的属性，与内容无关。
在VSCode中，使用快捷键!+Tab可以快速生成页面的基本结构：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>DOCTYPE标签是文件的类型，即html文件。
html标签的lang属性表示language，即页面的语言，en表示English。
head标签是页面的属性标签，内容是页面的基本属性。
meta标签即元标签，内部的属性填写一些页面的属性，charset是字符集。
name="viewport"其中的viewport指的是设备的屏幕上能用来显示我们的网页的那一块区域。content="width=device-width, initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放(这个属性对于移动端开发更重要一些)。
title标签是页面的标题。
body标签是页面的内容。
2 html页面基本结构
如上述所言，一个html页面包含的两个主要单元是<head></head>和<body></body>，这种结构构成了DOM树（DOM是文档对象模型）：
其中html是head和body的父标签，而head和body是兄弟标签，title是head的子标签，很多写在body中的标签也是其子标签。
3 常见标签
块级元素指独占一行的元素，行级元素指不独占一行的元素。
3.1 注释
<!-- 注释 -->注释不显示在页面中，使用ctrl+/快捷键可以快速注释/取消注释。
3.2 标题（块级元素）
<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>分为六级标题，数字越大字体越小。对于标签，在VSCode中使用标签名+Tab键可以快速生成标签。
3.3 段落（块级元素）
<p>这是一段话</p>实现自动分段，不使用p标签，即使输入的内容是段落，但是在页面中也没有换行。以下代码是一些p标签的技巧（后续关于快捷键都是在VSCode中，不再提醒）：
<!-- 这是段落，输入lorem+tab可以快捷生成测试文本 --><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio esse nemo molestiae illo suscipit enim earum placeat laboriosam adipisci? Omnis quos sapiente ullam tempore repudiandae cupiditate ea, deleniti maiores a.</p><!--列编辑操作同时编辑多个标签:按住alt+光标同时选多列 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae impedit accusantium esse dolore maxime ducimus labore provident necessitatibus aut ut? Voluptates a quod ea natus magnam dolores reprehenderit est vero!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae impedit accusantium esse dolore maxime ducimus labore provident necessitatibus aut ut? Voluptates a quod ea natus magnam dolores reprehenderit est vero!</p><!-- 换行：在想换行的位置加入<br/>标签 --><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.（此处换行）<br/> Quae impedit accusantium esse dolore maxime ducimus labore provident necessitatibus aut ut? Voluptates a quod ea natus magnam dolores reprehenderit est vero!</p><!-- 浏览器会对多个空格换行键进行过滤，想要多个空格间隙使用转义符 --><p>Lorem, ipsum dolor sit ametconsectetur adipisicing elit. Ut illum a qui iusto sed optio dignissimos quasi cum ad! Reprehenderit vitae excepturi sed earum dolore quod temporibus dolorum voluptas expedita.</p>注意：p标签之间存在一个空隙（即段间距），并且默认没有缩进（CSS可以实现）。内容自动根据浏览器宽度来决定排版，html内容首尾处的换行和空格均无效，在html中文字之间输入的多个空格只相当于一个空格，html中直接输入换行不会真的换行，而是相当于一个空格。
3.4 格式化标签（行级元素）
- 加粗：strong标签和b标签。
- 倾斜：em标签和i标签。
- 删除线：del标签和s标签。
- 下划线：ins标签和u标签。
<strong>加粗1</strong><b>加粗2</b><em>倾斜1</em><i>倾斜2</i><del>删除线1</del><s>删除线2</s><ins>下划线1</ins><u>下划线2</u>3.5 图片标签（行级元素）
<!-- 图片:尽量使用浏览器直接打开html文件，这样工作路径就是相对路径（也支持绝对路径或网络地址） --><img src="image/kid.jpg" alt="小孩" title="动漫可爱小孩" width="500px" height="500px">图片标签使用img标签，src属性是图片的存储路径。alt是替换文本，当文本不能正确显示的时候，会显示一个替换的文字。title是提示文本，鼠标放到图片上，就会有提示。width/height：宽度/高度(单位像素px)，高度和宽度一般只改一个，另外一个会等比例缩放，否则就会图片变形。border是边框，参数是宽度的像素，但是一般使用CSS来设定。
对于属性src的路径：
（1）相对路径：以html所在位置为基准，找到图片的位置。同级路径：直接写文件名即可(或者./)，下一级路径：image/1.jpg，上一级路径：../image/1.jpg
（2）绝对路径：磁盘路径或网络路径。
3.6 超链接（行级元素）
<a href="http://www.baidu.com">百度</a>基本使用方式是a标签，href属性是跳转的地址。target属性是打开方式，默认是_self，如果是_blank则用新的标签页打开。
特殊使用方式：
（1）外部链接：引用外部的网站链接。
<a href="http://www.baidu.com">百度</a>（2）内部链接：网站页面与页面之间的跳转（前提是项目中必须存在这个html页面）。
<a href="2.html" target="_blank">点我跳转到网页2</a>（3）空链接：使用#在href中占位。
<a href="#">空链接</a>（4）下载链接：href对应的路径是一个文件(zip)。
<a href="test.zip">下载文件</a>（5）网页元素链接：可以给图片等任何元素添加链接(把元素放到a标签中)。
<a href="http://www.sogou.com"><img src="rose.jpg" alt=""></a>（6）锚点链接：可以快速定位到页面中的某个位置（通过唯一的id属性索引）。
<a href="#one">第一章</a>...<p id="one">第一章 <br>...</p>注意：禁止a标签跳转：<a href="javascript:void(0);">或者<a href="javascript:;">。
3.7 表格（块级元素）
<!-- CSS代码 --><style>/* td标签内容居中 */td {text-align: center;}</style><table border="1px" width="500px" height="300px" cellspacing="0"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>20</td></tr><tr><td>李四</td><td>女</td><td>18</td></tr></table>- table标签：表示整个表格。
- tr：表示表格的一行。
- td：表示一个单元格。
- th：表示表头单元格，会居中加粗。
- thead：表格的头部区域(注意和th区分，范围是比th要大的)。
- tbody：表格得到主体区域。
对于table标签，有许多属性：
- align是表格相对于周围元素的对齐方式，align="center"(不是内部元素的对齐方式)。
- border表示边框，1表示有边框(数字越大，边框越粗)，""表示没边框。这里注意：table本身有一个边框，但是每个单元格也有一个边框（如果设置cellspacing=0，两个边框重合就成一个边框了）。
- cellpadding表示内容距离边框的距离，默认1像素。
- cellspacing表示单元格之间的距离，默认为2像素。
- width/height表示设置尺寸。
如果有合并单元格的需求，就要使用如下属性：
- 跨行合并：rowspan="n"
- 跨列合并：colspan="n"
合并规则：如果跨行合并，那么上行向下行合并，rowspan属性放在上行单元格的标签中，同时删除下行的单元格；如果跨列合并，那么左列向右列合并，colspan属性放在左列单元格的标签中，同时删除右列的单元格。
3.8 列表（块级元素）
<ol><li>hello</li><li>world</li><li>java</li></ol><ul><li>hello</li><li>world</li><li>java</li></ul>- ol标签是有序列表。
- ul标签是无序列表。
li标签是子标签，表示列表项，其中还能放其他标签，比如实现列表项的超链接。
3.9 表单
（1）form（块级元素）
描述了要把数据按照什么方式，提交到哪个页面中，重点负责表单域（包含表单元素的区域）。
<form action="test.html">[form 的内容]</form>除了form是块级元素，其他常见的输入框都是行级元素。
（2）input
- type(必须有)，取值种类有：button（这个按钮通常和JS搭配使用，实现点击后触发事件，比如给服务器发送请求），checkbox，text，file，image，password，radio等。
- name：给input起名字。对于单选按钮，具有相同的name才能多选一。
- value：input中的默认值。
- checked：默认被选中(用于单选按钮和多选按钮)。
- maxlength：设定最大长度。
<!-- 输入框 --><input type="text"><br/><!-- 密码框 --><input type="password"><br/><!-- 单选框:相同name具有排他性，通过id和lable将字符和单选框绑定实现点击字符也可以勾选 --><input type="radio" name="gender" id="male" checked="checked"><label for="male">男</label><input type="radio" name="gender" id="female"><label for="female">女</label><br/><!-- 复选框 --><input type="checkbox">王者<input type="checkbox">吃鸡<input type="checkbox">消消乐<br/><!-- 按钮 --><input type="button" value="按钮"><br/><!-- 文件选择器 --><input type="file"><br/><!-- 下拉菜单 默认选中在要选中的选项option添加属性selected=”selected”--><select><option>北京</option><option>西安</option><option>上海</option><option>武汉</option></select><br/>上述代码使用对于每一种输入框后都添加了<br/>标签，强制换行，这就是因为input输入框是行级元素。
（3）搭配form使用的input
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空"></form>点击submit提交按钮后，浏览器就会向url发送表单输入的内容：/test.html?username=输入的内容
点击reset按钮后，form表单的输入的内容都会被重置。
3.10 无语义标签
无语义标签不像上述标签，没有明确用途，像一个万能盒子，根据需求实现各种各样的标签（除了input标签无法代替）。
（1）div
div独占一行的，是一个大盒子。
（2）span
span不独占一行，是一个小盒子。因此，就产生了很多用法，比如用div搞一个大盒子，大盒子内部有很多标签元素。
<div>小猫</div><div>小狗</div><span>小猫</span><span>小狗</span>
4 实现简历页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>填写个人简历</title></head><body><h1>请填写简历信息</h1><table width="500px"><tr><td>姓名</td><td><input type="text"></td></tr><tr><td>性别</td><td><input type="radio" name="gender" id="man"><label for="man"><img src="image/男.png" width="20px">男</label><input type="radio" name="gender" id="woman"><label for="woman"><img src="image/女.png" width="20px">女</label></td></tr><tr><td>出生日期</td><td><select><option>--请选择年份--</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select><option>--请选择日期--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select></td></tr><tr><td>就读学校</td><td><input type="text"></td></tr><tr><td>应聘岗位</td><td><input type="checkbox">前端开发<input type="checkbox">后端开发<input type="checkbox">测试开发<input type="checkbox">运维开发</td></tr><tr><td>掌握的技能</td><td><textarea cols="30" rows="10"></textarea></td></tr><tr><td>项目经历</td><td><textarea cols="30" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox">我已阅读了公司的招聘要求</td></tr><tr><td></td><td><a href="#">查看我的状态</a></td></tr><tr><td></td><td><h3>请应聘者确认：</h3><ul><li>以上信息真实有效</li><li>能够尽早去公司实习</li><li>能够接受加班</li></ul></td></tr></table></body></html>
下篇文章：
前端三件套—CSS入门
https://blog.csdn.net/sniper_fandc/article/details/147071221?fromshare=blogdetail&sharetype=blogdetail&sharerId=147071221&sharerefer=PC&sharesource=sniper_fandc&sharefrom=from_link