HTML 总结

简介： HTML 总结

img标签

1. img标签中的img其实是英文image的缩写
   所以img标签的作用, 就是告诉浏览器我们需要显示一张图片
   
2. img标签格式: <img src="">
   其实img标签中的src是英文source的缩写
   所以img标签中的src就是用来告诉img标签, 需要显示的图片的路径，其中包含绝对路径和相对路径
   
3. 通过相对路径赋值
   1.1 同级
   同级就是"图片"和".html文件"存储在同一个文件夹中
   格式: src="QRCode.jpg"
   含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
   相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径
   1.2下级
   下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中
   格式: src="images/QRCode.jpg"
   1.3上级
   上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
   格式: src="../QRCode.jpg"
   
4. 通过绝对路径赋值(了解)
   绝对路径就是每次都从指定的盘符开始查找
   格式:src="F:\Web_Study\从零玩转HTML5+CSS3精讲①\H5+C3上\01-HTML部分\代码\images\QRCode.jpg"
   [注意]:
   1.路径中不要出现中文, 否则可能出现未知问题
   2.如果是通过"相对路径"来指定图片, 不能跨盘符
   2.1例如.html文件在C盘, 那么不能去查找D盘图片
   
5. img中的其它属性
   width: 宽度
   height: 高度
   所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高
   如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示
   如果img标签指定的宽高, 那么系统会按照指定的宽高来显示
   title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容
   alt:其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容
   注意点
   
6. 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行，属于行内元素;
   
7. 如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可
   
8. 只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形
   

br标签

1. 由于HTML的作用就是用来给文本添加语义, 而br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签

a标签

a标签的格式: <a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>

a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转

_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self

_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转

a标签中还有一个属性, 叫做title. a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的.

注意点:

1.a标签不仅可以让文字可以点击, 还可以让图片也能够被点击

2.一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方

3.如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://

4.a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址

base标签

base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开

<base target="_blank">

注意点:

1.base标签必须写在head标签的开始标签和结束标签之间

2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行

假链接

1.什么是假链接?

就是点击之后不会跳转的链接我们称之为假链接

2.假链接存在的意义:

在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接替换为真链接

3.假链接的格式:# 和 javascript:

4.两者之间的区别:

"#"的假链接会自动回到网页的顶部, 而javascript:的假链接不会自动回到网页顶部

锚点

1. 要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的
   份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2. 所以要想实现通过a标签跳转到指定的位置分为两步
   2.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
   2.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>

列表标签

1. 什么是列表标签?
   列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
2. HTML中列表标签的分类
   2.1无序列表(最多)(unordered list)
   2.2有序列表(最少)(ordered list)
   2.3定义列表(其次)(definition list)

注意点:

1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的

1. ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
2. 由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签
   总结:
   1.一定更要记住ul标签中最好只放li标签
   2.但是li标签中还可以继续放其它的标签
   3.ul中有li, li中又可以有ul

定义列表的格式:

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

其实dt和dd都是英文的缩写

dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题

dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的

3. 定义列表的应用场景

1. 做网站尾部的相关信息
2. 做图文混排
   推荐使用一个dt对应一个dd,和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

表格table

1. 宽度和高度的属性,可以给table标签和td标签使用
   1.1表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
   1.2如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度
2. 水平对齐和垂直对齐的属性
   其中水平对齐可以给table标签和tr标签和td标签使用
   垂直对齐只能给tr标签和td标签使用
   2.1给table标签设置align属性, 可以控制表格在水平方向的对齐方式
   2.2给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
   2.3给td标签设置align属性, 可以控制当前单元格中内容在说方向的对齐方式

注意点:

如果td中设置了align属性,tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

2.4 给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式

2.5 给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式

注意点:

如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

1. 外边距和内边距的属性
   只能给table标签使用
   3.1.外边距就是单元格和单元格之间的距离, 我们称之为外边距
   默认情况下单元格和单元格之间的外边距的距离是2px
   3.2 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
   默认情况下内边距是1
   注意: 在企业开发中所有控制样式的都是通过CSS

细线表格

在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服

细线表格的制作方式:

1.给table标签设置bgcolor

2.给tr标签设置bgcolor

3.给table标签设置cellspacing = "1px"

<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>

注意点:

table标签和tr标签以及td标签都支持bgcolor属性

1. 表格标题
   在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
2. caption标签的注意点:
   2.1caption一定要写在table标签中, 否则无效
   2.2caption一定要紧跟在table标签后面
3. 标题单元格标签
   3.1.在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
   3.2.到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的,th是专门用来存储当前列的标题的
   caption作用: 指定表格的标题
   thead作用: 指定表格的表头信息
   tbody作用: 指定表格的主体信息
   tfoot作用: 指定表格的附加信息

<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>
    <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>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/down.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/down.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </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>
    <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>
    <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>

效果如下

image.png

3. 注意点:

3.1.如果我们没有编写tbody, 系统会系统给我们添加tbody

3.2.如果指定了thead和tfoot, 那么在修改整个表格的高度时,thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化

单元格合并

1. 水平方向上的单元格合并
   可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
   <td colspan="2"></td>
   注意点:
2. 由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
3. 一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并
4. 垂直方向上的单元格合并
   可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
   例如:<td rowspan="2"></td>
   含义: 把当前单元格当做两个单元格来看待

表单

1. 常见的表单元素
   input标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同
   1.1 单选框
   注意点: 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="text" name="aa"><br>
   <!--暗文输入框-->
   密码:<input type="password" name="bb"><br>
   定义一个普通按钮
   作用:配合JS完成一些操作
   <input type="button" value="我是按钮" onclick="alert('lnj')">
   定义一个图片按钮
   作用:配合JS完成一些操作
   <input type="image" src="images/register.jpg" onclick="alert('lnj')">
   定义重置按钮
   作用:清空表单中的数据
   注意点:
   重置按钮有默认的按钮标题, 默认叫做 重置
   也可以通过`value`属性来修改默认标题
   <input type="reset" value="清空">
   定义提交按钮
   作用:将表单中的数据提交到远程服务器
   注意点:
   要想把表单中的数据提交到远程服务器,必须满足两个条件
   1.告诉表单需要提交到哪个服务器
   可以通过`form`标签的`action`属性来告诉表单,需要提交到那个服务器
   2.告诉表单,表单中的哪些数据需要提交
   `<input type="submit">`
   隐藏域
   作用: 用于悄悄咪咪的收集用户的一些数据, 隐藏域是不会出现在界面中的
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签
3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
`  <label for="account">账号:</label><input type="text" id="account">`
1.datalist标签
作用: 给输入框绑定待选项
2.datalist格式:
<datalist>
   <option>待选项内容</option>
</datalist>

datalist比select更高级

之前使用'select制作下拉菜单，但是H5之后，datalist也可以充当select的角色，而且两者还有一点小的不同。

1.datalist标签

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

对于select来说，select的下拉菜单是供用户选择的，用户只能选择其中的选项不能自己添加。

但是datalist就不同了，datalist不仅可以供用户选择，用户还可以自己输入，而且datalist还可以达到模糊匹配的效果，使用很方便。

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

1.搞一个输入框

2.搞一个datalist列表

3.给datalist列表标签添加一个id

4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可