前端工程师养成记——二、HTML入门

HTML入门

行内默认的规范——html语义化

html语义化是指根据网页中内容的结构，选择适合的HTML标签进行编写。
好处：

1. 在没有CSS的情况下，页面也能呈现出很好的结构;
2. 有利于SEO，让搜索引擎爬虫更好的理解网页；
3. 方便其他设备解析（如屏幕阅读器，盲人阅读器等）；
4. 便于团队开发和维护。

屏幕阅读器：网页标题提取网址（ https://h5o.github.io ）
html入门学习网站：https://www.w3cschool.cn/html、https://www.w3cschool.cn/htmltags/tag-hn.html

一、标题与段落

标题: <h1></h1> 、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>
标题中的注意事项：

• 在一个网关中，h1标题最重要，并且一个.html文件中只能出现一次h1标签；
• h5、h6不经常使用；

段落：<p></p>

二、文本修饰标签

强调：<strong></strong>、<em></em>
区别：

• 写法和展示效果是有区别的，strong是加粗，em是斜体；
• strong的强调性更强，em的强调稍弱。

下标：     H₂o
上标：     a² + b² = c²
删除文本： <del></del>     删除文本
插入文本： <ins></ins>     插入文本
注意事项：一般情况下，删除文本都是和插入文本配合使用的。

例如：促销：原价300，现价100

促销：原价<del>300</del>，现价<ins>100</ins>

三、图片标签与图片属性

src ： 引入图片的地址
alt ： 当图片出现问题时，可以显示一段友好的提示文字
title ： 提示信息
width、height：图片的大小
border ： 图片的边框（0表示没有边框）
align ： 图片的对齐方式（center、left、right）

<img 
	 src="xxx.jpg" 
	 alt="Pulpit rock" 
	 width="100" height="100"
	 border=”3“ 
	 align="right"
>

四、跳转链接

1）a标签： <a></a>

• href属性：链接的地址（url）
• target属性：链接打开方式，在当前页面打开_self（默认），新窗口打开用_blank

2）base标签：<base />，用来改变链接的默认行为
  注意：base标签应该放在head中，下图中表示所有a标签都会在新窗口打开

3）跳转锚点：

• 实现方式一： #号 + id属性
  
• 实现方式二： #号 + name属性
  

五、特殊符号

  编写一些文本时，经常会遇到输入法无法输入的字符，如®（注册商标）、©（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这写无法输入和空格都是特殊字符。在HTML中，为这些特殊字符准备了专门的代码。
  以下是常用的一些特殊符号的代码：

如果想查看完整的特殊符号： 请参照 HTML 实体参考手册。

六、列表

   注：列表之前可以互相嵌套，形成多层级的列表

1）无序列表: 使用频率高，一般用css控制样式

例如：

• 打羽毛球
• 跑步

<ul> 
	<li>打羽毛球</li>
	<li>跑步</li>
</ul>

type属性：改变前面标记的样式（一般都用css控制），详情可参照HTML中ul标签参考手册

注意： ul和li必须是组合出现的，他们之间是不能有其他标签的

2）有序列表: 使用少，经常用的是无序列表，无序列表可以代替有序列表

例如：

1. 第一项
2. 第二项

<ol> 
	<li>第一项</li>
	<li>第二项</li>
</ol>

type属性：详情可参照HTML中ol标签参考手册

3）自定义列表：
<dl> : 定义列表
<dt> : 自定义列表项目
<dd> : 定义自定义列表的描述
例如：

Coffee

- black hot drink

Milk

- white cold drink

  <dl>
 	<dt>Coffee</dt>
 	<dd>- black hot drink</dd>
 	
 	<dt>Milk</dt>
	 <dd>- white cold drink</dd>
 </dl>

七、表格标签

<table> : 表格的最外层容器
<tr> : 定义表格行
<th> : 定义表头
<td> : 定义表格单元
<caption> : 定义表格标题
表格的详情信息：可参照HTML中table标签参考手册。
注：上述标签之间有嵌套关系，需要符合嵌套规范

语义化标签： <tHead> <tBody> <tFoot>
注：在一个table中，tBody是可以出现多次的，但是tHead和tFoot只能出现一次

八、表单标签

1、基础标签

<form> : 表单的最外层容器
<input> : 标签用于搜索用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等
     input标签中有一个type属性，决定是什么控件，总结如下表：

2、其他标签

常用的： textarea、select & option、label

1）多行文本框： <textarea>

可参考https://www.w3cschool.cn/htmltags/tag-textarea.html

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

2) 下拉菜单： <select> 、<option>

可参考 https://www.w3cschool.cn/htmltags/tag-select.html

<select>
	<option value="请选择"  selected  disabled >请选择</option>   
	<option value="香蕉" >香蕉</option>                                  // selected  表示已选择
	<option value="苹果">苹果</option>
	<option value="西瓜">西瓜</option>
	<option value="菠萝">菠萝</option>
</select>

3）辅助标签 <label>，其for属性与表单标签中的id属性结合使用

作用：让可选择的范围变大（点击”男/女“也可实现选中），提升用户体验
可参考 https://www.w3cschool.cn/htmltags/tag-label.html

<input  type="radio" name="gender" id="man“ /><label>男</label>
<input  type="radio" name="gender" id="woman“ /><label>女</label>

九、HTML 区块 <div> 、 <span>

可参照 https://www.w3cschool.cn/html/html-blocks.html

1、div 块

   div全称为”division“， ”分割、分区“的意思，</div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数标签都可以嵌套在</div>标签中，</div>中还可以嵌套多层</div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

2、span（内联）

   span用来修饰文字的，div和span都是没有任何默认样式的，需要配合CSS才行 。