HTML基础

HTML基础

1. web标准的构成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素外观及页面样式
行为	JavaScript	网页模型定义与页面交互

2. HTML标签：嵌套关系和并列关系

2. 1.标题标签

<h1>1级标签</h1>

6级标签

从1级到6级，重要程度逐级递减（文字逐级减小）

特点：

文字加粗、字体变大、独占一行

2. 2. 段落标签

<p>段落文字</p>

段落文字

特点：

段落间有间隙、独占一行（此处与span对应）

2. 3. 换行标签

内容<br>

内容

特点：

单标签、强制换行（不支持首行缩进）

2. 4. 水平分割线标签

主题分割<hr>

特点：

单标签、显示水平分界线

2. 5. 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字

2. 6. 媒体标签

2. 6. 1. 图片标签

<img src=”代表图片路径” alt=”图片加载失败” title=”提示文本”>

属性：

1. 标签属性可以写在开始标签内部
2. 标签可多属性并存
3. 属性间以空格隔开
4. 属性无先后之分

特点：

• 单标签、可用单独的标签属性进行设置
• src为其标签属性（./ 代表文件在当前文件下<相对路径>，这里使用网页路径也可以）
• 为替换文本标签（只有图片加载失败才显示文本）
• 为提示文本属性（鼠标放置时显示文本，此标签 也可使用于其他媒体标签）
• width 和 height 属性（只设置一个会等比缩放）
  
  

2. 6. 2. 音乐标签

<audio src=”文件” controls></audio>

此表适用于音频和视频（但是谷歌浏览器自动播放视频 需配合muted进行静音播放）

属性名	功能
src	音频的路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放

2. 6. 3. 视频标签

<video src=”文件” controls></video>

提示：

• 相对路径：从当前位置开始（可以是网页）
• 同级目录：同一文件夹中（“./文件” 或者 “文件”）
• 下级目录：（“文件夹/文件”）
• 上级目录：（“…/文件夹/文件”）
  
  

2. 7. 链接标签

<a href=”./目标.html”>超链接提示文本</a>

超链接提示文本
（目标为 #，跳转空链接。目标可以为网址和相对路径）

特点：双标签、可设置属性

值	效果
_self	默认值，跳转网页覆盖原网页
_blank	开启新标签页跳转

2. 8. 列表标签

分为无序列表、有序列表和自定义列表

2. 8. 1. 无序列表

标签名	说明
ul	表示无序列表，用于包含li标签
li	表示无序列表的每一项，用于包含每一行的内容
注：li可包含任何内容，但uf（of）只能包含li标签,且列表每一项前都有“·”标识

<ul>
    <li>Saber</li>
    <li>Archer</li>
</ul>

• Saber
• Archer

2. 8. 2. 有序列表

标签名	说明
ol	表示有序列表整体，用于包含li标签
li	表示有序列表的每一项，用于包含每一行的内容
注：列表每一项前都有序号“1.”标识

<ol>
    <li>Saber</li>
    <li>Archer</li>
</ol>

1. Saber
2. Archer

2. 8. 3. 自定义列表

标签名	说明
dl	表示自定义列表整体，包含dt/dd标签
dt	自定义列表主题
dd	自定义列表每一项主题对应的内容
注：dd前会默认显示缩进效果。dt/dd可包含任何内容，但dl只能包含dd/dt标签

<dl>
    <dt><strong>帮助中心</strong></dt>
    <dd>账户管理</dd>
    <dd>问题反馈</dd>
</dl>

帮助中心

账户管理

问题反馈

2. 9. 表格标签

基本标签

标签名	说明
table	表格整体，用于包含多个tr
tr	表格每行用于包含td
td	表格单元格，用于包含内容

_{注：标签嵌套关系：table>tr>td}

相关属性

属性名	属性值	作用
border	数字类型	边框宽度
width	数字类型	表格宽度
height	数字类型	表格高度
注：实际开发样式效果更常用css设置

<table border="1" width="200" height="50">
    <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>排名</th>
    </tr>
    <tr>
        <th>永</th>
        <th>101</th>
        <th>1</th>
    </tr>
    <tr>
        <th>王</th>
        <th>100</th>
        <th>2</th>
    </tr>
</table>

