第二章 HTML标签

作者: gritzp | 来源:发表于2019-03-08 15:16 被阅读0次

H标签 (Header)

作用

专门用来给文本添加标题语义。而不是用来修改文本样式的。

格式

<body>
    <h1>H1标签</h1>
    <h2>H2标签</h2>
    <h3>H3标签</h3>
    <h4>H4标签</h4>
    <h5>H5标签</h5>
    <h6>H6标签</h6>
    <h7>没有H7</h7>
    可以看出H标签都是独占一行的！
</body>

效果

P标签 (Paragraph)

作用

告诉浏览器那些文字是一个段落。

格式

<body>
   <p>我是一段文本1</p>
   <p>我是一段文本2</p>
    我是一段普通文本3
    我是一段普通文本4
</body>

效果
注意点

可以看出，p标签包含的文本是独占一行的。

Hr标签(Horizontal Rule)

作用

显示一条分割线。

格式

<hr/>

注意点

在浏览器中单独占一行

注释


<!--注释的内容-->

img标签

作用

向网页中添加相关图片。。

格式

<body>

<img src="/statics/images/course/smiley.gif"  alt="Smiley face" 
                width="42" height="42" title=" 图片的名称"
>

</body>

注意

img标签不会独占一行。
alt属性的含义：当需要的图片找不到，就替换成alt属性里边的文字。

路径问题

<!--
路径问题
其实想给src属性赋值有两种方式
1.通过相对路径赋值(掌握)
相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

1.1同级
同级就是"图片"和".html文件"存储在同一个文件夹中
格式: src="smiley.gif"
含义: 在.html文件所在的文件夹中查找名称叫做smiley.gif的图片

1.2下级
下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中
格式: src="images/smiley.gif"
含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹
然后再在images文件夹中找到名称叫做smiley.gif的图片

1.3上级
上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
格式: src="../smiley.gif"
含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫做smiley.gif
其中../代表找到当前文件夹的上一级文件夹

2.通过绝对路径赋值(了解)
绝对路径就是每次都从指定的盘符开始查找

格式: src="C:\Users\zp\Desktop\HTML\smiley.gif"

注意:
1.路径中不要出现中文, 否则可能出现未知问题
2.如果是通过"相对路径"来指定图片, 不能跨盘符
2.1例如.html文件在C盘, 那么不能去查找D盘图片
-->

br标签

换行标签。
格式

<br>

注意点

使用多少个br标签，就换多少行。

由于HTML的作用是来给文本添加语义的，而br标签的语义是不另起一个段落换行，而在企业开发中需要换行都是因为要另起一个段落，因此在企业开发中很少使用br标签。例如使用p标签包裹内容换行。

假链接

作用

点击之后不会跳转的链接

格式

<a href="#">xxxx</a>   //点击之后会回到顶部
<a href="javascript:">xxx</a>  //点击之后不会回到顶部

锚点

作用

跳转到当前页面的制定位置，也可以跳转到指定页面的指定位置。

//跳转到当前页面指定位置
<h2 id="top">我是顶部</h2>
<a href="#middle" >跳转到中部</a>
    <br>
    <br>
    <br>
<h2 id="middle">我是中部</h2>

//跳转到指定页面的指定位置
<h2 id="top">我是页面1</h2>
<a href="指定页面2.html#middle" >跳转到中部</a>
...
...

列表标签

作用

给一堆数据添加列表语义，也就是告诉浏览器这一堆数据是一个整体。

HTML列表标签的分类
- 无序列表(unordered list)
- 有序列表(ordered list)
- 定义列表(defination list)

无序列表

没有先后之分的一堆数据。

格式

<body>
    <h2>中国有哪些城市</h2>
    <ul>
        <li>西安</li>
        <li>北京</li>
        <li>上海</li>
    </ul>
</body>

有序列表

<body>
    <h2>音乐排行榜</h2>
    <ol>
        <li>演员</li>
        <li>女人不应该让男人太累</li>
        <li>男人不应该让女人流泪</li>
    </ol>
</body>

定义列表

<dl>
    <dt>定义列表的标题(difination title)</dt>
    <dd>定义列表的描述(difination description)</dd>

    <dt>北京</dt>
    <dd>中国的首都</dd>
    <dt>西安</dt>
    <dd>爱吃肉夹馍</dd>
