前端进阶之路(一)HTML
1. HTML标签分类
- 双标签
<标签名>内容</标签名> - 单标签
<标签名 />
2. HTML标签关系
- 嵌套关系
- 并列关系
3. 字符集
<meta charset="UTF-8">
UTF-8包含全世界所有国家需要用到的字符
4. HTML标签
4.1 排版标签
4.1.1 标题标签
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
h1标签因为重要,尽量少用。
4.1.2 段落标签
<p>文本内容</p>
默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
4.1.3 水平线标签
<hr />
单标签
4.1.4 换行标签
<br />
单标签
4.1.5 div span标签
<div>文本</div>
<span>文本</span>
4.2 文本格式化标签
标签 | 显示效果 |
---|---|
<b></b>和<strong></strong> | 文字以粗体方式显示(XHTML推荐使用strong) |
<i></i>和<em></em> | 文字以斜体方式显示(XHTML推荐使用em) |
<s></s>和<del></del> | 文字以加 |
<u></u>和<ins></ins> | 文字以加下划线方式显示(XHTML推荐使用ins) |
4.3 标签属性
<标签名 属性1="属性值1" 属性2="属性值2"> 内容 </标签名>
采取键值对 key=“value” 的格式
4.4 图像标签
<img src="图像URL" />
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素(XHTML不支持%页面百分比) | 设置图像的宽度 |
height | 像素(XHTML不支持%页面百分比) | 设置图像的高度 |
border | 数字 | 设置图像边框的宽度 |
4.5 链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
target:用于指定链接页面的打开方式,其取值有 _self 和 _blank 两种,其中 _self 为,默认值,_blank 为在新窗口中打开方式
注意:
- 外部链接需要添加 http://www.baidu.com,链接地址必须以 http:// 开头
- 内部链接直接链接内部页面名称即可,比如
<a href="index.html"> 首页 </a>
- 如果当时没有确定链接目标时,通常将链接标签的属性值定义为"#",即href="#",表示该链接暂时为一个空链接
- 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接
4.5.1 锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。创建锚点链接分为两步:
- 使用
<a href="#id名">链接文本</a>
创建链接文本 - 使用相应的id名标注跳转目标的位置
4.5.2 base标签
- base 可以设置整体链接的打开状态
- 单标签,例
<base target="_blank" />
- 写在
<head> </head>
标签中
4.6 特殊字符标签
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
© | 版权 | © |
® | 注册商标 | ® |
4.7 注释标签
<!--注释-->
HTML注释快捷键:
- 单行注释:ctrl + /
- 多行注释: ctrl + shift + /
5. 路径
5.1 相对路径
- 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如
<img src="logo.gif" />
- 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用
/
隔开,如<img src="img/img01/logo.gif" />
- 图像文件位于HTML文件的上一级文件夹:在文件名之前加入
../
,如果是上两级,则需要使用../../
,以此类推,如<img src="../logo.gif" />
5.2 绝对路径
- “C:\Users\13035\Desktop\360VR”,或完整的网络地址,例如"https://avatar.csdnimg.cn/2/7/A/1_qq_43712409.jpg"
6. 列表标签
6.1 无序列表 ul
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
....
</ul>
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。<li>
与</li>
之间相当于一个容器,可以容纳所有元素。
6.2 有序列表 ol
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
....
</ol>
<ol></ol>
中只能嵌套<li></li>
,直接在<ol></ol>
标签中输入其他标签或者文字的做法是不被允许的。<li>
与</li>
之间相当于一个容器,可以容纳所有元素。
6.3 自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
7. 表格
7.1 创建表格
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<tr></tr>
中只能嵌套<td></td>
<td></td>
标签就像一个容器,可以容纳所有的元素
7.2 表格属性
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框(默认border="0" 无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2像素) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1像素) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
7.3 表头标签
表头一般位于表格的第一行或第一列,其文本加粗居中。
设置表头方法:用表头标记<th></th>
替代相应的单元格标记<td></td>
7.4 表格结构
<thead></thead>
:用于定义表格的头部<tbody></tbody>
:用于定义表格的主体
7.5 表格标题
caption元素定义表格标题
<table>
<caption>我是表格标题</caption>
</table>
caption标签必须紧随table标签之后,只能对每个表格定义一个标题,通常这个标题会被居中于表格之上。
7.6 合并单元格
- 跨行合并:rowspan
<td rowspan="2">合并后的单元格</td>
- 跨列合并:colspan
<td colspan="2">合并后的单元格</td>
8. 表单
在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
- 表单控件:
包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 - 提示信息:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。 - 表单域:
他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
8.1 input 控件
<input />
标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,<input />
标签还可以定义很多其他的属性,其常用属性如下表所示:
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
password | 密码输入框 | |
radio | 单选按钮 | |
checkbox | 复选框 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式的提交按钮 | |
file | 文件域 | |
name | 由用户自定义 | 控件的名称 |
value | 由用户自定义 | input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
如果是一组单选框,可以通过相同的name值来实现
8.2 label 标签
label 标签为 input 元素定义标注。
作用:用于绑定一个表单元素,当点击 label 标签的时候,被绑定的表单元素就会获得输入焦点。
for 属性规定 label 与哪个表单元素绑定。
<label>输入账号:<input type="text" /></label>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="Male" />
8.3 textarea 控件(文本域)
<textarea clos="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
8.4 下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<select></select>
中至少应包含一对<option></option>
。- 在 option 中定义 selected=“selected” 时,当前项即为默认选中项。
8.5 表单域
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
- action 在表单收集到信息后,需要将信息传递给服务器进行处理,action 属性用于指定接收并处理表单数据的服务器程序的 url 地址。
- method 用于设置表单数据的提交方式,其取值为 get 或 post 。(get 速度较快但是不安全,post 速度较慢但是相对来说较为安全)
- name 用于指定表单的名称,以区分同一个页面中的多个表单。
注意:每一个表单都应该有自己表单域。
9. HTML5 新标签
9.1 常用新标签
- header:定义文档的页眉 (头部)
- nav:定义导航链接的部分
- footer:定义文档或节的页脚 (底部)
- article:定义文章
- section:定义文档中的节(section、区段)
- aside:定义其所处内容之外的内容 (侧边)
- datalist:标签定义选项列表,与 input 元素配合使用该元素
<input type="text" placeholder="输入明星" list="star" />
<datalist id="star">
<option>杨超越</option>
<option>鞠婧祎</option>
<option>沈月</option>
<option>迪丽热巴</option>
</datalist>
- fieldset:fieldset 元素可将表单内的相关元素分组,打包,与 legend 搭配使用
<fieldset>
<legend>用户登录</legend>
用户名:<input type="text" /> <br />
密 码:<input type="password" />
</fieldset>
9.2 新增的 input type 属性值
类型 | 使用示例 | 含义 |
---|---|---|
<input type="email" /> | 输入邮箱格式 | |
tel | <input type="tel" /> | 输入手机号码格式 |
url | <input type="url" /> | 输入 url 格式 |
number | <input type="number" /> | 输入数字格式 |
search | <input type="search" /> | 搜索框 |
range | <input type="range" /> | 自由拖动滑块 |
time | <input type="time" /> | 小时:分钟 |
date | <input type="date" /> | 年/月/日 |
datetime | <input type="datetime" /> | 时间 |
month | <input type="month" /> | 年/月 |
week | <input type="week" /> | 年/周 |
9.3 常用新属性
属性 | 用法 | 含义 |
---|---|---|
placeholder | <input type="text" placeholder="请输入用户名" /> | 占位符提供可描述输入字段预期值的提示信息 |
autofocus | <input type="text" autofocus /> | 规定当页面加载时 input 元素应该自动获得焦点 |
multiple | <input type="file" multiple /> | 多文件上传 |
autocomplete | <input type="text" autocomplete="on" /> | 规定表单是否应该启用自动完成功能,有两个值,一个是 on,一个是 off,on 代表记录已经输入的值 |
required | <input type="text" required /> | 必填项,内容不能为空 |
accesskey | <input type="text" accesskey="s" /> | 规定激活(使元素获得焦点)元素的快捷键,采用 “alt + 字母” 的形式 |
autocomplete 需要和 name 配合使用
9.4 多媒体标签
9.4.1 多媒体 embed
<embed srd="http://" allowFullScreen="true" qua;ity="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
9.4.2 多媒体 audio
<audio src="../music/See You Again.mp3" autoplay="autoplay" controls loop="-1"></audio>
- loop="-1" 无线循环播放
为了浏览器兼容,我们需要做三种声音文件:ogg、mp3、wav
<audio controls autoplay>
<!--通过 source 标签指定多格式音频文件>
<source src="../music/See You Again.mp3">
<source src="../music/See You Again.wav">
<source src="../music/See You Again.ogg">
您的浏览器不支持HTML音频播放功能
</audio>
9.4.3 多媒体 video
<video src="mp4.mp4" autoplay controls width="500">
</video>
为了浏览器兼容,我们需要做三种视频文件:ogg、mp3、webM
<video src="mp4.mp4" autoplay controls>
<source src="video.mp4">
<source src="video.ogg">
<source src="video.webM">
您的浏览器不支持视频播放
</video>