基础标签
a标签
什么是a标签?
- a标签的作用:就是同于控制页面与页面之间跳转的
- a标签的格式:
<a href = "指定需要跳转的目标界面">需要展现给用户查看的内容</a>
- a标签中的target属性:这个属性的作用就是专门用于控制如何跳转
- _self:用于在当前选项卡跳转,也就是不新建界面跳转,默认就是_self
- _blank:用于在新的选项卡中跳转,也就是新建页面跳转. - a标签的title属性:这个属性和在img的title属性一样,都是用来控制鼠标悬停时显示的提示文本的.
- 注意点:
- a标签不仅可以让文字可以点击,图片也可以点击
- 一个a标签必须有一个href属性,否则a标签不知道要跳转到什么地方
- 如果通过a标签的href属性指定给一个URL地址,那么必须在地址前面加上http:// 或者https://
- a标签的href属性除了可以指定一个网络地址以外,还可以指定一个本地地址
base标签
- 格式:
<head>
<meta charset="UTF-8">
<title>11-base标签</title>
<base target="_blank">
</head>
- 作用:base标签就是专门用来指定当前网页中所有的超链接(a标签)需要如何打开.
- 注意点:
- base标签必须写在head标签的开始标签和结束标签之间.
- 如果既在a标签中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行.
假链接
- 格式:
- javascript:
- 两者之间的区别:
- .#的假链接会自动回到网页的顶部,而javascript:不会自动回到网页顶部.
锚点
1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2.如何给HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
- 格式:
<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>
- 注意点:
- 1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
- 2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
- 格式:
<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>
<h2 id="bottom">我是锚点测试界面33333</h2>
列表标签
定义列表
- 定义列表的作用:
- 给一堆数据添加列表语义
- 先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息
- 定义列表的格式:
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>
其实dt和dd都是英文的缩写
dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题
dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的
- 定义列表的应用场景
- 做网站尾部的相关信息
- 做图文混排
- 定义列表的注意点
- 和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现
- 和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签
- 一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.推荐使用一个dt对应一个dd
- 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签
表格标签
什么是表格标签?
- 作用:用来给一堆数据添加表格语义,其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式.
- 格式:
<table>
<tr>
<td>需要显示的内容</td>
</tr>
</table>
- table标签:其实表格标签中的table代表整个表格,也就是一堆table标签就是一个表格.
- tr标签:其实标高 标签中的tr标签代表整个表格中的一行数据,也就是说一对tr标签就是表格中的一行.
- td标签:其实表格标签中的td标签代表表格中一行中的一个单元格,也就是说一对td标签就是一行中的一个单元格.
- 注意点:
- 表格标签中有一个边框属性,这个属性决定了边框的宽度,默认情况下这个属性的值是0,所以看不到边框.
- 表格标签和列表标签一样,它是一个组合标签,所以table/tr/td要么一起出现,要么一起不出现,不会单个出现.
## 表格标签的属性
- 宽度和高度的属性:可以给table标签和td标签使用
- 表格的宽度和高度默认是按照内容的尺寸来调整的,也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
- 如果给td标签设置width/height属性,会修改当前单元格的宽度和高度,不会影响整个表格的宽度和高度.
- 水平对齐和垂直对齐的属性:其中水平对齐可以给table标签和tr标签和td标签使用;垂直对齐只能给tr标签和td标签使用.
- 给table标签设置align属性, 可以控制表格在水平方向的对齐方式
- 给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
- 给td标签设置align属性, 可以控制当前单元格中内容在水平方向的对齐方式
- 注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
- 给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式
- 给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式
- 注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐.
- 外边距和内边距的属性,只能给table标签使用.
- 外边距就是单元格和单元格之间的距离,我们称之为外边距.默认情况下单元格和单元格之间的外边距的距离是2px.
- 格式
```html
cellspacing="12px"
- 内边距就是单元格的边框和文字之间的间隙,我们称之为内边距.默认情况下,内边距是1.
- 格式
cellpadding="1"
- 注意:以上内容仅仅作为了解,以后再企业开发中所有控制样式的都是通过CSS.
细线表格
- 在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的,其实它是将2条线合并为了一条线,所以看上去很不舒服.
- 细线表格的制作方式:
- 给table标签设置bgcolor
- 给tr标签设置bgcolor
- 给table标签设置cellspacing = "1px"'
- 注意点:table标签和tr标签以及td标签都支持bgcolor属性,但是以上内容仅仅作为了解,因为样式都是以后通过CSS来控制.
- 格式:
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td bgcolor="red">1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
表格标签的其它标签
- 表格标签
- 在表格标签中提供了一个标签专门用来设置表格的标题,这个标签就叫做caption.只要将标题写在caption标签中,那么标题就会自动相对于表格的宽度居中.
- caption标签的注意点:
- caption一定要写在table标签中,否则无效.
- caption一定要紧跟在table标签后面.
- 标题单元格标签
- 在表格标签中提供了一个标签专门用来存储每一列的标题,这个标签叫做th标签,只要将当前列的标签存储在这个标签中就会自动居中+加粗文字
- 到此为止我们就发现,其实表格中有两种单元格,一种是td,一种是th.td是专门用来存储数据的,th是专门用来存储当前列的标题的.
- 例子:
<table bgcolor="black" cellspacing="1px" width="800px" align="center">
<caption>
<h2>今日小说排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td align="left">暴走大事件</td>
<td>
<img src="images/up.jpg">
</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
表格的结构
- 由于表格中存储的数据比较复杂,为了方便管理和阅读以及提升语义,我们可以对表格红存储的数据进行分类.
表格中的数据可以分为4类:- 表格的标题
- 表格的表头信息
- 表格的主体信息
- 表格的页尾信息
- 表格的完整结构
- 例子:
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
- caption作用:指定表格的标题
- thead作用: 指定表格的表头信息
- tbody作用: 指定表格的主体信息
- tfoot作用: 指定表格的附加信息
- 注意点:
- 如果我们没有编写tbody, 系统会自动给我们添加tbody
- 如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化
单元格合并
- 水平方向上的单元格合并:
可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)- 例如:
<td colspan="2"></td>
- 含义: 把当前单元格当做两个单元格来看待
- 垂直方向上的单元格合并:
可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)- 例如:
<td rowspan="2"></td>
- 含义: 把当前单元格当做两个单元格来看待
- 注意点:
- 由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
- 一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并
快捷键的使用:
- 快速移动选中的代码, 上下移动
往上移动 Ctrl + shift + ↑(方向键上)
往下移动 Ctrl + shift + ↓(方向键下) - 快速合并和展开代码(合并和展开的是某一个标签)
合并: Ctrl + -
展开: Ctrl + + - 快速合并和展开代码(合并和展开选中的所有标签)
合并: Ctrl + shift + -
展开: Ctrl + shift + + - 快速新启一行
shift + enter
表单标签
表单标签
- 什么是表单?
- 表单就是专门用来收集用户信息的
- 什么是表单元素?
- 什么是元素? 在HTML中,标签/标记/元素都是指HTML中的标签,例如:a标签/a标记/a元素
- 表单元素其实还是HTML中的一些标签,只不过这些标签比较特殊,在浏览器中所有的表单标签都有特殊的外观和默认的功能.
- 表单的格式:
<form>
<表单元素>
</form>
```
- 常见的表单元素:
- input标签:input标签有一个type属性,这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观不同.
- 注意点:
- 表单元素一定要写在表单中.
- remember:
<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>
- 定义普通按钮:可以通过value属性来给按钮指定标题
- 作用:配合JS完成一些操作
<input type="button" value="我是按钮">
```
- 定义图片按钮:
- 作用:配合JS完成一些操作
<input type="image" src="images/register.jpg">
```
- 定义重置按钮:
- 作用:用来清空表单中已经填写好的数据
- 注意点:如果想修改重置按钮默认的按钮标题可以通过value属性来修改.
<input type="reset" value="清空">
```
- 定义提交按钮:
- 作用:将表单中已经填写好的数据提交到远程服务器.
- 注意点:要想把表单中填写好的数据提交到远程服务器,必须具备两个条件
- 需要给form表单添加一个action的属性,通过这个action属性指定需要提交到的服务器地址
- 需要给需要提交到服务器的表单元素添加一个name属性
<input type="submit">
```
- 隐藏域
- 作用:配合提交按钮将一些数据默默的提交到服务器 Ajax
<input type="hidden" name="cc" value="kukuku">
```
Label标签
- 默认情况下文字和输入框是没有关联关系的,也就是点击文字输入框不会聚焦,如果想点击文字时让对应的输入框聚焦,那么就需要让蚊子和输入框进行绑定.
- 要想让输入框和文字绑定在一起,那么我们可以使用Label标签.
- 绑定的格式:
- 将文字利用label标签包裹起来
- 给输入框添加一个id属性
- 在label标签中通过for属性和输入框中的id进行绑定即可.
- 例子1:
<form action="">
<label for="account">账号:</label><input type="text" id="account"><br>
<label for="pwd">密码:</label><input type="password" id="pwd"><br>
</form>
- 例子2:
<label>
账号:<input type="text">
</label>
Datalist标签
- 例子:
请输入你的车型: <input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>
表单标签select以及textarea
- 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来指定输入框的宽度和高,但是虽然指定了列数和行数,但是还是可以无限往下输入.
- 默认情况下输入框是可以手动拉伸的
- 例子:
<textarea cols="20" rows="5">
</textarea>
- fieldset标签:可以给表单添加一个边框
- legend标签:可以给边框指定给一个标题.
- 例子:
<form>
<fieldset>
<legend>注册界面</legend>
</fieldset>
</form>
