HTML教程

  一、HTML基本语法

1、<常规标记>也叫双标记

<标记></标记>

<标记 属性=“属性值” 属性=“属性值”></标记>

标记也可以叫标签或叫元素

例如:<head></head>

2、空标记也叫单标记

<标记/>

<标记 属性=“属性值”/>

例如:<br/>

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <center>
            锣鼓喧天,<br/>黄金万两。
        </center>
    </body>
</html>

二、常用标签

1、文本标题(h1-h6)

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题H3</h3>

<h4>四级标题H4</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

注:文本标题标签自带加粗,有自己的文本大小,并且独占一行,有默认间距

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    文本
</body>
</html>

2、段落文本(p)

<p>段落文本内容</p>

标识一个段落(段落与段落之间有段间距)

3、换行(br)

<br />

换行是一个空标记(强制换行)

4、水平线

<hr />空标记

5、加粗有两个标记(推荐strong)

<b>加粗内容</b>只是显示加粗

<strong>强调的内容</strong>突出的文本

6、倾斜有两个标记(推荐em)

<em>强调文本</em>

<i>倾斜文本</i>

7、删除线有两个标记(推荐del)

<s>文本</s>删除线

<del>文本</del>删除线

8、扩展

<u>文本</u>下划线

<sub></sub>下标

<sup></sup>上标

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>“秦始皇”穿越街头推广反诈APP:下载会被士兵“拖走”</title>
</head>
<body>
    <h1>“秦始皇”穿越街头推广反诈APP:下载会被士兵“拖走”</h1>
    <p>
        近日,陕西西安,一段“秦始皇”<sup>[1]</sup>在兵马俑<sub>[2]</sub>广场宣传国家反诈中心APP的视频走红。
        <br/>
        <strong>
            由演员扮演的“秦始皇”随机问路人是否下载反诈APP,未下载者会被士兵“拖走”
        </strong>
    </p>
    <p>
        视频策划方临潼区融媒体相关负责人称,希望利用“秦始皇”这个IP,
        以地域文化和诙谐幽默的方式,<br/><strong><em>传递正能量</em></strong>
    </p>
    <p>
        此前,他们还策划过秦始皇乘坐地铁9号线、秦始皇邀您一起打疫苗等几部短剧,
        累计播放量已经超过3个亿。
    </p>
    <p>
        国家反诈中心APP是由公安部推出的一款手机防骗软件,集资源整合、情报研判、侦查指挥为一体,在打击、防范、治理电信网络诈骗等新型违法犯罪中发挥着重要作用。
    </p>
    <p>
        门票不要<s>998</s>,不要<del>99</del>,只要<b><u>9.9</u></b>
    </p>
    <hr/>
</body>
</html>

三、百度词条案例

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML5</h1> 
    <p>
        本词条由<strong>“科普中国"科学百科词条编写与应用工作项目</strong>审核。
    </p>
    <p>
        HTML5是构建Web内容的一种语言猫述方式,HTML5是联网的下一代标准,
        是<strong>构建以及呈现互联网容的一种语言方式</strong>,被认为是互联网的孩心技术之一。
        HTML产生于1990年,1997年HTML4成为互联网际准,并广泛应用于互联网应用的开发。
    </p>
    <p>
        HTML5是Web中核心语言HTML的范,<strong><em>用户使用任何手段进行网项时看到的
        内原本都是HTML格的</em></strong>,在测器中通过一些技术处理将其转换成为了可
        识的信息,HTML5从前<del>HTML4.01</del>的基础上进行了一定的改进,虽然技术人
        员在开发过程中可能不会将这些新技术投入应用,
        但是对于该种技术的新特性,网开发技术人员是必须要有所了解的。<sup>[1-2]</sup>
    </p>
    <h2>Html5的新特性</h2>
    <hr/>
    <p>
        HTML5将Web带入一个成熟的应用平台,在这个平台上,<strong>视频、音频、图像、
        动画以及与设备的交互</strong>都进行了规范。
    </p>
    <h3>智能表单</h3>
    <p>
        表单是实现用户与页面后合交互主要组成部分,HTML5在表单的设计上功能便加强大,
        input类型和属性的多样性大大增了HTML可表达的表单形式,再加上新增加的一些表单
        标签,使得原本需要javaScript来实现的控件可以直接使用HTML5的表单来实现:
        一些如内容提示、焦点处理、数验证等功能,也可以通过THML5的智能表单属性标签
        来完成。<sup>[6]</sup> 
    </p>
    <h3>多媒体</h3>
    <p>
        HTML5最大特色之一就是支持音频视频,在通过增加了audio、video两标签来实现
        对多媒体中的音频、视频使用的 支持,只要在Web网页中入这两个标签,
        而无需第三方播件如Flash就可以实现音视频的播放功能。HTML5对音频、视频
        文件的支持使得浏览器摆脱了对插件的依赖,加快了页面的加载度,扩展了互联
        网多媒体技术的发展空间.
    </p>
