1、HTML常用标签

本章笔记主要包括：Html常见的标签及使用方式(版本为HTML4.01)

HTML

HTML负责页面的结构，HTML中的元素分为容器级标签和文本级标签。

h标签

标题类标签(容器级标签)：从h1到h6，类似word中的一级标题、二级标题，代码如下

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

注：容器级标签可以存放任意的元素。

p标签

段落标签(文本级标签)：类似于word中的段落。

<p>
    测试段落
    <h1>一级标题</h1>
</p>

上述代码在运行后会变成如下代码：

<p> 测试段落</p>
<h1>一级标题</h1>
<p></p>

原因：P标签属于文本级标签，只允许存放文本、图片和表单元素

img标签

图片标签：用来插入图片

<!--html路径：test/html/1.html-->
<!--图片路径：test/html/1.jpg-->
<img src="1.jpg" alt="替代文字" />

img是自封闭标签，非成对出现，其中src、alt【alt有的浏览器可能不支持】是标签的属性，引号中对应的是属性的值
，src里面存放的是图片的地址，alt是当引用的图片不存在的时候显示的文字。

注：

• 在页面中表示注释的意思
• 更改上述图片路径为test/1.jpg，则引用方式为img src="../1.jpg" alt="替代文字"
• ../表示当前1.html文件的上一级。

a标签

超级链接标签（文本级标签）

<a href="https://www.baidu.com">百度</a>

点击的时候默认在当前页打开，也就是会覆盖当前页，可以使用a标签中的target属性解决，如：

<a href="https://www.baidu.com" title="提示信息" target="_blank">百度</a>

注：

• title表示鼠标放在a标签上时的提示信息
• target表示以什么方式打开，_blank表示在新窗口打开(一般来说会指定为_blank)

<a href="https://www.baidu.com" title="提示信息" target="字符串1">百度</a>
<a href="http://www.qq.com/" title="QQ" target="字符串2">QQ</a>

如果字符串1和字符串2相等，那么点击的时候“百度1”的时候会新打开一个窗口，并标记该窗口为“字符串1”，此时打开“日常随笔记”，则在被标记的窗口中打开。

a标签除了作为跳转页面来使用还可以用作本页面内跳转
使用方式如下：

<!--设置锚点，可以放置页面任意位置-->
<h1><a name="BT1">标题1</a></h1>
<h1><a id="BT2">标题2</a></h1>
<!--设置连接锚点的超链接-->
<a href="#BT1">跳转至标题1</a>
<a href="#BT2">跳转至标题2</a>

锚点：a标签设置锚点可以使用属性id或name,值为锚点的名称；其他标签使用属性id

连接锚点：使用a标签,设置为href="#所跳转锚点名称"

注：使用href="url连接#锚点名称"这种形式可以直接跳转到所在页面的锚点处

列表标签

列表标签包括：有序列表(ol)、无序列表(ul)，定义列表(dl),三者都表示列表，只是语义不同。

有序、无序列表

<!--有序列表，浏览器会自动为每个li增加一个序号-->
<ol>
    <li>有序  列表1</li>
    <li>有序  列表2</li>
    <li>有序  列表3</li>
</ol>
<!--无序列表-->
<ul>
    <li>无序  列表1</li>
    <li>无序  列表2</li>
    <li>无序  列表3</li>
</ul>

列表标签是“组标签”，ul、li或ol、li总是同时出现，需要注意的是ul或ol只能内部只能写li标签，而li标签是容器级标签，里面可以放任意标签。如：

<ul>
    <li>
        演示嵌套
        <ul>
            <li>子标签1</li>
            <li>子标签2</li>
        </ul>
    </li>
    <li>无序  列表2</li>
</ul>

定义列表

<!-- 定义列表-->
<dl>
    <dt>标题1</dt>
    <dd>描述</dd>
    <dt>标题2</dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
    <dt>标题3</dt>
    <dd>描述</dd>
</dl>
<!--拆分定义列表-->
<dl>
    <dt>标题1</dt>
    <dd>描述</dd>
</dl>
<dl>
    <dt>标题2</dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
</dl>
<dl>
    <dt>标题3</dt>
    <dd>描述</dd>
</dl>

上述书写两种方式，均可描述定义列表。与其他两个标签不同的是，定义列表由三个标签组成，dt(容器级标签)表示标题、dd(容器级标签)表示对标题的描述。一个dt可以有0个或多个dd，dd解释的是最近的dt.

div标签

div是容器级标签，可以对页面进行分割，且默认情况下不会产生效果。

