四、常用标签

4.1.排版标签

> 排版标签 主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

•  标题标签h(h1~h6)  例如 h1大小依次减小
•  段落标签p,可以把 HTML 文档分割为若干段落  
• 水平线标签hr
• 换行标签br div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。<div>只能放一个 大盒子  <span> 布局 一行可以放很多<span> 小盒子

排版标签 (后者用的多)

• b和strong 文字以粗体显示
•  i和em 文字以斜体显示
• s和del 文字以加删除线显示
• u和ins 文字以加下划线显示

<h1> 我是一级标题 </h1><p> 我是一个段落标签 </p>换行标签 <br/>盒子标签：
<div> 这是头部 </div><span> 今日价格 </span>路径：
<imgsrc="图像URL"/>超链接：
<ahref="跳转目标"target="目标窗口的弹出方式"> 文本或图像 </a>

div 和 span是没有语义的，它们就是一个盒子，用来装内容的。

4.1.1.什么是语义化标签：

>   根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

4.2.标签属性(行内式)

> <标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> <手机 颜色="红色" 大小="5寸">  </手机>

4.3.图像标签img

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

   具体实现：

         <img src="图像URL" />

   解释：

       src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

       所谓属性：简单理解就是属于这个图像标签的特性。

   图像标签的其他属性：


<imgsrc="cz.jpg"width="300"height="300"border="3"title="这是个小蒲公英"/>

4.4. 链接标签(重点）

4.4.1链接的语法格式

链接的语法格式

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

   属性：

       1.href：用于指定链接目标的url地址

       2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开

       3.#：空链接

4.4.2.src 和 href 的区别

4.4.3.链接分类

1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。

2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。

3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。

4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

6. .锚点链接:  点我们点击链接,可以快速定位到页面中的某个位置.

1. 使用相应的id名标注跳转目标的位置。 (找目标)

 <h3 id="two">第2集</h3>

2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）

 <a href="#two">

4.5.注意点

4.5.1.注释

<!-- 注释语句 -->  快捷键是：    ctrl + /       
  或者 ctrl +shift + /

团队约定：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

4.5.2.路径

> 相对路径：

> 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

       这里简单来说，图片相对于 HTML 页面的位置

绝对路径：

           1.是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

五、常用标签下

5.1.列表标签

无序列表：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>  ......
</ul>

有序列表：

<oltype="A"><li>列表项1</li><li>列表二</li><li>列表三</li></ol>

自定义列表：

<dl>

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

5.2.表格标签

5.2.1.制作表格

<table><tr><td>单元格内的文字</td>    ...
</tr>  ...
</table>

table、tr、td，他们是创建表格的基本标签，缺一不可

•  table用于定义一个表格标签。
• tr标签 用于定义表格中的行，必须嵌套在 table标签中。
• td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
• 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。

5.2.2.表头单元格标签th

> 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签th替代相应的单元格标签td即可。

5.2.3.表格标题caption

> 通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。你是风儿我是沙

<table><caption>我是表格标题</caption></table>

5.2.4.表格属性：

三参为0，平时开发的我们这三个参数     border  cellpadding  cellspacing  为  0

5.2.5.合并单元格

合并的顺序我们按照   **先上 后下     先左  后右** 的顺序 ,合并完之后需要删除多余的单元格。

• 跨行合并：rowspan="合并单元格的个数"
• 跨列合并：colspan="合并单元格的个数"

5.2.6.表格划分结构

所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构。

注意：

<--用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签！-->
<thead></thead><--用于定义表格的主体。放数据本体。--><tbody></tbody><--放表格的脚注之类--><tfoot></tfoot>

以上标签都是放到table

六、表单标签

6.1.input控件

> 表单控件：

 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

<inputtype="属性值"value="你好">

• input 输入的意思
• <input />标签为单标签
•  type属性设置不同的属性值用来指定不同的控件类型
• 除了type属性还有别的属性

用户名: <inputtype="text"/>密  码：<inputtype="password"/>用户名:<inputtype="text"name="username"value="请输入用户名"><inputtype="radio"name="sex"/>男
<inputtype="radio"name="sex"/>女
性    别:
<inputtype="radio"name="sex"value="男"checked="checked"/>男
<inputtype="radio"name="sex"value="女"/>女 

6.2.表单标签

6.2.1.label标签

第一种
<label> 用户名： 
<inputtype="radio"name="usename"value="请输入用户名"></label>  第二种
<labelfor="sex">男</label><inputtype="radio"name="sex"id="sex"

6.2.2.textarea（文本域）

<textarea>    文本内容
</textarea>

6.2.3.select下拉列表

<select><option>选项1</option><option>选项2</option><option>选项3</option>  ...
</select>

6.2.4.form表单域

<formaction="url地址"method="提交方式"name="表单名称">  各种表单控件
</form>