</body>
</html>

四、hr属性的应用

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="green">
    <hr color="blue">
    <hr color="red">

    <hr color="green" width="300">
    <hr color="green" width="600">
    <hr color="red" width="300" align="left">
    <hr color="red" width="300" align="right">

    <hr/>
    <hr noshade>
    <hr noshade="noshade">
</body>
</html>

五、特殊符号

特殊符号

解释

尖角号

<左尖角号

>右尖角号

空格

 该空格占据宽度受[字体] 影响明显而强烈

 占据的宽度正好是1个中文宽度且基本上不受字体影响

版权

©Ⓒ

商标

™TM(上标)

®Ⓡ

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        上一节中讲的内容是hr,用法是:<hr noshade/>
    </p>
    <p>
        <hr noshade/>
    </p>
</body>
</html>

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
          赵钱孙李,周吴郑王(不推荐)
    </p>
    <p>
         赵钱孙李,周吴郑王
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, delectus ipsa eius atque recusandae deleniti sapiente? Minus, nulla dicta necessitatibus, odio id possimus facere voluptatem eum doloribus dolor, debitis dolorum.
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        &copy;
    </p>
    <p>
        &trade;
    </p>
    <p>
        &reg;
    </p>
    <p>
        &#128512
    </p>
</body>
</html>

 六、div和span标签

div标签,没有具体含义,用来划分页面的区域,独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>11111</div>
    <div>22222</div>
    <div>33333</div>
</body>
</html>

span标签,没有实际意义,主要应用在对于文本独立修饰的时候,内容有多宽就span,占用多宽的空间距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>体育<span style="color: gray;">sports</span></h3>
</body>
</html>

七、列表

无序列表

有序列表

自定义列表

<ul>

        <li>无序列表</li>

        <li>无序列表</li>

</ul>

<ol type=”A”start=”4”>

        <li>有序列表</li>

        <li>有序列表</li>

</ol>

type类型 start开始

<dI>

        <dt>可以是文字也可以</dt>

        <dd>相关文字</dd>

</dl>

1、有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 注释:Ctrl+/ -->
    <!-- 
        1、li里面可以随意放标签,但是ol里面只能放li。
        2、数字是自动生成的。 
        3、type:1,a,A,i,I
           start:取值只能是一个数字
    -->
    <ol>
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
    <ol type="1">
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
    <ol type="a">
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
    <ol type="A">
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
    <ol type="i">
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
    <ol type="I">
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
    <ol type="a" start="3">
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
    <ol type="a" start="27">
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
</body>
</html>

2、无须列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        快捷键:ul>li*3回车
     -->
     <!-- 
        1、ul里面只能放li,li里面可以放其他标签
        2、默认的是黑色的实心圆
        3、type:disc、circle、square、none
      -->
    <ul>
        <li>蒸羊羔</li>
        <li>蒸熊掌</li>
        <li>烧花鸭</li>
    </ul>
    <ul type="disc">
        <li>蒸羊羔</li>
        <li>蒸熊掌</li>
        <li>烧花鸭</li>
    </ul>
    <ul type="circle">
        <li>蒸羊羔</li>
        <li>蒸熊掌</li>
        <li>烧花鸭</li>
    </ul>
    <ul type="square">
        <li>蒸羊羔</li>
        <li>蒸熊掌</li>
        <li>烧花鸭</li>
    </ul>
    <ul type="none">
        <li>蒸羊羔</li>
        <li>蒸熊掌</li>
        <li>烧花鸭</li>
    </ul>
</body>
</html>

3、自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>
</body>
</html>

八、图片标签的路径

路径分类:绝对路径、相对路径

1、绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的E:\book\网页布局代码\第2章”目录下,那么“bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg”。

注意:绝对路径在实际的开发过程中很少去使用,如果使用“E:\book\网页布代码第2章\bg.jpg”来指定背景图片的位置,在自己的计算机上浏览可能会一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了,绝对路径可以使用“\”或“/”字符作为目录的分隔字符

