2018-09-17 ----html总结

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网页结构  
下面是一个可视化的网页结构：  

![](http://ogjdtuxan.bkt.clouddn.com/html_struct.png)  

其中白色区域才是在网页中可见的部分  

##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&lt;head>元素        

&lt;head&gt; 元素包含了所有的头部标签元素。在 &lt;head&gt;元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: &lt;title>, &lt;style>, &lt;meta>, &lt;link>, &lt;script>, &lt;noscript>, and &lt;base>.     

|标签 |描述|
|---|---|
|&lt;title>|    定义了文档的标题
|&lt;base>| 定义了页面链接标签的默认链接地址
|&lt;link>  |定义了一个文档和外部资源之间的关系
&lt;meta>|  定义了HTML文档中的元数据
&lt;script>|    定义了客户端的脚本文件
&lt;style>| 定义了HTML文档的样式文件 

### &lt; 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中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行、空格、缩进无效)
                 但是可以通过一些特殊的符号，来产生特定的效果
                 
            空格符：&nbsp;
            强制换行:<br />
        -->
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;随着今年苹果秋季发布会的闭幕，从 1（初代 iPhone）到 10（iPhone X），<br />
            新 iPhone 的命名即将用尽包括数字 10 以内的所有数字，<br />
            对于苹果来说，从明年开始，为新 iPhone 命名将会是一件头疼的事情。2&divide;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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容

  • web学习之html基础（一）
    前言 本系列文章主要是基于W3school这个学习网站来总结的，之所以会自己总结一番，一来是因为网站中的实例效果，...
    AR7_阅读 4,044评论 4赞 70
  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,229评论 1赞 41
  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,969评论 3赞 119
  • 我终于辞职了
    终于，我终于辞职了。在经过了漫长的思想斗争之后我终于辞职了。 在这里不得不记录一下我的工作历程，2017年3月份的...
    小妖白桃阅读 1,996评论 11赞 16
  • 高质量陪伴20分钟胜过应付式陪伴两小时（宝宝睡觉问题）
    大栋从小就是个睡觉困难户。月子里每天只睡15小时，之后基本每天只睡11-12小时。他13个月时，我无法忍受夜晚时他...
    水吉阅读 348评论 0赞 1