</dl>

     dl>dt+dd  //快捷输入法

表格标签

作用

用来给一堆数据添加表格语义。表格是一种数据的表现形式。当数据量比较大的时候，表格被认为是最清晰的表现形式。

格式

<body>
   <table border = "1" >
       <caption>表格的标题</caption>
       <th>表格的列标题</th>
       <tr>
           <td></td>
       </tr>
   </table>
</body>

说明

一对table标签就代表一个表格。

一对tr标签代表表格中的一行。

一对td标签代表表格中一行中的一个单元格。

注意点

表格标签有一个边框属性（border），这个属性决定了边框的宽度，默认情况下该属性值为0，所以看不到边框。在以前表格的使用非常多，但是现在基本被div+css给替代了。

表格标签的属性

以下内容为了解，因为样式要用css来控制：

宽度和高度
可以给table和td标签使用。修改td标签的width和height值，只会修改当前单元格的宽度和高度，不会修改整个表格的宽高。

水平对齐和垂直对齐（align和valign）
水平对齐可以给table/tr/td标签使用。垂直对齐只能给tr和td标签使用。

外边距和内边距
只能给table标签使用。
外边距（cellspacing）：单元格和单元格之间的距离。
内边距 (cellpadding)：单元格的边框和框内文字之间的间隙（最近的距离）。

细线表格（了解）

起初是这样的。
把外边距调整为0，不能解决问题，仅仅是将两个边框合并在一起了。

可以通过bgcolor属性，解决该问题

 <table  bgcolor="black" cellspacing="1">
        <tr  bgcolor="white">
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr bgcolor="white">
            <td>2.1</td>
            <td>2.2</td>  
        </tr>
    </table>

效果

单元格合并

水平方向上的单元格合并

可以给td标签添加一个colspan属性，来指定把某一个单元格当作多个单元格来看待。
例如:
<td colspan="2">单元格</td>
其含义就是把当前单元格当作两个单元格来看待。（注意：多出的单元格要删除之后才能正常显示）

垂直方向上的单元格合并

可以给td标签添加一个rowspan属性。来指定把某一个单元格当作多个单元格来看待。(垂直方向)
<td colspan="2">单元格</td> ，删除多余的单元格，其他与水平方向同理。

表单标签

什么是表单？

表单就是专门用来收集用户信息的。

什么是表单元素？

在HTML中标签/标记/元素都是指HTML中的标签。比如,<a> 可以叫a标签/a元素/a标记。
表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能。

表单的格式

<form>
    <表单元素>
</form>

常见的表单标签

input标签

input标签的type属性有很多取值，取值的不同就决定了input标签的功能和外观不同。
注意：表单元素必须写在form表单中。

<form>
    <!--明文输入框-->
    账号:<input type="text"><br>
    <!--暗文输入框-->
    密码:<input type="password"><br>
    <!--给输入框设置默认值-->
    账号:<input type="text" value="lnj"><br>
    密码:<input type="password" value="123"><br>
 
    <!--
    单选框
    注意点:
    1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值。
    2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
    3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略属性的取值
    -->
    性别:
    <input type="radio" name="xx" checked>男
    <input type="radio" name="xx">女
    <input type="radio" name="xx" >保密<br>

    <!--多选框-->
    爱好:
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox" checked="checked">棒球
    <input type="checkbox" checked="checked">足浴
</form>

<form action="http://www.it666.com">
    <!--明文输入框-->
    账号:<input type="text" name="aa"><br>
    <!--暗文输入框-->
    密码:<input type="password" name="bb"><br>

    <!--
    定义普通按钮
    可以通过value属性来给按钮指定标题
    作用: 配合JS完成一些操作
    -->
    <input type="button" value="我是按钮">
    <!--
    图片按钮
    作用: 配合JS完成一些操作
    -->
    <input type="image" src="images/register.jpg">
    <!--
    重置按钮
    作用: 用于清空表单中已经填写好的数据
    注意点:
    如果想想改重置按钮默认的按钮标题可以通过value属性来修改
    -->
    <input type="reset" value="清空">
    <!--
    提交按钮
    作用: 将表单中已经填写好的数据, 提交到远程服务器
    注意点:
    要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
    1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
    2.需要给需要提交到服务器的表单元素添加一个name属性
    -->
    <input type="submit">
    
    <!--
    隐藏域
    作用 : 配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器
    Ajax
    -->
    <input type="hidden" name="cc" value="kukuku">