2、相对路径

相对路径,就是相对于自己的目标文件位置

1)当当前文件与目标文件在同一目录下,直接书写目标文件的文件名+扩展名

<img src="pic4.gif"/>

2)当当前文件与目标文件在不同目录下

./:当前文件夹

../:上一级文件夹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        同级目录:./
        上级目录:../
     -->
    <img src="code.png">
    <img src="./code.png">
    <img src="../image/1.png">
    <!-- 
        全路径:运行--右键--View In Browser
     -->
    <img src="D:\Documents\VSCode\code\code.png">
</body>
</html>

九、图片标签的属性

<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后(加载失败)的提示信息" width="200px" height="200px"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        只有width或height图片会等比例缩放
     -->
    <img src="code.png" title="图片的提示信息" alt="图片不显示之后(加载失败)的提示信息" width="200px" height="200px"/>
    <img src="1.png" title="图片的提示信息" alt="图片不显示之后(加载失败)的提示信息" width="200px" height="200px"/>
    <img src="code.png" width="200px"/>
    <img src="code.png" height="200px"/>
</body>
</html>

十、费曼技巧:最强的学习方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>费曼技巧:最强的学习方法</title>
</head>
<body>
    <h1>费曼技巧:最强的学习方法</h1>
    <p>
        作者:秋小曦 2017.04.10 14:12:19 字数 1,086 阅读 19,865
    </p>
    <h3>一、“费曼技巧”的概念</h3>
    <p>
        来源,这个技巧的灵感,源于诺贝尔物理奖获得者,理查德·费曼(Richard Feynman)。
        在他的自传里,他提到曾纠结于某篇艰深的研究论文。他的办法是,
        仔细审阅这篇论文的辅助材料(supporting material) ,
        直到他掌握了相关的知识基础、足以理解其中的艰深想法为止。
    </p>
    <img src="../image/费曼.png" title="理查德·费曼(Richard Feynman)"/>
    <p>
        费曼技巧,亦同此理。对付一个知识枝节繁杂如发丝、富有内涵的想法,应该分而化之,
        切成小知识块,再逐个对付,你最终能填补所有的知识缺口,否则,
        这些缺口将阻挤你理解这个想法。
    </p>
    <p>
        <strong>费曼技巧”是一种学习方法,是一种以教促学的学习方法,</strong>
        是通过假定模拟讲课的方式而将要学习的内容讲给自己听。
    </p>
    <h3>二、“费曼技巧”的实施步骤:</h3>
    <p>
        第1步:选择一个你想要理解的概念选择一个你想要理解的概念,
        然后拿出一张白纸,把这个概念写在白纸的最上边
    </p>
    <p>
        第2步:<strong>设想一种场景,你正要向别人传授这个概念(模拟教学) </strong>
        在白纸上写下你对这个概念的解释,就好像你正在教导一位新接触
        这个概念的学生一样,当你这样做的时候,你会更清楚地意识到关
        于这个概念你理解了多少,以及是否还存在理解不清的地方。
    </p>
    <img src="../image/费曼技巧.png" alt="">
    <h3>三、掌握“费曼技巧”需要注意的关键点</h3>
    <p>
        费曼技巧之所以有效,很大一部分原因是由于其充分动用了我们的大脑,
        我们会提前对知识做一个总结,归纳,输出,这也是为什么我们给别人
        解释过某些事情后对之理解更深的原因所在。费曼技巧本质上就是把知
        识讲解给自己听,这个转换的过程中涉及到了几个比较重要的关键点,
        有利于把资料转换为知识。
    </p>
    <p>
        1.<strong>挑重点</strong>:人的精力毕竟是有限的,成功的人也总
        是挑重要的事情来干。我们学生时代最兴奋的事情莫过于老师划重点了。
        但你有没有想过自己划重点的,在知识的阐述过程中有利于分清主次,重点攻克。
    </p>
    <img src="../image/敲黑板.png" alt="">
    <p>
        2.<strong>简化</strong>:看起来跟第一点相似,但其实两点是在两
        个层面上进行的。一个是在知识点中挑选重要的。另一个是在挑出的知
        识点中对资料进行简化,可视化,已达到即使外行人也能了解的程度。
    </p>
    <p>
        3.<strong>总结和连接</strong>:在输出的时候毫无疑问会和你大
        脑原有的知识进行比对,进而比较分析,加深理解。
    </p>
    <p>
        <strong>费曼学习法的具体步骤,很简单</strong>
    </p>
    <ol>
        <li>确定学习目标;</li>
        <li>模拟教学学习法;</li>
        <li>回顾;</li>
        <li>简化。</li>
    </ol>
