HTML介绍
HTML 指的是超文本标记语言 (Hyper Text Markup Language), HTML 不是一种编程语言，而是一种标记语言 (markup language) , 标记语言是一套标记标签 (markup tag), HTML 使用标记标签来描述网页的
HTML标签
以下是HTML常用的标签介绍以及使用方式:
<!DOCTYPE html>
- HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
- 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
- HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多
<!DOCTYPE html>
<html>
.....
</html>
<html></html>
- html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素
<!DOCTYPE html>
// lang属性，作用是 1.帮助语音合成工具确定要使用的发音 2.帮助翻译工具确定要使用的翻译规则
<html lang="zn">
</html>
<head>
head元素里面的内容是一些“元数据”; 一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标
- title 网页的标题
- meta 可以用于设置网页的字符编码
- style 文档样式,css样式
- link 链接外部样式
- base 设置一些基础信息
- script
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
</html>
<body></body>
body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>网页title</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
<strong>加粗</strong>
</body>
</html>
<h></h>
网页的标题 , h1 ~ h6 共规定了6个等级的标题
- h元素有助于网站的
SEO（Search Engine Optimization）优化，可以促进关键词排名 - 建议在网页中最多只有1个h1元素
- 乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站
<h1>一级标题</h1>
<p></p>
表示文章中的一个段落 （paragraph）
<p>我是段落</p>
<strong></strong>
用于强调某些文本，粗体的显示效果
<strong>加粗字体</strong>
<b>
加粗,建议使用 Strong
<b>加粗字体</b>
<i></i>
斜体
<i>斜体字体</i>
<em></em>
斜体,推荐,也推荐使用 css 设置
<em>斜体字体</em>
<s></s>
删除线
<s>带删除线字体</s>
<del></del>
删除线,推荐, 也推荐CSS设置
<del>带删除线字体</del>
<u></u>
下划线
<u>带下滑线字体</u>
<ins></ins>
删除线,推荐, 也推荐CSS设置
<ins>带下滑线字体</ins>
<pre></pre>
pre 内部会保留书写格式, 保留HTML代码中的空格、换行
<pre>
<p> 我前面有2个空格</p>
<p>我前面没有空格</p>
</pre>
<code></code>
用于显示程序代码
<code>代码</code>
<hr>
就是创建横跨网页水平线的标签
<hr>
<br>
单标签，表示强制换行
<br>
<img>
img元素专门用来显示图片（img是image的缩写)
<img src="https://segmentfault.com/6f2dc.png" alt="占位文字">
img 属性
- src属性（ src是source的缩写）用来设置图片的路径（URL）
- 绝对路径：完整的描述文件位置的路径
- 相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关
- alt 占位文字,当图片加载失败会显示
- width 图片宽度
- height 图片高度
- img元素如果只设置了width（或height），浏览器会自动根据图片宽高比计算出height（或width）
web 中常用的图片格式有
- png：静态图片，支持透明
- jpg：静态图片，不支持透明
- gif：动态图片、静态图片，支持透明
<a></a>
a元素: 定义超链接，用于打开新的URL
<a href="http://www.baidu.com" target="_blank">百度一下</a>
a元素属性
- href：指定要打开的URL; Hypertext Reference的简称
- target：在哪里打开URL
- _self：默认值，在当前窗口打开URL
- _blank：在一个新的窗口中打开URL
- _parent：在父窗口中打开URL
- _top：在顶层窗口中打开URL
- 某个iframe的name值：在某个iframe中打开URL
锚点链接: 锚点链接可以实现：跳转到网页中的具体位置
<a href="#one">调转到P段落</a>
<p id="one"></p>
<a href="#">回调顶部</a>
图片链接 img元素跟a元素一起使用，可以实现图片链接
<a href="http://www.baidu.com" target="_blank"><img src="图片地址" alt="占位文字" width="200" height="200"></a>
<iframe></iframe>
利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
<iframe src="http://www.baidu.com" frameborder="10"></iframe>
<base>
- 可以利用base元素设置当前页面所有a元素的默认行为
- base元素写在head元素中
<head>
<meta charset="UTF-8">
<title>网页title</title>
<base href="http://www.baidu.com" target="_blank">
</head>
<div></div>
一般作为其他元素的父容器，把其他元素包住，代表一个整体, 用于把网页分割为多个独立的部分
div {
outline: 2px solid green !important;
}
<div>我是一个 div</div>
<span></span>
默认情况下，跟普通文本几乎没差别, 用于区分特殊文本和普通文本，比如用来显示一些关键字
<h1><span style="color: yellow">我是个黄色标题</span>,我后面是绿色的了.</h1>
ol-li
- ol (ordered list） 有序列表，直接子元素只能是li
- li (list item） 列表中的每一项
<h3>热门车系</h3>
<ol>
<li>宝马</li>
<li>奔驰</li>
<li>大众</li>
</ol>
ul-li
- ul（unordered list） 无序列表，直接子元素只能是li
- li（list item）列表中的每一项
<h3>大众车型</h3>
<ul>
<li>帕萨特</li>
<li>迈腾</li>
<li>凌度</li>
<li>宝来</li>
</ul>
dl-dt-dd
- dl（definition list） 定义列表，直接子元素只能是dt、dd
- dt（definition term）列表中每一项的项目名
- dd（definition description） 列表中每一项的具体描述，是对 dt 的描述、解释、补充 ,一个dt后面一般紧跟着1个或者多个dd
<h3>蔬菜+水果</h3>
<dl>
<dt>蔬菜</dt>
<dd>黄瓜</dd>
<dd>西红柿</dd>
<dd>西蓝花</dd>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>西瓜</dd>
</dl>
table
- table-表格; tr-表格中的行; td-行中的单元格
table相关属性
- border: 边框的宽度
- cellpadding : 单元格内部的间距
- cellspacing : 单元格之间的间距
- width: 表格的宽度
- align: 表格的水平对齐方式left、center、right
tr的常用属性
- valign 单元格的垂直对齐方式 top、middle、bottom、baseline
- align 单元格的水平对齐方式 left、center、right
th、td的常用属性
- valign 单元格的垂直对齐方式 top、middle、bottom、baseline
- align 单元格的水平对齐方式 left、center、right
- width 单元格的宽度
- height 单元格的高度
- rowspan 单元格可横跨的行数
- colspan 单元格可横跨的列数
table 细边框设置
table {
// 合并边框
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
其他元素
- tbody 表格的主体
- caption 表格的标题
- thead 表格的表头
- tfoot 表格的页脚
- th 表格的表头单元格
<table>
<!-- 表格标题-->
<caption>欢迎光临万达影城</caption>
<!-- 表格头部-->
<thead>
<tr>
<th>放映时间</th>
<th>语言版本</th>
<th>放映厅</th>
<th>售价(元)</th>
<th>在线选座</th>
</tr>
</thead>
<!-- 表格主体-->
<tbody>
<tr>
<td>13:05</td>
<td>国语3d</td>
<td>2号厅</td>
<td>$68</td>
<td><input type="button" value="选座"></td>
</tr>
<tr>
<td>13:05</td>
<td>国语3d</td>
<td>2号厅</td>
<td>$68</td>
<td><input type="button" value="选座"></td>
</tr>
<tr>
<td>13:05</td>
<td>国语3d</td>
<td>2号厅</td>
<td>$68</td>
<td><input type="button" value="选座"></td>
</tr>
<tr>
<td>13:05</td>
<td>国语3d</td>
<td>2号厅</td>
<td>$68</td>
<td><input type="button" value="选座"></td>
</tr>
</tbody>
</table>
单元格的合并
- 合并方向是向右、向下
- 删掉被覆盖掉的td元素
<td rowspan="2" colspan="2">td02</td>
form表单
一般情况下，其他表单相关元素都是它form的后代元素
常用属性
- action 用于提交表单数据的请求URL
- method 请求方法（get和post），默认是get
- target 在什么地方打开URL（参考a元素的target）
- enctype 规定了在向服务器发送表单数据之前如何对数据进行编码
input
单行文本输入框、单选框、复选框、按钮等元素
textarea
多行文本框
select、option
下拉选择框
button
按钮
label
表单元素的标题
fieldset
表单元素组
legend
fieldset的标题
fieldset和legend
区域边框设置
<fieldset>
<legend>必填信息</legend>
<div>
<label for="username">用户名</label>
<input type="text" name="username" id="username">
</div>
<div>
<label for="pwd">密 码:</label>
<input type="password" name="pwd" id="pwd">
</div>
<div>
<label for="code">验证码:</label>
<input type="text" name="code" id="code"> <input type="button" value="获取验证码" tabindex="-1">
</div>
</fieldset>
实体字符(Character Entity)
HTML中有一些字符是预留出来作特殊用途的，比如
- 小于号（<）
- 大于号（>）
要想在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有2种
- &entity_name;
- &#entity_number;
比较常用的有
- 空格：
- 大于号：>
- 小于号：<
- &：&
<pre>
<code>
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<p>Sibling 3</p>
</div>
</code>
</pre>
video(视频)
用来播放视频
video 常用属性
- src: 用于告诉video标签需要播放的视频地址
- autoplay: 用于告诉video标签是否需要自动播放视频
- controls: 用于告诉video标签是否需要显示控制条
- poster: 用于告诉video标签视频没有播放之前显示的占位图片
- loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
- preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
- muted:静音
- width/height: 和img标签中的一模一样
浏览器兼容问题
- 通过集成浏览器所有支持视频播放格式,来进行兼容,浏览器会自动选择
<video controls autoplay loop poster="video/ff.png">
<!-- 兼容写法 -->
<source src="video/sb1.webm" type="video/webm">
<source src="video/sb1.mp4" type="video/mp4">
<source src="video/sb1.ogg" type="video/ogg">
您的浏览器不支持播放!
</video>
浏览器支持视频格式
image.png
audio(音频)
用于播放音频类文件,使用方式同视频类似
常用属性
- autoplay 如果出现该属性，则音频在就绪后马上播放。
- controls 如果出现该属性，则向用户显示控件，比如播放按钮。
- loop 如果出现该属性，则每当音频结束时重新开始播放。
- preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
- src url 要播放的音频的 URL。
音频格式
image.png
<audio autoplay controls>
<source src="video/yinyue.mp3" type="audio/mp3">
该浏览器不支持播放!
</audio>
details 详情概要标签
在网页空间有限的时候,要展示更多的内容
details内部标签
- summary: 对要展示的详细内容的简单概述,如果没有这个标签,默认就是"详细信息"
<details>
<summary>吴京</summary>
1974年，吴京出生于北京一个武术世家，是满族正黄旗[7] 。6岁开始在北京市什刹海体校练习武术。1986年，开始随武术队参加国际交流活动，同年，获得全国武术比赛拳枪刀冠军[8] 。 1989年，进入北京市武术队，并在师傅吴彬的指导下接受专业训练[9] 。1991年，获得全国武术比赛枪术、对练冠军。1994年，获得全国武术比赛精英赛枪术、对练冠军[10] 。 ASHYAS
</details>
marquee 跑马灯标签
标签主要用于滚动播放文字
属性
- direction:设置滚动方向 left(默认)/right/up/down
- scrollamount: 设置滚动速度,值越大就越快
- loop: 设置滚动次数,默认是-1(无限滚动),接受数字 例如 1 2
- behavior:设置滚动类型 slide滚动到边界就停止,alternate滚动到边界就弹回
<marquee behavior="alternate" direction="right">
hello,world!
</marquee>
网友评论