01-HTML深入

1.1 浏览器的工作原理

把一些标签解析成用户可视化的页面

1.2 HTML中的标签与元素

在HTML中以<xx>开始，以</xx>结束，比如<html></html>等。

标签和其内容统称为元素，比如：<xx>h5</xx>

元素可以有属性，比如 <xx src=’xxx’>h5</xx>

1.3编码

数据以什么编码存入电脑，就必须以什么编码取出（解码）。

ASCLL码

计算机编码有UTF8、GB2312

1.4 HTML文档结构

<!--文档结构是HTML5.0这个版本-->

<!DOCTYPE HTML>

<html>

    <!--head 页面的头部，一般用于设置一些参数给浏览器使用-->

    <head></head>

    <body></body>

</html>

1.4.1 Head

head一般用于设置一些信息给浏览器解析时使用。一般在head中通过meta标签来设置这些参数

<head>

        <!--1.设置页面的解码-->

        <meta charset="utf-8"/>

        <!--2.让页面适应于PC、移动端-->

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!--3.seo搜索引擎优化-->

        <mata name="keywords" content="博客园"></mata>

        <mata name="description" content="米商城直营小米公司旗下所有产品，囊括小米手机系列小米Note 3、小米8、小米MIX 2S，红米手机系列红米5 Plus、红米6 Pro，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。"></mata>

        <!--description，和上面的keywords一样，是用户不查看源代码看不到的，而且也是对于一个网页的简要内容概况。
         不同的是，keywords是由几个词语的组成的，而description则是完整的一句话。description一般不超过150个字符，描述内容要和页面内容相关。
         用法：<meta name=”Description” Content=”你网页的简述”>-->

        <title>小米商城</title>

    </head>

注：快速构建HTML结构的快捷键：!+Tab

1.5 标签的分类

1.5.1 快标签（block tag）

【1】独占一行

【2】能设置宽高

无语义标签：没有特定的用途 => 什么都可以显示 => 用于包含别的标签 => 一般用于容器容纳别的标签。

有语义标签：有特定的用途

1.5.1.1 DIV

div 是无语义标签，一般用于页面架构性布局（DIV+CSS）

<div id="top">

        aaaaa

</div>

1.5.1.2 H1-H6

有语义标签，专门用于显示标题的。

<!--2 标题-->

        <h1>我是h1标题</h1>

        <h2>我是h2标题</h2>

        <h3>我是h3标题</h3>

        <h4>我是h4标题</h4>

        <h5>我是h5标题</h5>

        <h6>我是h6标题</h6>

1.5.1.3 列表相关

ol/li 表示有序列表（ordered list），有语义标签。li一定是作为ol的子节点。

ul/li 表示无序列表（unordered list）有语义标签，li一定是作为ol的子节点。


<body>

<ul>

    <li>完美生活</li>

    <li>蓝莲花</li>

    <li>一起摇摆</li>

</ul>

</body>

<!--ul>li(然后按下Tab键)

含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签-->

<ul>

    <li></li>

</ul>

<!--ul>li*3(然后按下Tab键) 含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签标签-->

<ul> 

   <li></li> 

   <li></li>

   <li></li> 

</ul>

<!--<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始-->

<body>

<ol>

    <li>完美生活</li>

    <li>蓝莲花</li>

    <li>一起摇摆</li>

</ol>

</body>

dl/dt+dd 表示定义列表，有语义标签，一般dd可以有多个

<!--定义列表-->

<!--<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。-->

<dl>

<dt>列表标题</dt>

<dd>列表内容</dd>

<dd>列表内容</dd>

...

</dl>

        <!--defined list-->

        <dl>

            <!--defined title-->

            <dt>程序员鼓励师</dt>

            <!--defined description-->

            <dd>1、长相清新，声线甜美，微笑常在，人见人爱；</dd>

            <dd>2、善于倾听，善不善沟通不重要，能忍受IT工程师死宅无法交流的性格；</dd>

            <dd>3、耍不耍脾气不重要，要善于发现每一个程序暖男的天性，成功驯服；</dd>

            <dd>4、了解互联网，懂科技，不然聊起来云里雾里，工程师会更受打击。</dd>

        </dl>