</body>
</html>

十一、超链接标签

能够实现不同页面的跳转

<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何打开文档">内容</a>

target属性:规定在何处打开文档。

A. target="_self"默认值

B. target="_blank"新窗口打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="16-费曼技巧:最强的学习方法.html" target="_blank">费曼技巧:最强的学习方法</a>
    <a href="http://www.baidu.com" title="百度查询" target="_blank">
        <img src="code.png" alt=""/>
    </a>
</body>
</html>

十二、table表格的基本结构

行、列、单元格

特点:通常情况下,同行的高度一致,同列的宽度一致

数据表格的创建:

<table>     <!-- 创建表格  -->
    <tr>    <!-- tr表示行  -->
        <td>1</td>    <!-- td表示单元格  -->
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        创建table快捷键:
        table>tr>td*2
        table>(tr>td*2)*2
        table>tr*2>td*2
     -->
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

十三、table表格的相关属性

1、宽度 width

2、高度 height

3、边框 border

4、边框颜色 bordercolor

5、背景颜色 bgcolor

6、水平对齐 align="left或right或center"

7、cellspacing="单元格与单元格之间的间距"

8、cellpadding="单元格与内容之间的空隙"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        创建table快捷键:
        table>tr>td*2
        table>(tr>td*2)*2
        table>tr*2>td*2
     -->
    <!-- width px,百分比%(相对于父元素的) -->
    <!-- height px,百分比%(相对于父元素的) -->
    <table border="1" width="50%" height="500px" align="center"
    bordercolor="red" bgcolor="green" cellspacing="0" cellpadding="10">
        <tr>
            <td>11111</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

十四、行tr属性

1、高度 height

2、背景颜色 bgcolor

3、文字水平对齐 align="left或right或center"

4、文字垂直对齐 valign="top或middle或bottom"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="300" height="300" bgcolor="yellow" align="center">
        <tr bgcolor="orange" height="100" align="center" valign="middile">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

十五、单元格td属性

1、宽度 width

2、高度 height

3、背景颜色 bgcolor

4、文字水平对齐 align="left或right或center"

5、文字垂直对齐 valign="top或middle或bottom"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        td:如果一个单元格设置宽度,影响的是整个一列的宽度
        td:如果一个单元格设置高度,影响的是整个一行的高度
     -->
    <table border="1" width="300" height="300" bgcolor="yellow" align="center">
        <tr>
            <td width="200">1</td>
            <td height="200">2</td>
        </tr>
        <tr>
            <td bgcolor="red">3</td>
            <td align="right" valign="top">4</td>
        </tr>
    </table>
</body>
</html>

十六、表格合并列

colspan="所要合并的单元格的列数",必须给td。

rowspan="所要合并的单元格的行数",必须给td。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="300" height="300">
        <tr>
            <td>1</td>
            <td colspan="2" rowspan="2">2</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td>4</td>
            <!-- <td colspan="2">5</td> -->
            <!-- <td>6</td> -->
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

十七、表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
        <tr height="50" align="center">
            <td width="100">会员姓名</td>
            <td width="150"></td>
            <td width="100">出生日期</td>
            <td width="150"></td>
        </tr>
        <tr height="50" align="center">
            <td>身份证号</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>通信地址</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>联系电话</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>会员卡号</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
    </table>
</body>
</html>

十八、表单标签

表单的作用:收集用户信息。

<form method="get或者post" action="向何处发送表单数据">

        <input />

        A.属性 type定义输入框的类型

                a) 文本框 type="text" 密码框 type="password"

                b) 提交框 type="submit"和 <button>提交钮</button> 一样

                c) 按钮框 type="button"单纯的按钮

                d) 重置框 type="reset"清空的效果

        B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上

        C.属性 name必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器

        D.属性 value

</form>

Form当中method的post和get的区别?

1.get是从服务器上获取数据,post是向服务器传送数据

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。

4.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4 (Internet Information Service 互联网信息服务)中最大量为80KB,IIS5中为100KB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        用户信息:<input type="text" placeholder="请输入您的用户名" name="用户名">
        <br/>
        密码:<input type="password" placeholder="请输入您的密码" name="密码">
        <br/>
        <!-- <input type="submit" name="登录"> -->
        <button type="submit">登录</button>
        <!-- 提交信息到action指定的地址 -->
    
        <input type="reset" value="重新输入一遍">
        <button type="reset">重新输入一遍</button>
        <input type="button" value="aaaa">
    </form>
