01-HTML深入
2018-07-17 04:16:48来源：博客园 阅读 ()
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的子节点。
<!--使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。li是英文list item的缩写-->
<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> <!--强调字体倾斜-->
在实际开发过程中，一般来说都不用他们的本意，而是把他们降级成一般的无语义行内标签使用
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascadin 2020-01-16
- 深入学习CSS中如何使用定位 2019-12-29
- Web基础了解版01-html-css 2019-12-17
- 深入了解CSS中盒子模型 2019-12-05
- 【面经系列】一线互联网大厂前端面试技巧深入浅出总结 2019-11-22
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