1.5.1.4 Table

table是由行（row）构成、行是由单元格（table-cell）构成。

<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
<td>…</td>：表格的一个单元格，一行中包含几对<td>…</td>，说明一行中就有几列。
<th>…</th>：表格的头部的一个单元格，表格表头。
表格中列的个数，取决于一行中数据单元格的个数。
table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

表头，也就是th标签中的文本默认为粗体并且居中显示

<!--快捷方法：table>tr*3>td*3-->

<!--4. table-->

        <table border="1"  <!--添加边框-->>

            <tr>

                <td>aa</td>

                <td>bb</td>

                <td>cc</td>

            </tr>

            <tr>

                <td>aa</td>

                <td>bb</td>

                <td>cc</td>

            </tr>

            <tr>

                <td>aa</td>

                <td>bb</td>

                <td>cc</td>

            </tr>

        </table>

1.5.1.4.1 单元格跨列

colspan一个单元格向右占多个列。

<table border="1">

            <tr>

                <td>11</td>

                <td colspan="2">22</td>

            </tr>

            <tr>

                <td>aa</td>

                <td>bb</td>

                <td>cc</td>

                <td>cc</td>

            </tr>

        </table>

1.5.1.4.1 单元格跨行

rowspan单元格可以向下跨越多个行，被占的单元格向右挤。

<table border="1">

            <tr>

                <td>11</td>

                <td>22</td>

                <td>33</td>

            </tr>

            <tr>

                <td rowspan="2">aa</td>

                <td>bb</td>

                <td>cc</td>

            </tr>

            <tr>

                <td>bb</td>

                <td>cc</td>

            </tr>

        </table>

1.5.1.5 P

标签表示段落

<!--p 表示段落-->

        <p>十年后的今天，世界经济复苏的势头远不如人们期许的那样强劲，信心的极端重要性并未减弱。然而，正如国际货币基金组织总裁拉加德所言，“笼罩世界经济的乌云正变得越来越重，最大和最重的乌云是信心的恶化”。恶化人们对世界经济发展前景信心的源头来自何方？只要随手翻一翻各国的报章，读一读那些有关美国同贸易伙伴大打贸易战忧心忡忡的报道，答案再清楚不过地摆在人们面前。</p>

        <p>国际贸易是世界经济增长的重要一环，美国公开违反世贸规则，大范围挑起贸易争端，势必破坏全球贸易秩序，危害世界经济增长。世界银行上月初发布报告指出，全球关税广泛上升将会给全球贸易带来重大负面影响，对新兴市场和发展中经济体的影响尤为明显，特别是那些与美国贸易或金融市场关联度较高的经济体。权威人士预测，如果关税回到GATT/WTO（关贸总协定和世贸组织）之前的水平，世界经济将立即收缩2.5%，全球贸易量将削减60%以上，负面影响超过2008年国际金融危机。</p>

        <!--错误的用法：不能再p标签中再放块标签-->

        <p>

            <div>test</div>

        </p>

1.5.1.6 br

br表示换行，<br /> 我们把这种中间没有内容的标签称为开闭同体标签。

1.5.2 行内标签

【1】在一行内显示

【2】不能设置宽高，内容撑开宽高

1.5.2.1 span

span 是无语义行内标签，一般作为容器使用。

<span style="background: red;height: 100px;">Lorem ipsum dolor sit amet.</span>TEST

1.5.2.2 a

a 表示链接

1.5.2.2.1 路径相关

<!--链接到站外-->

        <a href="http://www.baidu.com/">百度</a>

        <!--站内链接-->

        <!--绝对路径：从盘符开始的路径叫做绝对路径-->

        <a href="C:\Users\Administrator\Desktop\index-gbk.html">index-gbk</a>

        <!--相对路径-->

        <!--当前目录：. -->

        <a href="./index.html">index</a>

        <a href="index.html">index</a>

相对路径 . 表示当前目录， .. 返回上一级目录。链接找资源时，一定先从当前目录开始找，所以当前目录可以省略。

1.5.2.2.3 锚点

通俗地说，锚点就是指在页面内做调整

