【HTML语义化标签】

---

一、基础标签

1.1标题标签

<h1> 我是一级标题 </h1>

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

1. 加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。

1.2段落和换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望
某段文本强制换行显示，就需要使用换行标签
。
特点：

1. 
   是个单标签。
2. 
   标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

1.3文本格式化标签

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使
文字以特殊的方式显示。
标签语义: 突出重要性, 比普通文字更重要.

    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>的文字
    我是<s>删除线</s>的文字
    我是<ins>下划线</ins>的文字
    我是<u>下划线</u>的文字

1.4

和 标签

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

<div> 这是头部 </div> 
 <span> 今日价格 </span> 

特点：

1. 标签用来布局，但是现在一行只能放一个

   。 大盒子
2. 标签用来布局，一行上可以多个 。小盒子

1.5图像标签和路径

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

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

图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

1.6超链接标签

1. 链接的语法格式

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

1.7综合案例

二、标签

2.1表格标签

2.1.1基本语法

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

提示：

1. 是用于定义表格的标签。
2. 标签用于定义表格中的行，必须嵌套在 标签中。
3. 用于定义表格中的单元格，必须嵌套在标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。

2.1.2表头单元格标签

<table> 
 <tr> 
 <th>姓名</th> 
 ... 
 </tr> 
 ... 
 </table> 

2.1.3案例

2.1.4表格结构标签

1. ：用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。
2. ：用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 标签中。

2.1.5合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

2.1.6表格属性

2.2.列表标签

2.2.1 无序列表

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

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. 中只能嵌套
4. ，直接在
   标签中输入其他标签或者文字的做法是不被允许的。
6. 与
7. 之间相当于一个容器，可以容纳所有元素。
8. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

2.2.2有序列表

<ol> 

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

1. 中只能嵌套
3. ，直接在
   标签中输入其他标签或者文字的做法是不被允许的。
5. 与
6. 之间相当于一个容器，可以容纳所有元素。
7. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

2.2.3自定义列表

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

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

 </dl> 

1. 里面只能包含 和
   。
2. 和
   个数没有限制，经常是一个
   对应多个
   。

2.2.4列表总结

2.3表单标签

<form action=“url地址” method=“提交方式” name=“表单域名称"> 
 各种表单元素控件 
 </form>

2.3.1 表单元素

<input type="属性值" /> 

标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型

2.3.2 元素

<input type="radio" name="sex" value="男" checked="checked" />男 
<input type="text" value=“请输入用户名”> 

2.3.3 标签

<label for="sex">男</label>  <input type="radio" name="sex"  id="sex" /> 

2.3.4 表单元素

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

2.4综合案例

<h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600" >
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>  
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> 
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                        <option>--请选择月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
                <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
        
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况:</td>
            <td>
                    <input type="radio" name="marry" checked="checked">未婚  <input type="radio" name="marry">  已婚  <input type="radio" name="marry"> 离婚
            </td>
        </tr>
         <!-- 第五行 -->
         <tr>
             <td>学历:</td>
             <td><input type="text" value="博士后"></td>
         </tr>
          <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love" > 妩媚的 
                <input type="checkbox" name="love" > 可爱的 
                <input type="checkbox" name="love" > 小鲜肉 
                <input type="checkbox" name="love" > 老腊肉 
                <input type="checkbox" name="love"  checked="checked"> 都喜欢 
            </td>
        </tr>
         <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册" >
            </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <input type="checkbox"  checked="checked">    我同意注册条款和会员加入标准
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <a href="#" > 我是会员，立即登录</a>
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
        </tr>
           
    </table>