<div>
    <a href="#">测试1</a>
    <a href="#">测试2</a>
</div>
<div>
    <a href="#">测试3</a>
    <a href="#">测试4</a>
</div>

上述代码表示四个超级链接被分割成两个部分，每个div默认占一行。

span标签

span是文本级标签，也可以分割区域。

<span>
    <a href="#">测试1</a>
    <a href="#">测试2</a>
</span>
<span>
    <a href="#">测试3</a>
    <a href="#">测试4</a>
</span>

span在浏览器显示上与div不同，span不会重新另起一行，而是在一行显示。

form、input标签

form表单标签，主要用来收集使用者填写的信息；

input标签，常见包括：文本框、密码框、单选按钮、复选框、普通按钮、提交按钮、重置按钮

<!-- 表单 -->
<form action="提交地址" method="提交方式">
    <!-- 文本框 -->
    <!-- value有值时表示设置默认值为admin -->
    <input type="text" name="username" value="admin" />
    <!-- 密码框 -->
    <!-- 此处表示默认值为123456 -->
    <input type="password" name="pwd" value="123456" />
    <!-- 单选按钮 一般写2个及以上，所有单选按钮之间互斥，有且只能选择一个-->
    <!-- name的值相同，被选中的那个属性为：checked="checked"-->
    <input type="radio" name="sex" checked="checked" />男
    <input type="radio" name="sex" />女
    <!-- 复选框 一般写2个及以上，name值相同，允许选择0-n个-->
    <!-- 属性checked="checked"表示当前框被选中 -->
    <input type="checkbox" name="hobby" checked="checked" />编码
    <input type="checkbox" name="hobby" checked="checked" />找bug
    <!-- 普通按钮 -->
    <!-- 按钮中value属性值表示按钮界面上显示的名字 -->
    <input type="button"  value="按钮" />
    <!-- 提交按钮 -->
    <!-- 提交表单使用 -->
    <input type="submit" value="提交" />
    <!-- 重置按钮 -->
    <!-- 表示回复默认值状态 -->
    <input type="reset" value="重置" />
</form>

form标签中我们常用action和method两个属性，前者表示填写的信息被提交到哪里(如果不写默认是提交到当前页面浏览器地址栏的地址)，method有get和post两种方式。默认get方式，通常使用post方式提交。

input标签中type表示当前使用的类型，其他常用属性见代码中注释，需要注意的是，input中的值是以“key-value”形式提交到后台，前端表现为“name属性值-value属性值”。

select标签

select下拉列表，也是一个组标签，与option搭配使用，被放置与form表单中

<form action="url" method="post">
    <select name="city" id="city">
        <option value="">请选择居住地</option>
        <option value="SZ">苏州</option>
        <option value="SH" selected="selected">上海</option>
    </select>
</form>

option表示当前选择框中的选项，提交方式也是key-value，key对应的是select中的name的属性值，value对应的是option中value的值。其中“selected="selected"”表示当前项为默认选中

textarea标签

多行文本标签，通常我们写文章可以使用多行文本，也放在form表单中

<form action="url" method="post">
    <textarea name="content" cols="30" rows="10"></textarea>
</form>

cols表示列，rows表示行，超过行数，会出现滚动条。

lable标签

lable标签通常用于绑定元素关系

<form action="url" method="post">
    <!-- 这里我们需要点击checkbox的多选框才能选中 -->
    <input type="checkbox" name="code" />编码
    <!-- 本来“编码”与checkbox没关系，现在使用label把“编码”和checkbox框进行绑定 -->
    <!-- 需要label中属性for的值与checkbox中的id值相同，我们点击文字“编码”便可选中 -->
    <input type="checkbox" name="code" id="code"/><label for="code">编码</label>
</form>

表单元素都有label。使用label标签让用户体验变好。

字符实体

<!--html中连续书写多个空格会被折叠成一个空格-->
<!--代替空格-->
&nbsp;
<!--html中标签使用<>符号包裹，如果我们想使用<>符号-->
<!--代替小于号-->
&lt;
<!--代替大于号-->
&gt;
<!--版权号码-->
&copy;

总结：

• HTML在书写的过程中需要对标签进行关闭。

  即，标签成对出现，如：a标签；单标签需要在最后关闭，如：img标签

• 相对路径关心的是相对位置，只要相对位置不变，那么我们所引用的资源就不会丢失

• 锚点在设置的时候a标签可以使用id和name两个属性，而其他标签只能使用id

• form表单中，默认提交的地址是当前页面地址栏中的地址，默认提交方式是get

• 表单内的元素需要使用lable进行相关的关联操作