HTML基础笔记
文章目录
一、HTML介绍
<1>Hyper Test Markup Language(超文本标记语言)
<2>世界知名浏览器都支持HTML5
<3>根据W3C（World Wide Web Consortium万维网联盟——成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准
[W3c网址]: https://www.w3.org)
机构）制定的标准进行编程
(1）W3C标准包括：
二、HTML基本结构
<1>网页分为两部分：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<2>标签结构
<body>
</body>
<hr/>
三、网页基本信息
<1>注释
<!--需要注释的内容-->
<2>描述性标签，用来描述网站的一些信息
<meta charset="UTF-8">
<meta name="keywords" content="关键词">
<meta name="description" content="对关键词的解释">
四、网页标签
<1>标题标签
<h1>
一级标签
</h1>
<h2>
二级标签
</h2>
<h3>
三级标签
</h3>
<h4>
四级标签
</h4>
<h5>
五级标签
</h5>
<h6>
六级标签
</h6>
<2>段落标签
<p>
文本内容
</p>
<3>换行标签
文本内容<br/>
<4>水平线标签
<hr/>
<5>字体样式标签
(1)加粗
<b>文本内容</b>
(2)放大
<big>文本内容</big>
(3)缩小
<small>文本内容</small>
(4)着重文字
<em>文本内容</em>
(5)斜体
<i>文本内容</i>
(6)加重语气
<strong>文本内容</strong>
(7)删除文本
<del>文本内容</del>
<6>特殊符号
©
&ct;
>
"
[特殊字符]:https://www.w3school.com.cn/html/html_symbols.asp)
五、图片标签
<1>常见图像格式
<2>图片标签格式
<img src="path" alt="text" title="text" width="x" height="y"/>
<!--（必填属性）src表示图像地址-->
<!--（必填属性）alt表示图像的替代文字（当图片丢失时会显示）-->
<!--title表示鼠标悬停提示文字-->
<!--width表示图像宽度，height表示图像高度-->
<3>图片地址
<img src="C:\文件\图片\1.jpg" alt="图片1"/>
<img src="../图片/1.jpg" alt="图片1"/>
<!--../表示上一级目录-->
六、超链接标签
<a href="path" target="目标窗口位置">链接的文本或图像</a>
<!--（必填属性）href表示链接路径-->
<!--target链接在哪个窗口打开,常用值_self（在此标签页 中打开）、_blank（在一个新标签中打开）-->
<!---->
<1>文本超链接
<a herf="path" >文本</a>
例：<a herf="https://www.baidu.com">点击此处前往百度</a>
<2>图片超链接
<a herf="path"><img src="path" alt="text"/></a>
例:<a herf="https://www.baidu.com"><img src="../图片/1.jpg" alt="图片1"/></a>
<3>锚标签
<a name="定义一个名字用于链接">文本内容</a>
<a herf="#定义的名字" >文本内容</a>
例:<a name="top">顶部</a> <!--网页顶部-->
<!--网页中间内容-->
<a herf="#top">回到顶部</a> <!--网页尾部-->
<4>功能性链接
<a herf="mailto:邮箱">文本内容</a>
六、行内元素和块元素
<1> 块元素
<2>行内元素
七、列表标签
<1>列表的定义：列表就是信息资源的一种表现形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应信息
<2>列表的分类：
(1)无序列表
<ul>
<li>内容</li>
<li>内容</li>
</ul>
<ul type="disc/square/circle">
<li>文本内容</li>
</ul>
<!--disc表示文本内容前加小圆点-->
<!--square表示文本内容前加实心方块-->
<!--circle表示文本内容前加空心圆-->
(2)有序列表
<ol>
<li>内容</li>
<li>内容</li>
</ol>
(3)定义列表
<dl>
<dt>列表名称</dt>
<dd>列表内容</dd>
</dl>
八、表格标签
<table>
<tr> <!--行标签-->
<td></td> <!--列标签-->
<td></td>
</tr>
</table>
<1>table标签属性
<table border="线条宽度px" cellspacing="值" cellpadding="值">
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--border表示给表格增加线条-->
<!--cellspacing表示外边框的值-->
<!--ellpadding表示内边框得值-->
例：<table border="1px" cellspacing="100" cellpadding="100">
<tr>
<td></td>
<td></td>
</tr>
</table>
<2>tr标签属性
<table>
<tr align="对齐方式" bgcolor="颜色" >
<td></td>
<td></td>
</tr>
</table>
<!--align表示将文本对齐（左对齐、右对齐、居中对齐）-->
<!--bgcolor表示定义表格背景颜色-->
例:<table>
<tr align="center" bgcolor="#FF0004">
<td></td>
<td></td>
</tr>
</table>
<3>td标签属性
<table>
<tr>
<td colspan="合并个数">文本内容</td>
</tr>
</table>
<!--colspan表格横向合并-->
例：<table>
<tr>
<td colspan="4">文本内容</td>
</tr>
</table>
<table>
<tr>
<td rowspan="合并个数">文本内容</td>
</tr>
</table>
<!--rowspan表格纵向合并->
例：<table>
<tr>
<td rowspan="4">文本内容</td>
</tr>
</table>
<table>
<tr>
<td valign="对齐方式">文本内容</td>
</tr>
</table>
例：<table>
<tr>
<td valign="center">文本内容</td>
</tr>
</table>
<4>表格标题标签
<caption>标题</caption>
九、媒体元素
<1>视频
<video src="视频路径" controls autoplay></video>
<!--controls添加控制条-->
<!--autoplay自动播放-->
例：<video src="../视频/1.mp4" controls autoplay></video>
<2>音频
<audio src="音频路径" controls autoplay></video>
<!--controls添加控制条-->
<!--autoplay自动播放-->
例：<audio src="../音频/1.mp3" controls autoplay></video>
十、页面结构
<1>header标签:标题头部区域的内容
<header></header>
<2>footer标签:标题脚部区域的内容
<footer></footer>
<3>section标签:Web页面中的一块独立区域
<sectio></sectio>
<4>article标签:独立的文章内容
<article></article>
<5>aside标签:相关内容或应用
<aside></aside>
<6>nav标签:导航类辅助内容
<nav></nav>
十一、iframe内联框架
<1>定义内联的子窗口（框架）
<iframe src="URL" frameborder="0" width="值" height="值"></iframe>
<!--URL指向隔离页面的位置-->
<!--frameborder规定是否显示iframe周围的边框,设置属性值为 "0" 就可以移除边框-->
<2> 使用iframe作为连接目标
<iframe src="URL" frameborder="0" name="content"</iframe>
<a herf="当前页网址" target="content">点击跳转</a>
<!--iframe可用作链接的目标（target）链接的target属性必须引用iframe的name属性-->
十二、表单
<1>表单用于搜集不同类型的用户输入
<form method="get/post" action="表单要提交的位置" target="_blank/_self/_parent/_top/framename" accept-charseet="属性规定服务器用哪种字符集处理表单数据" autocomplete="规定表单是否应打开自动完成功能" enctype="规定将表单数据提交到服务器时应如何编码（仅供 method="post"）" name="规定表单名称" novalidate="规定提交时不应验证表单" rel="规定链接资源和当前文档之间的关系">
</form>
<!--method指定提交表单数据时要使用的HTTP方法
value：get：安全性低、运行速度快、可以在URL中看到我们提交的信息
post：安全性高、传输大文件
-->
<!--action定义提交表单时要执行的操作,通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中
提示：如果省略action属性，则将action设置为当前页面
-->
<!--target提交表单后在何处显示响应
value：_blank:响应显示在新窗口或选项卡中
_self:响应显示在当前窗口中
_parent:响应显示在父框架中
_top:响应显示在窗口的整个body中
framename:响应显示在命名的iframe中
-->
<!--autocomplete:规定表单或输入字段是否应该自动完成-->
<!--enctype;默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码 （空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）
value：appliction/x-www-form-urlencoded:在发送前编码所有字符（默认）
multipart/form-data:不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
text/plain:空格转换为 "+" 加号，但不对特殊字符编码
-->
<!--novalidate:如果使用该属性，则表单不会验证表单的输入
注释：novalidate 属性适用于：<form>，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color
-->
<!--rel的value：
external:规定引用的文档不是当前站点的一部分。
help:链接到帮助文档。
license:链接到文档的版权信息。
next:集合中的下一个文档。
nofollow:链接到未经认可的文档，例如付费链接。（Google 使用 "nofollow" 来指定 Google 搜索蜘蛛不应跟踪该链接）
noopener
noreferrer:规定如果用户点击该超链接，则浏览器不应发送 HTTP 推荐标头。
opener
prev:集合中的上一个文档。
search:链接到文档的搜索工具
-->
<2>input标签及其属性
<form method="get/post" action="表单要提交的位置">
<input type="指定元素的类型默认为text" name="定义表单元素名称" value="元素的初始值type为radio时必须指定一个值" size="指定表单元素的初始宽度" maxlength="type为text或password时限定输入的最大长度" checked="type为radio或checkbox 时指定按钮是否被选中"/>此处可添加文本内容
</form>
<!--type
text:定义供文本输入的单行输入字段
password:定义密码字段
submit:定义提交表单数据至表单处理程序的按钮
radio:定义单选按钮
checkbox：定义复选框
button：定义按钮
reset:定义重置按钮
step:用于设定步长值
number：用于应该包含数字值的输入字段经常与step连用
date：用于应该包含日期的输入字段
color：用于应该包含颜色的输入字段
range：用于应该包含一定范围内的值的输入字段
month：允许用户选择月份和年份
week：允许用户选择周和年
time：允许用户选择时间（无时区）
datetime：允许用户选择日期和时间（有时区）
datetime-local：允许用户选择日期和时间（无时区）
email：用于应该包含电子邮件地址的输入字段；某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入
search：用于搜索字段（搜索字段的表现类似常规文本字段）
tel：用于应该包含电话号码的输入字段（目前只有 Safari 8 支持 tel 类型）
url：用于应该包含 URL 地址的输入字段；某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入
image:用于创建图片按钮；图片地址用src属性链接
-->
<!--size当type为test或possword时，表单元素的大小以字符为单位。对于其他类型宽度以像素为单位-->
<!--对输入的一些限制：
disabled:规定输入字段应该被禁用；disabled属性不需要值
max:规定输入字段的最大值
maxlength:规定输入字段的最大字符数;该属性不会提供任何反馈,如果需要提醒用户，则必须编写JavaScript代码
min:规定输入字段的最小值
pattern:规定通过其检查输入值的正则表达式
required:规定输入字段是必需的（必需填写）
size:规定输入字段的宽度（以字符计）
step:规定输入字段的合法数字间隔
value:规定输入字段的默认值
hiden：将表单内容隐藏；hiden属性不需要值
readonly:规定输入字段为只读（不能修改）;readonly属性不需要值。它等同于readonly="readonly"
autocomplete:规定表单或输入字段是否应该自动完成;可以把表单的autocomplete设置为on，同时把特定的输入字段设置为off，反之 亦然。autocomplete属性适用于<form>以及如下<input>类型：text、search、url、tel、email、password、datepickers、range 以及 color
-->
<3>datalist标签
<form>
<input list="mark"/>
<datalist id="mark">
<option></option>
</datalist>
</form>
<!--datalist用户会在他们输入数据时看到预定义选项的下拉列表;input元素的list属性必须引用datalist元素的id属性-->
<4>列表框
<form>
<select>
<option selected="selected">文本内容</option>
</select>
</form>
<!--option定义待选择的选项；通过添加selected属性来定义预定义选项-->
<5>文本域
<form>
<textarea>文本内容</textarea>
</form>
<!--textarea定义多行输入字段（文本域）-->
<6>lable标签
<form>
<lable for="mark">文本内容</lable>
<input type="radio" id="mark"/>
</form>
<!--label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。就是说，当用 户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上;label标签的for属性应当与相关元素的id属性相同
-->
例：<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
<7>其他表单元素
<button type="button">
文本内容
</button>
<8>表单初级验证
<form>
<input type="text" name="username" palceholder="请输入用户名"/>
</form>
<!--还可用在下拉框、文本域等-->
<form>
<input type="text" name="username" required/>
</form>
<!--还可用在下拉框、文本域等-->
<form>
<input type="text" name="网址" pattern="[a-zA-z]+://[^\s]*"
</form>
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