</body>
</html>

十九、CSS样式表

英文全名:cascading style sheets(百度百科)=== cascading style sheet 层叠样式表WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。

目前推荐遵循的是W3C发布的CSS3.0

用来表现XHTML或者XML等样式文件的计算机语言。

1998年5月21日由w3C正式推出的css2.0

CSS语法:

1) 每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值

2) 属性必须放在花括号中,属性与属性值用冒号连接。

3) 每条声明用分号结束。

4) 当一个属性有多个属性值的时候,属性值与属性值不分先后顺序,用空格隔开

5) 在书写样式过程中,空格、换行等操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
           color: red;
        }
        h3{
            color:blue;
        }
    </style>
    <style>
        h2{
            color:yellow;
        }
    </style>
</head>
<body>
    <h1>11111111</h1>
    <h2>22222222</h2>
    <h3>33333333</h3>
</body>
</html>

二十、CSS外部样式表

扩展知识点:link和import之间的区别?

差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。

差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览import加载CSS的页面时开始会没有样式 (就是闪烁),网速慢的时候还挺明显。

差别3:兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的3才能识别,而link标签无此问题。

index.css

h1{
    color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 方法一 -->
    <!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
    <!-- 方法二 -->
    <style>
        @import url(css/index.css);
    </style>
</head>
<body>
    <h1>111111111111</h1>
</body>
</html>

二十一、CSS行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color:red;">1111111-aaa</h1>
    <h1 style="color:blue;">1111111-bbb</h1>
    <h2 style="color:yellow;">2222222</h2>
    <h3>3333333</h3>
</body>
</html>

二十二、CSS样式表的优先级

index-26.css

div{
    color: red!important;
    background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index-26.css"/>

    <style>
        div{
            color:yellow;
        }
    </style>
</head>
<body>
    <!-- 
        就近原则
        !important>行内>内部>外部
        important最高
     -->
    <div style="color:blue;">11111111</div>
</body>
</html>

二十三、标签的选择器

为什么要用选择器?

要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

1、选择器

元素选择符/类型选择符 (element选择器 ) 如: div{width:100px; height:100px; background:red;}

语法:元素名称{属性:属性值;}如: div,p,h1,img,a,span,i,em,strong,b,ul,li,ol,li....等

说明:

a)元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body,div,p,img,em,strong,span....等.

b)所有的页面元素都可以作为选择符:

用法:

1)如果想改变某个元素得默认样式时,可以使用类型选择符,

(如:改变一个div、p、h1样式)

2)当统一文档某个元素的显示效果时,可以使用类型选择符

(如:改变文档所有p段落样式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: yellow;
            color: red;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>
    <div>111111111</div>
    <div>222222222</div>
    <h1>3333333333</h1>
    <p>4444444444</p>
</body>
</html>

二十四、class选择器/类选择器

语法:class名{属性: 属性值}

说明:

A)当我们使用class选择符时,应先为每个元素定义一个class名称

B)class选择符的语法格式是:

如: <div class="top"></div>

.top{width:200px; height:100px; background:green;}

用法:class选择符更适合定义一类样式;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ibm{
            background-color: blue;
        }
        .cm{
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 
        两个类选择器有相同的属性:就近原则(在style中)
     -->
    <div>11111111111</div>
    <div class="ibm">22222222222</div>
    <div class="ibm cm">33333333333</div>
    <div class="ibm">444444444444</div>
    <div>555555555555</div>
</body>
</html>

二十五、id选择器

语法:#id名{属性: 属性值;}

说明:

A)当我们使用id选择符时,应该为每个元素定义一个id属性

如:<div id="box"></div>

B)id选择符的语法格式是“#”加上自定义的id名

如:#box{width:300px; height:300px;}

C)起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)

如:head标记

D)一个id名称只能对应文档中一个具体的元素对象。(唯一性)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            background-color: red;
        }
        #box2{
            background-color: yellow;
        }
        #box3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- box1 box2:不是box1和box2 -->
    <div id="box1 box2">11111111</div> 
    <div id="box2">22222222</div>
    <div id="box3">33333333</div>
</body>
</html>

二十四、*通配符/通配选择器

语法:*{属性:属性值;}

说明:通配选择符的写法是“*”,其含义就是所有元素。

