第二章 HTML标签
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标签(了解，很多浏览器不支持)
- datalist标签
作用 : 给输入框绑定待选项
- datalist格式:
<datalist>
<option>待选项内容</option>
</datalist>
- 如何给输入框绑定待选列表
- 搞一个输入框
- 搞一个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当作一个空格来处理。
代表一个空格
< 代表一个小于号 <
> 代表一个大于号 >
© ban'quan
注意：分号不要忘。
<p>我 爱你</p>
