一、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>
©
</p>
<p>
™
</p>
<p>
®
</p>
<p>
😀
</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