20220709_第七小组_张红睿_学习笔记

基本标签

<b>加粗</b>
<code>强调文本</code>
<i>斜体</i>
<kbd>键盘输入</kbd>
<pre>预格式</pre>
<small>更小的字体</small>
<strong>加粗、语音强调</strong>
<br/>换行
<hr/>水平线

不常用标签

<abbr>缩写</abbr>
<address>地址</address>
<bdo>文字方向</bdo>
<cite>工作</cite>
<sub>下标文本</sub>
<sup>商标文本</sup>
<ins>插入文本</ins>
<del>删除文本

超文本链接

href：目标链接
target：目标。
_blank:新窗口打开
_parent:在父容器打开
_self:在当前窗口打开（默认）
_top:在顶级父容器打开
title：标题，当鼠标悬停在标签上时显示
普通链接、图片链接、邮箱、锚记链接
<a href="http/www.baidu.com">百度</a>
<a href="http://www.baidu.com"><img src=""/></a>
<a href="mailto:123456789@qq.com">站长信箱</a>
<a href="#tips">锚记链接</a> <a id="tips"></a>

图片

<img src="图片路径" alt="图片未正常显示显示的内容" title="标题" />
<marquee loop="1">弹幕</marquee>

区块、空白

div：块。立方体、可以有宽高
span：行。无宽高、尺寸由内容确定

列表

无序列表：
<ul type="circle/disc">
    <li></li>
</ul>
ul*?>li*?
有序列表：
<ol>
    <li></li>
</ol>
ol*?>li*?
自定义列表：
<dl>
    <dt>项目1</dt>
    <dd>描述项目</dd>
    <dt>项目2</dt>
    <dd>描述项目</dd>
</dl>

表格

<table>
    <tr>
        <td></td>
    </tr>
</table>
快速生成表格：
table>tr*?>td*?

可用属性：
cellspacing="integer": 单元格间距
cellpadding="integer": 单元格边距
rowspan="integer": 跨行单元格
colspan="integer": 跨列单元格
不推荐属性：
border="integer"
align="center/left/right"

表格标签：
table: 表格
th: 表头
tr: 行
td: 列
caption: 标题
colgroup: 表格列的组
col: 表格列的属性
thead: 页眉
tbody: 主体
tfoot: 页脚

转义字符

&cmp: “&”符号 &lt: 小于号 &gt: 大于号 &nbsp: 空格
&copy: 版权号

表单

标签	描述
form	定义用户输入表单
input	定义文本域
textarea	定义文本域（一个多行的输入控件）
label	定义input元素的标签，一般为输入标题
fieldset	定义一组相关的表单元素，并使用外框包含起来
legend	定义了fieldset元素的标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个按钮
datalist	指定一个预先定义的输入控件选项按钮
keygen	定义了表单的密钥对生成器手段
output	定义一个计算结果

input的type属性值

属性值	解释
button	按钮
checkbox	多选框
color	颜色版
date	日期（有日历）
datetime	日期+时间（无日历）
datetime-local	日期+时间（有日历和时间表）
email	邮件
file	上传文件
hidden	隐藏输入框（什么也不显示）
image	创建图形提交按钮
month	年月（无日）
number	只能输入数值（min~max）
password	密码
radio	圆圈
range	类似于进度条
reset	重置
search	搜索框
submit	提交
tel	电话号码
text	纯文本框
time	时间表
url	地址链接
week	周表

form的method属性

值	描述
get	默认，将表单数据以名称/值对的形式附加到url中；URL?name=value&name=value
post	以HTTP post事务的形式发送表单数据。

html5新增标签(部分)

footer:网页的尾
header:网页的头
nav:导航栏
aside:侧边栏
time:定义日期和时间

标签分类

行级标签
特点：可以和其他元素保持在同一行，不可以自动换行，但不能设置宽高
常见的行级标签：a，span，strong，u（下划线），em(强调)，i(斜体)，sub(下标),sup(上标)

块级标签
特点：不可以和其他元素保持在同一行（独占一行），可以自动换行，能设置宽高
常见的块级标签：div，p，h1-h6，ul，li，dl（定义列表，跟ul…li类似），dt（定义了定义列表中的项目），dd（定义描述项目的内容，跟dt一起搭配）

行内块级标签
特点：可以和其他元素保持在在一行，还能能设置宽高
常见标签：textarea，input，img，button

总结
这些标签很多，这里列举的是一部分，更多的标签需要不断练习才能记得牢。
所谓的行级标签，块级标签，其实可以根据需要，在开发中通过css样式互相转换。即通过设置displiay属性，它的属性值中，inline（元素以行内标签进行展示），block（元素以块级标签进行展示），inline-block（元素以行内块级标签进行展示）