简介
什么是HTML
- HTML 是 HyperText Mark-up Language 的首字母简写，意思是 超文本标记语言。
超文本：文档内可链接其他文档外的内容，使得此文本可以写入除文本外的例如图片、视频等内容
标记语言：用一个一个标签组成的，可以让计算机读懂的语言。
- 计算机读取后会将 HTML 写的内容以另一种方式显示在浏览器上。
HTML 基础语法
HTML 基础结构
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
- head 的内容是对网页文档作辅助说明的。
- body 的内容是对网页内容进行呈现的。
- HTML 都是由 标签 和 标签内的内容 组合而成的
标签 分为 单标签 和 双标签 ，单标签例如
<hr/> <br/>，双标签例如<div></div> <p></p>
HTML 注释
- 尖括号里面，感叹号 ! 开头，两边两个斜杠结尾 -- --
<!-- 这里写注释 -->
HTML 中 head 头部设置
- head 标签作用于网页的头部，它的内容不会在正文中显示出来，主要完成对当前页面的各种设置。
- 在 head 中常包含如下子标签：
| 标签 | 描述 | 示例 |
|---|---|---|
<title> |
定义了文档的标题 | <title>本网页标题</title> |
<meta> |
定义了 HTML 文档中的元数据 | 元数据包括编码 charset，关键字 keywords ，描述 description |
<style> |
定义了 HTML 文档的内联样式 | |
<script> |
定义了客户端的脚本文件 | |
<link> |
定义了一个文档和外部资源之间的关系 | 通常用来引入外部样式表 |
<base> |
定义了页面链接标签的默认链接地址 |
HTML 标签
span 标签
- 常用于包含文本，用来组合文档中的行内元素。
<span></span>
h系列标签 （headline 大字标题）
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
p标签 （paragraph 段落）
<p></p>
⚠警告： p标签不能嵌套其他块级元素标签，如果嵌套，浏览器将会强制把一个p标签拆成两个。
div 标签（division 分割）
- 用来将相关内容组合到一起，以便和其他内容分割，div+css 是网页常见的布局方式。
<div></div>
列表标签
- h5规范：li 不能单独使用，只能放在 ul 或 ol 标签内，同理，ul 的次级子标签只能是 li ，li 内可以嵌套其他标签。
无序列表 ul （unordered list）
<ul>
<li></li>
<li></li>
</ul>
- ul 的 type 属性：（⚠警告：涉及样式内容请在css中表达样式）
- disc 实心圆（默认）
- circle 空心圆
- square 实心方块
有序列表 ol （ordered list）
<ol>
<li></li>
<li></li>
</ol>
- ol 的 type 属性：（⚠警告：涉及样式内容请在css中表达样式）
- 1 阿拉伯数字编号（默认）
- a 小写英文字母编号
- A 大写英文字母编号
- i 小写罗马数字编号
- I 大写罗马数字编号
- start 属性：必须是一个整数，代表有序编号起始值。
- reversed 属性：编号是否倒序。
定义列表 dl （definition list）
由 dt （data term）数据项，和 dd （data definition）数据定义 构成
<dl>
<dt></dt>
<dd></dd>
</dl>
table 表格标签
- table表格，tr （table row）表格行，然后每个行分出多少个表格数据格td（table data），th（table headline）标题标题格。例如：
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tbody><tr><td>Data</td></tr></tbody> //tbody浏览器会自动加上
</table>
- 表格中的标签：
| 表格 | 描述 | 属性 |
|---|---|---|
| <table> | 定义表格 | cellspacing格与格之间的间隙，cellpadding格子内边距,width宽度 |
| <caption> | 定义表格标题 | align排列方式 |
| <tr> | 定义表格的行 | align，valign，bgcolor |
| <th> | 定义表格的表头 | align，valign，bgcolor、rospan、colspan、width、height |
| <td> | 定义表格单元格 | align，valign，bgcolor、rospan、colspan、width、height |
| <thead> | 定义表格的页眉 | align，valign，bgcolor |
| <tbody> | 定义表格的主体 | align，valign，bgcolor |
| <tbody> | 定义表格的页脚 | align，valign，bgcolor |
- rowspan 属性：设置td或th行跨度，永远是右边合并去左边
- colspan 属性：设置td或th列跨度，永远是下边合并去上边
- align属性：水平方向对齐方式
- valign属性：垂直方向对齐方式
form 表单标签
<form action="./" method="get">
<input type="text"/>
<input type="password"/>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</form>
form标签属性：
- action 属性：表示表单要提交到的url的地址。
- method 属性：表示表单提交的方式，有 get 和 post 。
- enctype 属性：提交的类型，有
application/x-www-form-urlencoded、multipart/form-data、text/plain - target 属性：以何种方式打开发送到的页面。
- name 属性：给表单起个名字。
input 标签
- type属性：常用值text单行文本，password密码框，radio单选按钮，checkbox多选按钮，button普通按钮，submit提交，reset重置。
- value属性：表示input的内容值。
- placeholder属性：提示文本，以浅色字表现在文本框中，不是框中值。
- disabled属性：禁用带有该属性的input。
- required属性：带有该属性的input必须填写内容。
input 的 type 类型
-
type="text"时，变为文本框；value属性，表示框内的值。
<input type="text" value="" />
-
type="password"时，变为密码输入框。
<input type="password" />
-
type="radio"时，变为单选按钮，提交的是value的值，相同name的radio会互斥，带有checked属性默认选中。
<input type="radio" value="" name="" checked/>
label标签，将label标签内的内容与ID相同的input标签绑定
<input type="radio" id="ID名"/> <label for="ID名">123</label>
-
type="checkbox"时，变为多选按钮，提交的是value值。
<input type="checkbox" value="" />
-
type="file"文件选择控件 -
type="hidden"定义隐藏的输入字段，value隐藏在表单内一起提交
按钮
- type="submit"、"reset"、"button"时，分别为提交按钮，重置按钮，普通按钮，value值为按钮内显示的文本，提交按钮和重置按钮直接带有动作。type="image"定义图像形式的提交按钮。
<input type="submit" value="submit按钮显示的文本" />
<input type="reset" value="reset按钮显示的文本" />
<input type="button" value="111" />
<input type="image" src="./img.jpg" />
- button标签更为灵活，因为是双标签，里面可定义文本及图片等更多内容。
<button type="button"></button>
input 的 html5 新增 type 类型
| type值 | 作用 |
|---|---|
| multiple | 多文件上传 |
| date、time | 日期，时间选择 |
| datetime、datetime-local | 定义日期字段（带有time控件） |
| month、week | 定义日期字段的月、周 |
| 电子邮件输入控件（自动检测邮件规则） | |
| url | 网址输入控件（自动检测网址规则） |
| number | 数字输入控件，可用max和min属性设最大最小值 |
| search | 搜索框，输入内容后会有清空按键 |
| color | 颜色选择 |
| range | 拖拽条，可max和min，step规定合法数字间隔，value规定默认值 |
| tel | 电话号码的文本字段 |
select 标签
- 下拉菜单select标签，里面嵌套option标签代表下拉菜单里的选项，带有selected属性的默认被选中。
- 提交的是value值，显示内容是option标签里面写的内容
- 可用optgroup进行分组
<select name="">
<option value=""></option>
<option value="" selected=""></option>
</select>
textarea标签
- textarea多行文本框；
- rows和cols属性：用来定义多行文本框的显示上的行数和列数（显示上）。
- style里的resize:none：禁止拉伸。
<textarea rows="" cols=""></textarea>
datalist标签
input标签添加list属性后，通过datalist控件，可为输入框提供备选项，并有模糊智能感应。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
a 标签，超级链接标签
- anchor锚，在哪里有什么。
<a href="" ></a>
a 标签常用属性：
- href 属性：hypertext reference 超文本引用。支持相对路径和绝对路径。
路径：
相对路径：描述从标签所在的文件出发，如何找到文件，回退层级用 ../ 写法。
绝对路径：描述文件的精准地址。
- title 属性：文字提示属性，常用来设置鼠标悬停文本。
- target 属性：表示链接打开的方式，常用值有：
_self本窗口（默认）
_blank新窗口
_parent父窗口
_top顶级窗口
- 锚点跳转：href 属性值为 #top 可跳转到页面顶部，也可以为其他标签的id，#其他id 跳转至这个id的标签处。
- 下载链接：当 href 指向文件（exe、zip、rar）等，将自动成为下载链接。
- 邮件链接、电话链接：
<a href="mailto:me@test.com">发邮件</a>
<a href="tel:12306">打电话</a>
iframe 标签
<iframe src="https://www.baidu.com" name="frame1" frameborder=""></iframe>
- iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
- ifame 常用属性
| 属性名 | 作用 |
|---|---|
| src | iframe中显示的文档的url |
| name | 规定iframe的名称,a标签的target可以指向 |
| frameborder | 规定是否显示框架周围的边框，值为0或1 |
img 图像标签
<img src="./img1.jpg" alt="这是提示文字" title="文字提示"/>
- 在HTML 网页中插入一张图片，使用 img 标签，它是一个单标签
<img/> - 网页上支持的图片格式：.jpeg(jpg)、.png、.gif、.webp、.svg、.bmp
img 标签常用属性：
- src 属性：source 来源，路径地址。
- alt 属性：alternate 替代品，如果无法加载图像，会显示 alt 属性中的备用文本，以及网页朗读器应用。
- title 属性：文字提示属性。
- width 属性：图片宽度。
- height 属性：图片高度。
- border 属性：边框线粗细。
（⚠警告：4、5、6涉及样式内容请在css中表达样式）
audio 音频标签
<audio src="" >
不兼容显示文字
</audio>
//或者用sourse标签引入文件
<audio>
<sourse src="" type=""></sourse>
不兼容显示文字
</audio>
- autoplay属性：开启自动播放。
- control属性：显示播放控件。
- loop属性：开启循环。
- src属性：音频的url地址。
video 视频标签
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
上面为Hbuilder自动生成多格式视频兼容写法，从上到下找可播放格式，找到然后播放。
- autoplay属性：开启自动播放。
- control属性：显示播放控件。
- loop属性：开启循环。
- src属性：音频的url地址。
- muted属性：规定视频的音频输出应该被静音
- poster属性：视频下载时或者播放前显示的封面
HTML 文本修饰标签
- 常用文本修饰标签如下
| 标签 | 作用 |
|---|---|
<i>...</i> |
斜体 |
<em>...</em> |
强调斜体 |
<b>...</b> |
加粗 |
<strong>...</strong> |
强调加粗 |
<u>...</u> |
underline 下划线标签 |
<sub>...</sub> 和 <sup>...</sup>
|
sub 下标，sup 上标 |
<cite>...</cite> |
作品的标题，表现形式为斜体 |
<del>...</del> |
删除线 |
⚠警告： 以上对文本修饰的标签开发中使用 reset.css 已不再呈现样式，仅代表语义。后续用来当精灵图，开启position后设置宽高。
HTML5 新增语义化布局标签
| 标签 | |
|---|---|
| <header> | 定义文档的页眉 |
| <main> | 定义网页核心内容 |
| <footer> | 定义文档或者节的页脚/顶部 |
| <nav> | 定义导航链接部分 |
| <article> | 定义文章 |
| <section> | 定义文档中的节（section/段落） |
| <aside> | 定义其所处内容之外的内容/侧边 |
网友评论