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的子节点。


<!--使用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>   <!--强调字体倾斜-->

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

 

posted @ 2018-07-14 16:21 静笃归心 阅读(...) 评论(...) 编辑 收藏