*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /* margin:外边距 */
            margin: 0;
            /* padding:内边距 */
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <div>1111111</div>
    <ul>
        <li>111111111</li>
        <li>222222222</li>
        <li>333333333</li>
    </ul>
</body>
</html>

二十五、群组选择器、包含选择器/后代选择器

群组选择器

语法:选择符1,选择符2,选择符3.....{属性: 属性值;}例: #top1,#nav1,h1{width:960px;}

说明:当有多个选择符应用相同的声明时,可以将选择符用“,”分隔的方式,合并为一组。

margin:0 auto;实现盒子的水平居中

包含选择器/后代选择器

语法:选择符1 选择符2 {属性: 属性值;}

说明:含义就是选择符1中包含的所有选择符2;

用法:当我的元素存在父级元素的时候,我要改变自己本身的样式,可以不另加选择符,直接用包含选择器的方式解决。

如:结构:<ul class="list">

                        <li></li>

                        <li></li>

                        <li></li>

                  </ul>

样式:.list li{background:red;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{
            background-color: yellow;
        }
        p{
            background-color: yellow;
        }
        h1{
            background-color: yellow;
        } */
        div,p,h1,.box{
            background-color: yellow;
        }
        /* 群组选择器:提出公共代码,节约代码量 */
    </style>
</head>
<body>
    <div>11111111</div>
    <p class=".box">1111111111111</p>
    <h1>11111111</h1>
    <div>
        33333333333
        <p>444444444</p>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器,包含选择器 */
        div p{
            background-color: yellow;
        }
        p b{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>1111111111</p>
    </div>
    <p>22222222222</p>
    <p>
        <b>333333333</b>
    </p>
    <div>
        <b>444444444</b>
    </div>
</body>
</html>

二十六、伪类选择器

语法:

a:link{属性: 属性值;}超链接的初始状态

a:visited{属性: 属性值;}超链接被访问后的状态

a:hover{属性: 属性值;}鼠标悬停,即鼠标划过超链接时的状态

a:active{属性: 属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态

link--visited--hover--active。

说明:

A)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:a:link,a:visited,a:hovera:active,错误的顺序有时会使超链接的样式失效

B)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;

例如:a{color:red;} a:hover{color:green;)}表示超链接的初始和访问过后的状态一样,鼠标划过的状态和点击时的状态一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始状态 */
        a:link{
            color: yellow;
        }
        /* 访问之后 */
        a:visited{
            color:red;
        }
        /* 鼠标放上 */
        a:hover{
            color:orange;
        }
        /* 点击激活 */
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

二十七、新闻导航案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a:link{
            background-color: black;
            color:white;
        }
        a:visited{
            background-color: black;
            color:white;
        }
        a:hover{
            background-color: red;
        }
        a:active{
            background-color: red;
        } */
        a{
            background-color: black;
            color: white;
        }
        a:hover{
            background-color: red;
        }
        .home{
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="" class="home">首页</a>
    <a href="">国内</a>
    <a href="">国外</a>
    <a href="">军事</a>
    <a href="">财经</a>
</body>
</html>

3.12 31-35

3.13 36-40

3.14 41-45

3.15 46-50

3.16 51-55

3.17 56-75

3.18 76-95

3.19 95-100

3.20 100-105

3.21 106-110

3.22 111-115

3.23 116-120

3.24 121-140

3.25 141-160

3.26 161-165

3.27 166-170

3.28 171-175

3.29 176-180

3.29 181-182

3.30 1.1-01--1.2-02

3.31 1.2-03--1.3-02-1

4.1 1.3-02-2-1.6-03

4.2 1.6-04--2.01-3

4.3 2.01-4--3.01

4.4 3.02--3.05

4.5 3.06--4.01

4.6 4.02-4.05

4.7 4.06-5.02

4.8 5.03--6.11

4.9 6.12--7.10

4.10 7.11--7.14

4.11 7.15-7.18

4.12 7.19-03

4.13 04-07

4.14 08-11

4.15 12-27

4.16 28--43

4.17 44-47

4.18 48--51

4.19 52--55

4.20 56-60

4.21 61-65

4.22 66-67

4.23 1--20

4.24 20-25

4.25 26-30

4.26 31-35

4.27 36-40

4.28 41-45

4.29 46-50

5.5 51-55

5.6 56-60

5.7 61-65

5.8 66-70

5.9 71-75

5.10 0-5

5.11 5-10

5.12 11-15

5.13 16-35

5.14 36-55

5.15 26-30

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值