</form>

label标签的使用

1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签
3.绑定的格式:
3.1 将文字利用label标签包裹起来
3.2 给输入框添加一个id属性
3.3 在label标签中通过for属性和输入框中的id进行绑定即可
<label for="account">账号:</label><input type="text" id="account">

<form action="">
   <label for="account">账号:</label><input type="text" id="account"><br>
   <label for="pwd">密码:</label><input type="password" id="pwd"><br>

<!-- 这种方式也可以实现，但是具有局限性 -->
   <label>
       账号:<input type="text">
   </label><br>

<!--上面的方式不具有下面这种绑定方式的灵活性 -->
   <label for="def">账号:</label><input type="text" id="abc"><br>
   <label for="abc">密码:</label><input type="password" id="def"><br>
</form>

datalist标签(了解，很多浏览器不支持)

1. datalist标签

作用 : 给输入框绑定待选项

1. datalist格式:

   <datalist>
         <option>待选项内容</option>
   </datalist>

1. 如何给输入框绑定待选列表

搞一个输入框
搞一个datalist列表
给datalist列表标签添加一个id
给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

select标签

用于定义下拉列表

格式

<select>
    <optgroup label="分组名称">
        <option>列表数据</option>
    </optgroup>
</select>

注意点:

下拉列表不能输入内容, 但是可以直接在列表中选择内容
可以通过给option标签添加一个selected属性来指定列表的默认值
可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

<select>
    <optgroup label="北京">
        <option>朝阳区</option>
        <option>昌平区</option>
        <option>通州区</option>
    </optgroup>
    <optgroup label="广州">
        <option>天河区</option>
        <option>越秀区</option>
        <option>黄浦区</option>
    </optgroup>
</select>

textarea标签

定义一个多行输入框

格式

    <textarea>
   </textarea>

注意点:

默认情况下输入框可以无限换行。
默认情况下输入框有自己的宽度和高度。
可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入。
默认情况下输入框是可以手动拉伸的。

marquee 跑马灯标签

什么是marquee标签?

作用: 跑马灯效果

格式:
<marquee>内容</marquee>

属性:
direction: 设置滚动方向 left/right/up/down
scrollamount: 设置滚动速度, 值越大就越快
loop: 设置滚动次数, 默认是-1, 也就是无限滚动
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好。

<!--滚动方向-->
<marquee>随便写点内容</marquee>
<marquee direction="right">随便写点内容</marquee>
<marquee direction="up">随便写点内容</marquee>
<marquee direction="down">随便写点内容</marquee>
<hr>
<!--设置滚动速度-->
<marquee scrollamount="1">随便写点内容</marquee>
<marquee scrollamount="100">随便写点内容</marquee>
<hr>
<!--设置滚动次数-->
<marquee loop="1">随便写点内容</marquee>
<hr>
<!--设置滚动类型-->
<marquee behavior="slide">随便写点内容</marquee>
<marquee behavior="alternate">随便写点内容</marquee>

<marquee>
    <img src="images/NJ.jpg" width="50px">
</marquee>

字符实体

在HTML中对空格/回车/tab键不敏感，会把多个空格/回车/tab当作一个空格来处理。

 
        &nbsp; 代表一个空格 
        &lt; 代表一个小于号 <
        &gt; 代表一个大于号 >                    
        &copy; ban'quan
       注意：分号不要忘。

  <p>我&nbsp;&nbsp;&nbsp;爱你</p>

第二章 HTML标签

H标签 (Header)

P标签 (Paragraph)

Hr标签(Horizontal Rule)

注释

img标签

br标签

假链接

锚点

列表标签

无序列表

有序列表

定义列表

表格标签

作用

格式

说明

表格标签的属性

单元格合并

表单标签

什么是表单？

什么是表单元素？

表单的格式

常见的表单标签

label标签的使用

datalist标签(了解，很多浏览器不支持)

select标签

textarea标签

marquee 跑马灯标签

什么是marquee标签?

字符实体

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读