2018-09-17 ----html总结
2018-09-18 本文已影响0人
future_d180
html简介
#HTML
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
##什么是HTML
HTML是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
##HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag) 。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
|<font size = 5><font color=f09345><标签></font>内容<font color=f09345></标签></font></font>|
|-----|
##HTML元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落</p>
##HTML网页结构
下面是一个可视化的网页结构：
其中白色区域才是在网页中可见的部分
##HTML版本
从初期的网络诞生后，已经出现了许多HTML版本:
|版本| 发布时间|
|----|------|
HTML| 1991|
HTML+| 1993|
HTML 2.0| 1995
HTML 3.2| 1997
HTML 4.01| 1999
XHTML 1.0 |2000
HTML5|2012
XHTML5 |2013
##<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
**通用声明**
html5 :
<!DOCTYPE html>
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整网页声明类型 [DOCTYPE 参考手册](http://www.runoob.com/tags/tag-doctype.html)。
##中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
head标签
客户端来卡号的看法熬枯受淡放开手
fasjfkashkjsfakhf
sakdfhaj
ks 阿斯蒂芬哈 萨克交话费
[百度一下](http://www.baidu.com)
#常用标签
##1.HTML<head>元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
|标签 |描述|
|---|---|
|<title>| 定义了文档的标题
|<base>| 定义了页面链接标签的默认链接地址
|<link> |定义了一个文档和外部资源之间的关系
<meta>| 定义了HTML文档中的元数据
<script>| 定义了客户端的脚本文件
<style>| 定义了HTML文档的样式文件
### < meta>元素
meta标签主要是通过属性为网页提供元数据主要包括：name属性和http-equiv属性
<mate name=“参数”, content=“具体描述”>
**name属性参数:**
1.keywords(关键字)
说明：用于告诉搜索引擎，你网页的关键字。举例：
<meta name="keywords" content="python,技术，理科生，前端">
2.description(网站内容的描述)
说明：用于告诉搜索引擎，你网站的主要内容。举例：
<meta name="description" content="关于python的技术博客">
3.author(作者)
说明：用于标注网页作者 举例：
<meta name="author" content="726550822@qq.com">
4.viewport(移动端的窗口)
说明：这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。
<meta name="viewport" content="width=device-width, initial-scale=1">
5.robots(定义搜索引擎爬虫的索引方式)
说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：
<meta name="robots" content="none">
具体参数如下：
a.none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
b.noindex : 搜索引擎不索引此网页。
c.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
d.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
e.index : 搜索引擎索引此网页。
f.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
6.renderer(双核浏览器渲染方式)
说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例：
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
**http-equiv属性**
html
[百度一下](http://www.baidu.com)
|a|b|
|---|---|
|abc|bca
|a|b|
|---|---|
|abc|bca
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.标题标签：h1-h6
网页的内容涉及到标题的时候使用
-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--2.段落标签: p
网页的内容中一个段落文字对应一个p标签
p标签的内容结束后会自动换行
注意：html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行、空格、缩进无效)
但是可以通过一些特殊的符号，来产生特定的效果
空格符：
强制换行:<br />
-->
<p>
随着今年苹果秋季发布会的闭幕，从 1（初代 iPhone）到 10（iPhone X），<br />
新 iPhone 的命名即将用尽包括数字 10 以内的所有数字，<br />
对于苹果来说，从明年开始，为新 iPhone 命名将会是一件头疼的事情。2÷10=0.2
</p>
<p>
实际上，去年苹果公司决定用罗马数字 X（读 ten）来命名开始，iPhone 已经步向了「命名荒」，
而进一步加剧这个情况的，则是今年的新 iPhone，由于新 iPhone 并没有巨大的变化，
所以它似乎并不足以获得一个全新的命名，比如说 iPhone Ⅺ （11）这样的称呼。
</p>
<!--3.文字效果:
a.加粗：b标签，strong标签
b标签：单纯的在样式上进行加粗
strong标签：除了将文字加粗显示外还有强调的意义
b.倾斜：i标签,em标签
em标签有强调的作用
-->
<p>实际上，去年<i>苹果公司</i>决定用罗马数字 X（读 ten）来命名开始，<em>iPhone</em> 已经步向了「<b>命名荒</b>」，
而进一步加剧这个情况的，则是今年的新 iPhone，由于新 iPhone 并没有<strong><em>巨大</em></strong>的变化，
所以它似乎并不足以获得一个全新的命名，比如说 <strong>iPhone Ⅺ</strong> （11）这样的称呼。</p>
<!--4.水平线：hr
单标签
-->
<hr />
<!--5.列表标签:ul,ol,dl
ul:无序列表
ol:有序列表
dl:自定义列表
-->
<ul>
<li>语文</li>
<p>语文是个什么样的学科。。。。</p>
<li>数学</li>
<li>英语</li>
</ul>
<ol>
<li>北京</li>
<p>北京最大的特点是雾霾~</p>
<li>成都</li>
<p>天府之国</p>
<li>大连</li>
<p>美丽的海滨城市</p>
<li>重庆</li>
<p>辣妹儿+火锅</p>
<li>青岛</li>
</ol>
<dl>
<!--dt对列表进行分组-->
<dt>A</dt>
<!--dd列举分组下的内容-->
<dd>and</dd>
<dd>are</dd>
<dt>B</dt>
<dd>big</dd>
<dd>bpdy</dd>
</dl>
</body>
</html>
图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片和超链接</title>
</head>
<body>
<!--1.图片标签:img标签
单标签
src属性：图片地址（可以是本地图片地址，也可以是远程服务器上的图片地址）
title属性：设置图片的标题(这个标题是鼠标停留在图片上等一会儿出现的文字)
alt属性：用来设置图片加载失败的时候出现的提示信息
-->
<img id="1" src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img id="2" title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img id="3" src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<img src="img/luffy4.jpg" title="路飞和艾斯" alt="加载失败"/>
<img title="宝儿姐" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175265043&di=4c1b0dd59ce4130e292cae87e40d147b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F171215%2F74-1G215200215.jpg"/>
<!--2.超链接标签:a标签
想要点击跳转的地方都可以使用超链接语法
注意：a标签的内容部分是可见的，是可以被点击
(1)href属性：跳转目标对应的地址
a.其他的网页地址 ----- 跳转
b.写本地的一个html路径 ------ 跳转
c.空 ------- 刷新当前网页(重新加载)
d.选择器 ------ 让网页跳转到指定的位置
(2)target属性：设置跳转方式
_self(默认值):在当前页中刷新出新的内容
_blank:创建一个新的页面，在新的页面中刷新出href指定的内容
注意：刷新当前网页和在当前网页中跳转到指定位置的时候，只能使用默认的_self
-->
<a target="_blank" href="http://www.baidu.com">百度一下</a>
<a href="http://www.1000phone.com">千锋</a>
<a href="01-文本标签.html">文本标签</a>
<a href="">刷新</a>
<a href="#1">第一张</a>
<a href="#2">第二张</a>
<a href="#3">第三张</a>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--表格标签:table标签、tr标签、td标签、th标签
1.标签
table标签: 表格整体（一个table标签代表一个表格）
tr标签：行(一个tr标签代表表格中的一行)
td标签: 单元格(一个td代表一个单元格)
th标签: 表头
2.属性
a.border属性: 设置表格的边框的宽度（只能作用于table）
b.bordercolor:设置边框颜色 （只能作用于table）
c.background:设置背景图片
d.bgcolor:设置背景颜色(可以作用于table\tr\td)
e.cellspacing:设置单元格与单元格之间的间距（默认是1）
f.cellpadding:设置内容和单元格之间的间距
g.width: 一般作用于某一个单元格，影响的是这个单元格对应的那一列
h.height: 一般作用于行，影响的是一行的高度
i.align：设置对齐方式(可以作用于table\tr\td)
作用于table，让整个表格在浏览器中居中
作用于tr/td，让内容在单元格中居中
-->
<table border="1" bordercolor="red" bgcolor="beige" cellspacing="0" align="center">
<!--<tr><th>成绩表</th></tr>-->
<!--第一行-->
<tr bgcolor='coral' height="50" align="center">
<!--第一行的第一个单元格-->
<td width="100">姓名</td>
<td width="60">成绩</td>
<td width="140">是否留级</td>
</tr>
<!--第二行-->
<tr height="140">
<td bgcolor="cornflowerblue" align="center">张三</td>
<!--第二行的第二个单元格-->
<td>90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr height="80">
<td>李四</td>
<td>80</td>
<!--第三行的第三个单元格-->
<td>否</td>
</tr>
</table>
<!--table>tr*3>td*4: 创建一个3行X4列的表格-->
</body>
</html>
