【HTML】入门教程
HTML入门
- HTML
- 网页
- 主流浏览器及其内核
- W3C标准
- HTML结构
- 简单示例
- `meta`
- HTML标签
- 语法规则
- 标签分类
- 标签之间的关系
- 标签属性
- 通用属性：
- 常用标签及其属性
- 应用示例
- HTML5
- 语义化标签
- 多媒体标签
- 视频标签 `video`
- 音频标签 `audio`
- 新增的表单元素
- 参考文档
HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种标记语言
网页
- 网页是图片、链接、文字、声音、视频等元素组成的一个html文件(后缀名为html)
- html文件一般都是在浏览器打开
- 浏览器解析html文件，而后将解析的内容显示出来，就是我们可以看到的网页。
主流浏览器及其内核
| 浏览器 | 内核 |
|---|---|
| IE(Internet Explorer) | Trident |
| 谷歌(Chrome) | WebKit / Blink |
| 火狐(Firefox) | Gecko |
| Safari | WebKit |
| 欧朋(Opera) | Presto |
浏览器内核即渲染引擎，用来解释网页语法并渲染到浏览器网页上.
故而渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息.
不同的浏览器内核对网页编写语法的解释不同，则同一网页在不同内核浏览器中的渲染(显示)效果也可能不同
而针对这种不同,则制定了web标准
W3C标准
由 W3C（万维网联盟） 组织和其他标准化组织制定的一系列标准的集合
| 标准 | 说明 |
|---|---|
| 结构 (HTML) | 网页的基础，用于定义网页(元素)的结构和内容 |
| 表现 (CSS) | 控制网页的样式(大小、颜色、形状…)和布局 |
| 行为 (JavaScript) | 实现网页的交互，修改HTML和CSS，动态的改变页面的内容和样式 |
HTML结构
简单示例
<!--
声明为HTML5文档 html4中需要引入DTD文件来声明当前文档的结构和元素规则
-->
<!DOCTYPE html>
<html> <!-- 页面根元素 -->
<!-- 头部内容 -->
<head>
<meta charset="utf-8"> <!-- 文档编码格式 -->
<title>HTML简单实例</title> <!-- 文档标题 -->
</head>
<!-- 页面可见内容 -->
<body>
内容区域: 包含 html元素、元素属性、css、js等代码块
</body>
</html>
meta
定义有关HTML文档的元数据.
-
元数据不会显示在页面，但是会被浏览器解析
-
通常用于指定网页的描述、关键词、文件的最后修改时间、作者等
-
常用属性使用示例
<!-- charset 定义文档的字符编码,可选 UTF-8 | gbk --> <meta charset="UTF-8"> <!-- content 文档描述信息 name 指定content描述信息的类型 --> <!-- 定义文档关键词，用于搜索引擎 --> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <!-- 定义web页面描述 --> <meta name="description" content="Free Web tutorials on HTML and CSS"> <!-- 定义页面作者 --> <meta name="author" content="Hege Refsnes"> <!-- viewport 网页可视区域的设置 width 设置 layout viewport 的宽度 initial-scale 初始缩放比例 maximum-scale 最大缩放比例 user-scalable 是否允许用户进行缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
HTML标签
语法规则
通用写法: <标签名>内容</标签名>
-
标签名一般都为小写字母
-
标签根据是否有内容有两种写法: 单标签(
<标签名 />)和双标签(<标签名>内容</标签名>)单标签和双标签都需要闭合: 单标签使用
/,双标签使用/标签名单标签 双标签 <meta /><input /><br /><hr /><p></p><h1></h1>~<h6></h6><div></div><span></span><a></a> -
大部分标签都可以添加属性设置, 如
<span id="txt"></span>
标签分类
HTML标签根据元素定义可分为块状元素(block)、行内元素(inline)、行内块元素(inline-block)
元素可以通过 display来修改它的类型.
-
块状元素
- 以新行开始和结束,且独占一行
- 高度、行高、边距可控
- 如果不设置高度，默认为父元素高度
- 多个块状元素写在一起， 从上到下依次排列
-
行内元素
- 不独占一行
- 高度设置无效
- 行高设置有效
- 行内元素中不放块状元素
-
行内块元素
- 不独占一行
- 默认高度是本身内容的高度，之间有空白缝隙
- 行高，高度边距都可控
| 块状元素 | 行内元素 | 行内块元素 |
|---|---|---|
<div> <p> <form> <h1>~<h6> <hr> <ul> <ol> <li> <pre> <table> <thead> <tbody> <tfoot> <tr> <td> <th> | <span> <a> <b> <strong> <em> <i> <br> <labeL> | <button> <input> <textarea> <select> <img> |
标签之间的关系
- 并列(兄弟关系)
- 嵌套(父子关系): 需要成对使用,且一般为块级元素包裹行内元素
<p> <!-- 块级元素 -->
<label>名称</label> <!-- 行内元素 -->
<span>简介</span>
</p>
标签属性
- 所有的
htmL标签都可以有属性 - 属性设置在开始标签上
- 属性以 名称/值 对设置
名称="值" - 一个标签可以设置多个属性，属性间以空格间隔，且排序不分先后
- 标签也支持添加自定义属性
通用属性：
| 属性 | 描述 |
|---|---|
| id | 给元素一个唯一的标识符，可以用于 CSS 选择器或 JavaScript 操作 |
| class | 给元素指定一个或多个类名，可以用于 CSS 或 JavaScript 操作 |
| style | 给元素添加css样式 |
| title | 在鼠标悬停在元素上时显示的文案 |
常用标签及其属性
-
段落
p- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保有空隙(16px)
-
文本格式化标签
语义 标签 加粗 <strong></strong>或者<b></b>斜体 <em></em>或者<i></i>删除线 <del></del>或者<s></s>下划线 <ins></ins>或者<u></u> -
标题
h1 ~ h6HTML 提供了 6 个等级的网页标题，即
<h1> - <h6>
具体实现：<h1> 我是一级标题 </h1>特点：
-
加了标题的文字会变的加粗，字号也会依次变大
-
一个标题独占一行
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
-
-
链接标签
<a>
-
语法:
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> -
属性:
-
href: 指定链接目标的url地址 -
target: 指定链接页面的打开方式_self: 当前窗口打开(默认)_blank: 新标签页打开
- 链接分类:
-
外部链接：
<a href="http://www.baidu.com">百度</a> -
内部链接:
<a href="index.html">首页</a> -
空链接: 没有链接目标时使用。
<a href="#">首页</a> -
下载链接：
href地址是一个文件或者压缩包，会下载这个文件 -
锚点: 快速定位到页面中的某个位置
<div> <a href="#one"> 第1集 </a> <a href="#two"> 第2集 </a> <a href="#three"> 第3集 </a> </div> <div id="one"> <label>第1集</label> <div class="one-detail"> 中华鲟是地球上最古老的脊椎动物，是鱼类的共同祖先-古棘鱼的后裔，距今有一亿四千万年的历史。和恐龙生活在同一时期。中华鲟由于它们自身所具有的一系列原始特征，表现出它们既是介于软骨鱼类（鲨鱼等）与硬骨鱼类之间的类群，又是硬骨鱼类中较原始的类群，在鱼类演化史中有重要的学术价值。中华鲟在分类上占有极其重要地位，是研究鱼类演化的重要参照物，在研究生物进化、地质、地貌、海侵、海退等地球变迁等方面均具有重要的科学价值和难以估量的生态、社会、经济价值。但由于种种原因，这一珍稀动物已濒于灭绝。保护和拯救这一珍稀濒危的“活化石”对发展和合理开发利用野生动物资源、维护生态平衡，都有深远意义。从它身上可以看到生物进化的某些痕迹，所以被称为水生物中的活化石。 </div> </div> <div id="two"> <label>第2集</label> <div class="two-detail">蝰蛇（Viperinae）和蝮蛇（Crotalinae）是这一科的代表 。它们体粗尾细，长着三角形的头。毒液中含有血毒素，有些种类另含神经毒素。毒牙较长，能深深刺入猎物体内高效地 注入毒液。毒牙与上腭之间有关节，可在口中放倒。具毒性，主要分布于北非及中东地带，它们有着明显的特征，其双眼位置有一对竖立的刺状角鳞，因此容易辨认。不过也曾发现过没有角鳞的角蝰.主要分布在北非地区的干燥沙漠地带，如摩洛哥、撒哈拉、毛里塔尼亚、马里共和国等地，亦会向东发展出没于阿尔及利亚、突尼斯、尼日尔、利比亚、乍得、苏丹共和国、埃及、埃塞俄比亚及索马里等地。它们的活动范围，还从西奈半岛伸延至以色列境内的内盖夫北部。在阿拉伯半岛里的也门及沙特阿拉伯西南部地区，可以发现角蝰跟另一种角蝰属蛇类Cerastes gaperettii杂居于同一区域的情况</div> </div> <div id="three"> <label>第3集</label> <div class="three-detail"> 信天翁的栖息地是海洋。它们在岸上表现得十分驯顺，因此，许多信天翁又俗称“呆鸥”或“笨鸟”。信天翁是最善于滑翔的鸟类之一。在有风的气候条件下，能在空中停留几小时而无需拍动其极其长而窄的翅膀。它们需要逆风起飞，有时还要助跑或从悬崖边缘起飞。无风时，则难于使其笨重的身体升空，多漂浮在水面上。也像其他鸟类一样，能喝海水。通常以鱼类和头足类为食，也常跟随海船吃船上的剩食。信天翁仅在繁殖时才成群地登上远离大陆的海岛。在那里繁殖交配，其中包括展翅和啄嘴表演，伴随着大声鸣叫。每窝产一枚卵，产在地面上或简易堆起的巢里。亲鸟轮流孵卵。幼雏成长很慢，尤其是大型种类者；幼雏孵出后3-10个月才长齐飞羽，之后在海上渡过5-10年，在到陆地配对前，换过几次羽。信天翁寿命很长。 </div> </div> <style> a { margin-right: 10px; } .one-detail, .two-detail, .three-detail { width: 600px; height: 300px; } .one-detail { background-color: #f4c4c4; } .two-detail { background: #eeb3e0; } .three-detail { background: #b3b4ee; } </style> -
图片标签
<img>是单标签，用于定义 HTML 页面中的图像。具体实现：
<img src="图像URL" />属性：
src是<img>标签的必须属性，用于指定图像urlalt: 当图片不能正确加载时的替换文案width: 设置图片宽度height: 设置图片高度
-
换行
<br/>- 单标签
- 只是开始新的一行,没有默认间隙
-
水平线
<hr/>- 单标签
- 生成一条水平线，宽度继承父元素，上下有间隙(默认7px)
-
表格
-
<table> </table>是用于定义表格的标签。 -
<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。 -
<td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中 -
<th> </th>: 定义表头的单元格，相当于td,但单元格文本默认加粗显示嵌套关系:
table > tr > td语义标签(清晰表格结构):
caption: 表格标题thead: 表格的头部区域tbody: 表格的主体区域tfoot: 表格的底部区域
table标签属性：width: 表格宽度border: 表格边框设置cellpadding: 单元格内边距cellspacing: 单元格外边距align: 表格在父元素中的水平对齐方式bgcolor: 表格背景颜色
td标签属性：- 同属性优先级比
table的高 align: 表格在父元素中的水平对齐方式bgcolor: 表格背景颜色- 合井单元格
rowspan: 列合并(垂直方向)colspan: 行合并(水平方向)
具体实现
<table width="320" border cellpadding="4" cellspacing="0" bgcolor="#ccc"> <caption>支出明细</caption> <thead> <tr> <th>支出项目</th> <th>单价（元）</th> <th>数量</th> <th>金额（元）</th> </tr> </thead> <tbody> <tr> <td align="center" bgcolor="#eeb3e0">垃圾箱</td> <td>30</td> <td>12</td> <td>360</td> </tr> <tr> <td>笔记本</td> <td>5</td> <td>50</td> <td>250</td> </tr> <tr> <td>宣传单</td> <td rowspan="2">0.08</td> <td>400</td> <td>32</td> </tr> <tr> <td>宣传册</td> <!--<td>12</td>--> <td>200</td> <td>2400</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">合计</td> <!--<td>--</td>--> <!--<td>--</td>--> <td>3032</td> </tr> </tfoot> </table>
-
-
表单
一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成
-
<form>标签用于定义表单域<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>属性 作用 action 用于指定接收并处理表单数据的服务接口url地址 method 用于设置表单提取方式，get / post name 指定表单名称，以区分同一个页面中的多个表单域 -
表单控件
input<input />标签可以根据不同的type属性值,用来指定不同的控件类型type属性值描述 text 单行文本框，默认宽度20个字符 password 密码框 radio 单选框,checked标识选中 checkbox 多选框,checked标识选中 submit 提交按钮 reset 重置按钮 button 普通按钮 file 选择文件 -
button按钮标签，内容可以为比如文本或图像等。
type: 按钮类型,必需。可选值有button、reset、submit -
label<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验属性
for的值 为与之相关联元素的id属性值<label for="text">文本框</label> <input type="text" id="text" /> -
select下拉列表，一般与
option配合使用，实现下拉选中一项。option属性:value: 当前选中项的值，需唯一label: 当前选项显示的文本selected: 当前选项是否被选中
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> -
textarea多行文本输入控件
属性：cols: 每行中的字符数rows: 显示的行数
-
-
disabled表单元素禁用属性，
inputselecttextareabutton都可以设置 -
综合示例
<form action="" method="post"> <p> <!-- label 为表单元素添加标签 for 要关联的表单id --> <label for="text">文本框</label> <!-- id 表单唯一标识，可以用于关联 <label> 元素 name 用于标识表单字段,如 username... maxlength 允许的最大字符数 --> <input type="text" id="text" name="username" placeholder="用户名" value="admin" disabled autofocus required/> </p> <p> <label for="psd">密码</label> <input type="password" id="psd" name="password" placeholder="密码" value="" /> </p> <p> <label>性别:</label> <label for="male">男</label> <!-- name 表单数据标识字段 value 当前选项的值 --> <input type="radio" id="male" name="gender" value="male" checked> <label for="female">女</label> <input type="radio" id="female" name="gender" value="female"> </p> <!-- 单选以 name 标识字段来区分组 --> <!-- <p> 是否注册 <label for="hs">已注册</label> <input type="radio" id="hs" name="contain" value="hs" checked> <label for="ms">未注册</label> <input type="radio" id="ms" name="contain" value="ms"> </p> --> <p> <label for="checked">多选框</label> <input type="checkbox" name="checked" id="checked" checked /> </p> <p> <!-- 表单的内容会被提交到服务器 --> <label>提交按钮</label> <input type="submit" /> </p> <p> <!-- 表单数据恢复到初始值 --> <label>重置按钮</label> <input type="reset" /> </p> <p> <label>普通按钮</label> <input type="Button" /> </p> <p> <label>选择文件</label> <!--支持上传的文件类型: audio/* video/* image/*--> <input type="file" accept="image/*"/> </p> <p> <!-- 未设置 selected 时，会默认选中第一个 option --> <select name="type" > <!--optgroup 选项组--> <optgroup> <option value="1" label="checkbox">A</option> <option value="2" label="submit" selected>B</option> <option value="3" label="reset">C</option> </optgroup> <optgroup> <option value="4" label="START">A</option> <option value="5" label="BOTTOM" selected>B</option> <option value="6" label="RIGHT">C</option> </optgroup> </select> </p> <p> <textarea cols="100" rows="5"></textarea> </p> </form> -
列表
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul></ul> | 无序标签 | 包含<li>列表项,<li>之间没有顺序级别之分 |
<ol></ol> | 有序标签 | 包含<li>列表项，<li>排序以数字来显示 |
<dl></dl> | 自定义列表 | 包含<dt> <dd> |
- 特殊字符
在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
| 特殊字符 | 代码 |
|---|---|
| 空格符 | |
| 大于 | > |
| 小于 | < |
&符号 | & |
| 摄氏度 | ° |
| 正负号 | ± |
| 乘号 | × |
| 除号 | ÷ |
| 平方 | ² |
| 立方 | ³ |
| 版权 | © |
| 商标 | ® |
应用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML简单实例</title>
<!-- 内部css样式 -->
<style type="text/css">
h3 {}
</style>
<!-- 外部样式表(css) -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- 内部js -->
<sctipt type="text/javascript">
console.log("文档内部 javascript")
</script>
<!-- 外部js文件 -->
<script src="文件地址"></script>
</head>
<body>
<h3>标题<h3>
<p>段落内容</p>
</body>
</html>
HTML5
语义化标签
方便网站的seo（Search Engine Optimization，搜索引擎优化）
<header>头部标签<nav>导航标签<article>内容标签<section>定义文档某个区域<aside>侧边栏标签<footer>尾部标签
多媒体标签
视频标签 video
<video>元素支持三种视频格式: MP4 WebM Ogg, 推荐使用MP4
<!--一般使用-->
<video src="./media/mi.mp4"></video>
<!--
兼容写法
浏览器会匹配 video 标签中的 source ，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
-->
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</video >
-
属性
属性 值 描述 autoplay autoplay 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) controls controls 向用户显示播放控件 width pixels(像素) 设置播放器宽度 height pixels(像素) 设 置播放器高度 loop loop 播放完是否继续播放该视频，循环播放 preload auto (预先加载视频)，none (不应加载视频) 规定是否预加载视频(如果有了autoplay就忽略该属性) src url 视频url地址 poster Imgurl 加载等待的画面图片 muted muted 静音播放
音频标签 audio
<audio>元素支持三种音频格式: MP3 Wav Ogg, 推荐使用MP3
<!--一般写法-->
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
<!--
兼容写法
浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
-->
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的浏览器暂不支持 <audio> 标签。
</audio>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| src | url | 要播放的音频的URL。 |
注意：
- 谷歌浏览器把音频和视频自动播放禁止了
- 视频标签可以添加 muted 属性来静音播放视频，音频不可以(需要通过JavaScript解决)
新增的表单元素
-
input常见输入类型textpasswordradiocheckboxbuttonfilesubmitreset -
input新的输入类型属性值 说明 email 限制输入必须为Email类型 url 限制输入必须为URL类型 date 限制输入必须为日期类型 time 限制输入必须为时间类型 month 限制输入必须为月类型 week 限制输入必须为周类型 number 限制输入必须为数字类型 tel 手机号码 search 搜索框 color 生成-个颜色选择表单 新增类型的限制输入校验，会在表达提交的时候触发
-
新增其他常用属性
属性 说明 autofocus 自动获得焦点 required 必填项 autocomplete 自动填充 max 最大值 min 最小值 pattern 用于验证的正则表达式 placeholder 表单没有值时的，提示显示文案 step number类型时的数字间隔
参考文档
W3C: http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTML