基础与列表、表格
HTML 基本结构
HTML 文档的基本结构是由三个部分组成:文档类型声明、<head>标签和<body>标签。
<!DOCTYPE html>:位于 HTM 文档的第一行,告诉浏览器这是一个 HTML5 文件。
<htm1></html〉标签:是 HTML 文档的根标签,lang 属性表示文档的语言
<head></head〉标签:定义文档的头部信息。只有一些特定的标签才允许放在<head〉标签内,如〈title></title〉标题标签、〈meta〉参数标签、<scirpt></scirpt〉脚本标签、<1ink/〉链接样式表标签、<style></style〉样式标签。
<body></body>标签:用于定义 HTML 文档的正文内容,
HTML 网页中常见的标签:标题标签、段落标签等。
<body></body>等成对的标签,分别叫开放标签和闭合标签。单独呈现的标签(空标签)如<hr/>,意为用/来关闭空标签
网页基本标签
文档标题标签
<title>标签用于设置 HTML 文档的标题,标题会显示在浏览器的选项卡栏上。
文档参数标签
<meta〉标签用于设置网页的摘要信息,包括字符集编码、网页关键词、网页描述等。
内容标题标签
<h1></h1>~<h6></h6>标签用于设置文档标题。
段落标签
<p></p〉标签用于开始一个新的段落,当浏览器遇到〈p〉/p〉标签时,通常会在相邻的段落之间插入一些垂直的间距,这使得<p></p〉标签内的文本内容形成了一个独立的段落。
换行标签
<br/〉标签用于强制换行,它只是一个简单的换行符,不会在浏览器中创建额外的空间或边距。该标签已经被废弃,使用<p></p>标签代替。
水平标签
<hr/>标签用于展示一条水平线。
字体样式标签
<font></font〉标签用于设置字体样式、字体大小、字体颜色。该标签在 HTM5 中已经废弃。<b></b〉标签用于设置文本为粗体。该标签已经被废弃,使用<strong></strong〉标签代替。<sma11></sma11>标签用于设置小字体的描述、声明等文本。<u></u〉标签用于设置文本下划线。该标签已经被废弃,使用<ins></ins〉标签代替<i></i〉标签用于设置文本倾斜。该标签已经被废弃,使用<em></em〉标签代替<s>/s〉标签用于设置文本删除线。该标签已经被废弃,使用<de1>/de1>标签代替z
废弃标签
HTML,中以前存在一部分不是用来添加语义的标签(如<u>),而与我们 HTM 标签是用来添加语义的,这与我们的定义不相符,故会废弃一些标签
图像标签
<img/>标签用于加载图像。
<img/>标签的基本用法:
<img src="path" alt="text" title="text" width="x" height="y" />
<img/>标签的常见属性:
src:图像地址,支持本地图片和远程图片,
alt:图像的替换文本。
title:鼠标悬停时提示的文本。
width:图像宽度。
height:图像高度。
超链接标签
<a></a〉标签用于设置超链接。
超链接的应用场景有:
页面间链接:从A页面跳转到B页面。
锚链接:在A页面中从A区域跳转到B区域。
功能性链接:从A页面跳转到发送邮箱窗口。
基本用法
<a href="url" target= "target">text</a>
常见属性:
href:要跳转的链接地址。
target:目标窗口。
self:在当前窗口打开链接(默认值)。
blank:在新窗口打开链接。
parent:在父窗口打开链接
top:在顶层窗口打开链接。
行内元素和块元素
行内元素:左右都是行内元素的可以排在一行,如〈a>标签块元素:无论内容多少,该元素独占一行,如<h1>~<h6>标签。
HTML 注释
HTML 注释的基本用法:
<!-- 注释内容-->
列表
无序列表
<ul><ul>、<li></li〉标签用于定义无序列表。
无序列表的特点:
没有顺序,每个<li>标签独占一行。
默认<li></li>标签项前面有个实心小圆点。
有序列表
<ol></ol>、<li></li〉标签用于定义有序列表。
有序列表的特点:
有顺序,每个<li></li>标签独占一行。
默认<li>标签项前面有个顺序标记。
定义列表
<dl></dl>、<dt></dt>、<dd></dd〉标签用于定义定义列表。
·定义列表是标题及列表项的结合。
<dl></dl>标签作为列表的开始。
·<dt></dt>标签作为每个列表项的开始。
<dd></dd>标签作为每个列表项。
定义列表的特点:
没有顺序,每个<dt></dt>、<dd></dd〉标签独占一行。
默认没有标记。
表格
表格基本结构
表格由单元格、行、列组成。
表格使用规范
定义一个表格的规范步骤:
使用<table></table>标签定义表格。
使用<thead></thead>标签定义表头。
使用<tr></tr〉标签在<thead></thead〉标签中定义表头的第一行,可以有多行。
使用<th></th〉标签在<thead><tr></tr>/thead〉标签中定义表头的单元格。
使用<tbody></tbody〉标签定义表格内容主体。
使用<tr></tr〉标签在<tbody></tbody〉标签中定义表格内容的第一行,可以有多行。
使用<td></td〉标签在<tbody><tr></tr></tbody〉标签中定义表格内容的单元格。
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
表格标签的常用属性
属性 描述
border 设置 table 表格边框
align 设置内容的对齐方式,可以让表格在网页内居中,也可以让表格内容在单元格居中。left 左对齐/right右对齐/center 居中对齐。
color 设置内容颜色。
width 设置内容宽度。
height 设置内容高度
表格跨列
指定这一格横向跨2列
<td colspan="2">学生列表</td>
表格跨行
表格跨行是指单元格的纵向合并。
表格跨列
指定这一格纵向跨2行
<td rowspan="2">张三</td>
媒体元素与表单
媒体元素
视频元素
<video></video>标签用于加载视频
基本用法:
<video src="url"></video>
常见属性
属性 描述
src 视频的路径。
controls 向用户显示视频播放控件。
autoplay 视频就绪后立即播放。
1oop 循环播放视频。
preload 视频在页面加载时加载,并预备播放。
muted 静音播放。
width 播放器宽度。
height 播放器高度。
虽然在<video></video〉标签中加上 autoplay 属性,但在浏览器中,视频还是无法自动播放。有些浏览器禁止自动播放带有声音的音视频。如果要实现自动播放,可以将视频静音。
音频元素
<audio></audio>标签用于加载音频。
<audio></audio〉标签的基本用法:
<audio src="url"></audio>
<audio></audio>的常见属性:
属性 描述
src 音频的路径。
controls 向用户显示音频播放控件
autoplay 音频就绪后立即播放
loop 循环播放音频。
preload 音频在页面加载时加载,并预备播放。
muted 静音播放。
width 播放器宽度。
height 播放器高度。
结构标签
一个页面大体可以由三部分组成:页面头部、页面主体、页面底部。
在制作网页时,必须先划分结构,再编写内容。HTML, 中具有语义化的结构标签:
<header></header>标签:定义页面头部。
<footer></footer〉标签:定义页面底部。
<main></main〉标签:定义文档的主要内容,在整个 HTML 文档中只能出现一次。
<section></section〉标签:定义页面中的某一个独立区域。
<article></article〉标签:定义独立的文章内容。
<aside></aside〉标签:定义相关内容或应用,常用于侧边栏。
<nav></nav>标签:定义导航类辅助内容。
iframe标签
解释:
<iframe></iframe>标签用于内联网页
<iframe></iframe〉 标签的基本用法:
<iframe src="url"></iframe>
常见属性:
属性 描述
name 内联框架的名称
src 支持远程链接和本地文件,内联网页的地址,
width 主内联框架的宽度。
height 内联框架的高度。
frameborder 删除内联框架的边框。该属性已经被废弃,
iframe 存在的问题:
iframe 需要加载嵌入的网页,因此会增加整体页面的加载时间。
·对搜索引擎不友好,搜索引擎通常会忽略 iframe 中的内容。
恶意网站可以通过 iframe 来进行钓鱼、点击劫持等攻击,从而危害用户的隐私和安全。
不同浏览器对 iframe 的支持程度不同。
有些网站禁止被 iframe,如百度。
表单
表单用法
基本用法:
<form method="xx" action="url">
<!--->
</form>
常见属性:
属性 描述
method 表单请求方式,GET(默认)/POST
action 表单请求地址。
enctype 表单数据提交到服务器时应如何编码。application/x-www-form-urlencoded:默认编码。
multipart/form-data:文件上传编码
input标签
解释
表单元素 input标签用于定义输入字段,用户可以在其中输入数据通常情况下,<input/>标签会使用<labe1></labe1>标签为元素定义标签<input/> 标签的基本用法:
label for="id">xxx:</label>
<input type="xxx” name="xxx" id="xxx" value="xxx"/>
常见属性
属性 描述
type 表单元素的类型。
name 表单元素的名称。
id 表单元素的 id。
value 表单元素的初始值
maxlength type为text 或password 时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否是被选中。
readonly 表单元素只读。
disabled 禁用表单元素。
required 表单元素必填。
placeholder 表单元素的提示信息。
标签常见类型:
类型 描述
text(默认值) 普通文本输入框。
password 密码框。
radio 单选框。
checkbox 多选框。
button 普通按钮。
submit 提交表单请求按钮
reset 重置表单内容按钮。
file 文件上传选择按钮
email 邮箱输入框。
url 网址输入框。
number 数字输入框。
range 滑块。
search 搜索框
hidden 隐藏表单域。
表单元素 textarea:
<textarea></textarea>标签用于定义多行文本框。
<textarea></textarea>标签的基本用法:
<textarea id="xxx" name="xxx" rows="5" cols="50">
XXX
</textarea>
<textarea></textarea>标签的常见属性:
属性 描述
cols 多行文本框可见宽度
rows 多行文本框可见行数
表单元素 select 和 option
<select></select〉标签用于创建下拉框,<option></option〉标签用于创建下拉框中的每一个选项。
<select></select〉标签和<option></option〉标签的基本用法:
<select name="cars" id="cars">
<option value="xxx">xxx</option)
</select>
常见属性:
属性 描述
value 选项的值。
selected 选项默认被选中。
表单元素 button
<button></button〉标签用于创建按钮。
在<button>、button〉元素内部,可以放置文本、图像、图标等标签,这是用<input/〉元素创建的按钮所不能做到的。
<button></button〉标签的基本用法:
<button type="xxx">xxx</button)
<button></button〉标签的常见属性:
属性 描述
type :按钮类型。
button:普通按钮。
submit:表单提交按钮(默认)。
reset:重置表单按钮。
表单初级验证
表单验证的好处:
减轻服务器的压力。
保证数据的可行性和安全性。
实现表单初级验证:
可以使用 placeholder 描述表单元素期待用户输入何种内容。
设置表单元素的类型,限定输入的数据类型。
使用 pattern 进行正则表达式校验。