姓名	成绩	排名
永	101	1
王	100	2

表格标题和表头单元格标签

标签名	名称	说明
caption	表格标题	默认顶部居中显示
th	表头单元格	常用于表格第一行，默认加粗居中

_{注：caption标签在table标签内部。th标签用于tr内部}

表格结构标签

标签名	名称
thead	表格头
tbody	表格主体
tfoot	表格尾

_{注：表格结构标签内部用于包含tr标签。表格结构标签可以省略，但加上可方便用CSS进行美化}

合并单元格

标签名	属性值	说明
rowspan	单元格数	跨行合并：垂直合并
colspan	单元格数	跨列合并：水平合并
注：只有同一个同一结构标签才可合并

<table border="1" width="" height="">
    <thead>
        <caption>优秀学生信息表</caption>
    </thead>
    <tbody>
        <tr>
            <td>年级</td>
            <td>学号</td>
            <td>成绩</td>
            <td>班级</td>
        </tr>
        <tr>
            <td rowspan="2">高一</td>
            <td>张</td>
            <td>110</td>
            <td>三年一班</td>
        </tr>
        <tr>
            <td>赵</td>
            <td>120</td>
            <td>三年二班</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>评语</td>
            <td colspan="3">难</td>
        </tr>
    </tfoot>
</table>

优秀学生信息表

年级	学号	成绩	班级
高一	张	110	三年一班
	赵	120	三年二班
评语	还是太难了

2. 10. 表单标签

登录、注册和搜索框架

input系列标签：

type属性值	说明
text	文本框，输入文本
password	密码框，输入密码
radio	单选框，多选一
checkbox	多选框，多选多
file	文本选择，上传文件
submit	提交按钮，确认提交
reset	重置按钮，用于重置
button	普通按钮，默认无功能

输入文本框常用属性：

属性名	说明
placeholder	占位符，提示用户输入内容文本

选框常用属性：

属性名	说明
multiple	多文件选择

功能按钮常用属性：_{可以用input和button作为标签}

属性名	说明
submit	提交按钮，将数据保存至后端
reset	重置按钮
button	普通按钮，配合js产生功能

_{注：如果需要实现上述按钮功能，需要配合from标签，用from标签把表单标签包裹起来}

2. 11. button标签

基本与input标签一致

_{注：谷歌浏览器中button按钮默认为提交按钮，button标签是双标签，更便于包裹其他内容、文字和图片等}

2. 12. select下拉菜单标签

• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项

_{常见属性:}

• selected：下拉菜单的默认选中

2. 13. textarea文本域标签：_{作为多行文字输入方式}

常见属性：

• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数
  _{注：右下角拖拽改变大小、实际开发使用CSS设置}

2. 14. label标签：

1. 使用方法：
   <1> 用label标签把内容包裹起来
   <2> 表单标签上添加id属性
   <3> 在label标签的for属性设置对应id属性值

性别：<input type="radio" name="gender" checked id="1"><label for="" id="1">男</label>

2. 使用方法:
   <1> 直接使用label标签把内容和表单一起包裹
   <2> 需要把label标签for属性删除

 <label><input type="radio" name="gender"></label>女<br>

性别：男女

2. 15. 语义化标签

包含 没有语义布局标签（div、span）和 有语义的布局标签

2. 15. 1. 没有语义的标签：

• div标签：独占一行显示

<div>这是div</div><div>的标签格式</div>

这是div

的标签格式

• span标签：不分行显示

<span>这是span</span><span>的标签格式</span>

这是span的标签格式

2. 15. 2. 有语义的布局标签：

_{HTML5（手机端网页）中推出的}

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

_{注：以上标签显示特点和div一致，但相比div多了不同的语义}

2. 16. 字符实体

2. 16. 1. 字符实体

• 解决问题：防止多个空格或回车被折叠

2. 16. 2. 常用字符实体

• 结构：&英文;
• 常见字符实体：

显示结果	描述	实体名
	空格	 
<	小于	&lt;
>	大于	&gt;
&	和	&amp;
"	引号	&quot;
’	撇号	apos;（IE浏览器不支持）
¢	分	cent;
£	磅	&pound;
¥	元	&yen;
€	欧元	&euro;
§	小节	sect;
©	版权	copy;