<div id="top"></div>

        <div>

            <a href="#early-exp">早年经历</a><!--点击跳转到p标签的早年经历-->

            <a href="#professional-exp">演艺经历</a>

            <a href="#personal-life">个人生活</a>

            <a href="#musics">音乐作品</a>

        </div>

        <p id="early-exp">早年经历Lorem</p>

        <p id="professional-exp">演艺经历Lo</p>

        <p id="personal-life">个人生活Lorem ipsum dolor </p>

        <p id="musics">音乐作品Lorem </p>

        <div>

            <a href="#top">TOP</a><!--点击回到顶部-->

        </div>

1.5.2.3 Img

专门用于显示图片。

1.5.2.3.1常用属性

alt：当图片加载失败时的提示文本

title：当鼠标悬停时的提示文本

<img alt="阿黛尔" title="阿黛尔" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=d6e1fdf69325bc312b5d069e66e4ea8c/6f061d950a7b020880e017d968d9f2d3572cc8d9.jpg" />

1.5.2.4 var/strong/em

var、strong、em 本意表示强调作用，有语义标签，强调的表现形式不一样，var/em 斜体强调，strong加粗强调。

<var>我是var</var>  <!--强调字体下斜-->

<strong>我是strong</strong>   <!--强调字体加粗-->

<em>我是em</em>   <!--强调字体倾斜-->

在实际开发过程中，一般来说都不用他们的本意，而是把他们降级成一般的无语义行内标签使用

01-HTML深入的更多相关文章

01.SQLServer性能优化之----强大的文件组----分盘存储
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢前天有学弟问逆天:“逆天,有没有一种方 ...
用Kotlin创建第一个Android项目（KAD 01）
原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...
Java企业实训 - 01 - Java前奏
前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...
Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
0042 MySQL学习笔记-入门--01
基本概念: 数据库DB(database): 数据的仓库,数据的集合,是数据的一种结构化的存储数据库管理系统DBMS(database management system): 管理数据库的一套软件 ...
Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1
最近在myeclipse上创建maven类型的web项目的时候,出现了一个错误. ArtifactTransferException: Failure to transfer org.apache.o ...
Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
异步编程系列第01章 Async异步编程简介
p { display: block; margin: 3px 0 0 0; } --> 2016.10.11补充三个月过去了,回头来看,我不得不承认这是一系列失败的翻译.过段时间,我将重新翻 ...
【干货分享】前端面试知识点锦集01（HTML篇）——附答案
一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

随机推荐

matlab练习程序（全景图到穹顶图）
这个程序我最初是用FreeImage写的,这两天改成了matlab,再不贴上来,我就要忘了. 看到一篇文章有这样的变换,挺有意思的,就拿来试了一下,文章点此. 全景图到穹顶图变换,通俗的说就是将全景图 ...
js原形对象
function clock(hour,minute,second){ this.constructor = clock ;//默认实现 /**/ } clock.prototype={ constr ...
Siebel escript学习笔记
Siebel(escript)的学习:1.Siebel的数据类型Primitive(原始的)---Number,Integer,Hexadecimal(十六进制),Octal(八进制),Floatin ...
c#MD5加密解密
MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由MIT Laboratory for Computer Science和RSA Data Secur ...
May 21st 2017 Week 21st Sunday
The smallest deed is better than the greatest intention. 最微小的行动胜过最伟大的打算. Several years ago, just aft ...
C++中的RAII(转)
转自https://blog.csdn.net/wangshubo1989/article/details/52133213 有很多东西我们一直在用,但是不知道他的名字. 什么是RAII? RAII是 ...
多层感知机训练minist数据集
MLP .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1p ...
python-文件基本操作（二）
在上一篇文章中,简单介绍了打开文件的方法以及关于读.写.追加的操作,点击此处查看. 在此篇文章中,继续介绍另外一种打开文件的方法和几种同时读写的模式. 一.打开文件方法:with 使用file()或o ...
【luogu P1494 [国家集训队]小Z的袜子】题解
题目链接:https://www.luogu.org/problemnew/show/P1494 #include <cstdio> #include <algorithm> ...
【luoguP1219】【USACO】八皇后
P1219 八皇后题目描述检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序 ...