html5 Css3 JavaScript jQuery：HTML5篇

一、基本标签

1.三大标签

html标签是整个html文档的根节点 head标签是头信息标签，主要是做设置，比如字符集、网页标题、关键字提示 body标签是体标签，主要写网页需要显示的内容

2.标题标签

h1~h6是标题标签，独占一行，字体加粗，数字越小字体越大

1.标题标签：h1~h6，用作主标题，以此类推 
<h1>标题1</h1> 
<h2>标题2</h2> 
<h3>标题3</h3> 
<h4>标题4</h4> 
<h5>标题5</h5> 
<h6>标题6</h6>

3.图片标签

img：图片标签，用作图片显示

  <img src="图片路径" />

-src:加载图片的路径，分为绝对路径和相对路径

绝对路径：从盘符开始，一直到文件的完整路径

  <img src="D:/program/hqyj/html/program/html/img/1.jpg" />

相对路径：从当前文件开始查找，一直到文件所在的位置

  <img src="img/1.jpg" />

-width:设置图片的宽度

-height：设置图片的高度

<img src="img/1.jpg" width="200" height="100"/>

-alt:当图片不能加载时显示在网页上的替代文字

-title:当鼠标放到图片上时显示的文字

<img src="img/1.jpg" width="200" height="100" alt="鬼刀" title="鬼刀的画"/>

****图片标签不会独占一行，img是一个单标签

4.段落标签

段落标签：p标签独占一行行与行之间有空隙，是一个双标签

<p>我爱中国</p> 
<p>中国是我家</p> 
<p>中国共产党万岁</p>

5.链接标签

链接标签：a标签，不会独占一行

属性：

-href:跳转的页面的地址域名，可以是文件路径，也可以是域名

-target:以什么方式跳转页面 _blank:新打开一个页面 _self:默认不打开，在当前窗口跳转

<a href="http://wwww.baidu.com">百度</a>
		<a href="http://www.sina.com">新浪</a>
属性：
        <a href="http://wwww.baidu.com" target="_blank">百度</a>
		<a href="http://www.sina.com" target="_blank">新浪</a>
文件：
        <a href="index.html" target="_blank">打开文件路径</a>

5.1锚点

跳转底部：需要给底部最后一个元素添加唯一标识id，在href里用#id跳转
跳转到自然段：同上，给某个自然段添加唯一标识id，在href里用#id跳转
跳转顶部：只使用#就可以了

<body>
		<a href="#bottom">跳转到底部</a>
		<a href="#p11">跳转到p11</a>
		<p>中国1</p>
		<p>中国2</p>
		<p>中国3</p>
		<p>中国4</p>
		<p>中国5</p>
		<p>中国6</p>
		<p>中国7</p>
		<p>中国8</p>
		<p>中国9</p>
		<p>中国10</p>
		<p id="p11">中国11</p>
		<p>中国12</p>
		<p>中国13</p>
		<a href="#" id="bottom">回到顶部</a>
	</body>

6.列表标签

6.1有序列表标签

ol:有序列表标签

li:列表项

type:设置序号的样式，默认值为1，表示按数字排序（1，2，3，4）

"a"：表示以小写字母排序（a,b,c）
"A":表示以大写字母排序（A,B,C)
"i":表示以小写罗马数字排序
"I"：表示以小写罗马数字排序

-start:表示从第几个开始排序，比如start=”2“，表示从第二个开始排序

		<ol type="i">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
			<li>列表项5</li>
		</ol>

6.2无序列表标签

ol:无序列表标签

li:列表项

type:列表选项：

circle:空心圆圈
square:实心方块
disc:实心圆，默认值

<ul type="desc">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
			<li>列表项5</li>
		</ul>

7.换行标签

<br/>单标签   换行

8.水平线标签

<hr/>  水平线标签  可以分隔一些内容，单标签

9.粗体、斜体、下划线标签

粗体：b标签
		<b>java</b>
斜体：i标签
		<i>java</i>
下划线：u标签
		<u>java</u>

java

java

java

10.上标、下标标签

上标：sup标签
	数字平方： 4<sup>2</sup>
下标：sub标签
			 4<sub>2</sub>

11.HTML字符实体

空格：&nbsp;
小于：&gt;
大于：&lt;
大于等于：&ge;
小于等于：&le;
注册商标：&reg;
版权：&copy;

二.div标签

最常用块级容器，用来分块，经常与CSS一起使用，来布局网页

div是一个块级元素，独占一行，与css结合使用，用来做页面布局

<div style="border: 1px solid  red;width: 200px;height: 100px;">
		这是一段内容
	</div>

三.表格标签

简单的HTML表格由table标签以及一个或者多个tr、td或th标签组成。

独占一行

table:表格标签

tr:表示一行

td:表示一列

th:表示表头列

width:表示宽度

height：表示高度

border:边框，-0表示不显示边框，>0 表示边框的宽度

cellspacing:边框的间距

cellpadding:单元格向内填充

align:对齐，left--左对齐，默认值，center--居中对齐，right--右对齐

rowspan:合并行

colspan:合并列

<table width="600" border="1" cellspacing="0" cellpadding="5" >
			<tr>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
			<tr align="center">
				<td>java</td>
				<td>10</td>
				<td>20</td>
				<td>200</td>
			</tr>
			<tr align="center">
				<td>c++</td>
				<td rowspan="2">15</td>
				<td>10</td>
				<td>150</td>
			</tr>
			<tr align="center">
				<td>python</td>
				<td>30</td>
				<td>450</td>
			</tr>
			<tr align="center">
				<td>总计</td>
				<td colspan="3">800</td>
			</tr>

		</table>

注意：

border-collapse:collapse：去掉边框的间隙

练习一个表格，图片如下：

四.表单标签

form标签，通常用来做用户注册和登录页面

表单由文本框、密码框、列表框、单元框、多选框、按钮、多行文本框

form:表单标签

---action：提交到哪个地方

---method：提交方式
		**get**:显示为可视化的数据
post:非可视化数据

input:文本输入框

-type:类型

-text:文本框普通的文本输入框

-password：密码框

-radio：单选框

-checkbox：复选框

-submit：提交按钮

-select：下拉列表框

-textarea：文本域

-row:行

-cols:列

-button:按钮，可以通过事件触发操作

4.1表单格式：

表单格式：

<form action="提交到的地方" method="提交的方式get/post">
			账号：<input type="text" name="userName" id="userName" placeholder="请输入用户姓名">  <br />
			密码：<input type="password" name="passWord" id="passWord" placeholder="请输入用户密码"/>  <br />
			性别：<input type="radio" name="sex"/>男
				 <input type="radio" name="sex"/>女 <br />
		    爱好：<input type="checkbox" name="hobby"/>篮球
				 <input type="checkbox" name="hobby"/>足球  <br />
		    星座：<select >
				   <option value="jinniu">金牛座</option>
				   <option value="chunv">处女座</option>
				   <option value="shizi">狮子座</option>
				   <option value="baiyang">白羊座</option>
				   <option value="mojie">魔羯座</option>
			     </select>
				 <br />
		    备注：
				<textarea>声明................</textarea>
				<br />
				<input type="button" value="注册" />
   </form>

4.2练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="index.html" method="post">
		    <label>账号：</label>
		    <input type="text" name="userName" id="userName" placeholder="请输入用户名"/>
		    <br/>          
		    <label>密码：</label>
		    <input type="password" name="pwd" id="pwd" placeholder="请输入密码"/>       <br/>
		    <lable>性别：</lable>
		    <input type="radio" name="sex" value="male"/>男
		    <input type="radio" name="sex" value="female"/>女
		    <br/>
		    <lable>爱好：</lable>
		    <input type="checkbox" name="hobby" value="basketboll"/>篮球
		    <input type="checkbox" name="hobby" value="footboll"/>足球
		    <br/>
		    <label>星座:</label>
		    <select>
		        <option value="1">金牛座</option>
		        <option value="2">处女座</option>
		        <option value="3">狮子座</option>
		        <option value="4">水瓶座</option>
		    </select>
		    <br/>
			<label>备注：</label>
		    <textarea name="ramark" id="ramark" rows="5" cols="50">声明.........</textarea>
		    <br/>
		    <input type="submit" name="btn"  id="btn" value="注册">
         <button id="btn1">取消</button>
		</form>    
	</body>
</html>

五.span标签

把实际内容包含起来，不能控制宽高，宽高是由实际的内容确定的，并且不会独占一行

<span>内容</span>

六.iframe

iframe:内联框架，内联标签，可以嵌套其他的页面

常用属性: 
1. frameborder(常用) ：是否显示边框 ， 取值 yes ， no； 
2. height：框架作为一个普通元素的高度，建议采用css设置； 
3. width：框架作为一个普通元素的宽度，建议采用css设置； 
4. name：框架的名称，window.frame[name]时专用的属性； 
5. scrolling(常用)：框架是否带有滚动条，取值 yes ，no ； 
6. src (常用)： 内框架的地址，可以是页面地址，也可以是图片的地址； 
相对一般标签，iframe特别属性只有三个： frameborder，scrolling，src，所有的iframe几乎都要指定。

iframe的基本属性与其它元素一样，有样式的，也有特有的。

对于样式部分可以使用css设置，以下为iframe的常用属性。

iframe在布局、无刷新网页等方面有很重要的地方。虽然现在很流行div布局，但是有时依然会用到iframe布局。在2005年人们开始使用ajax进行无刷新，但是在一些特效情况下还得使用iframe；特别是在fash动画内嵌套html 时，使用的更多。

iframe即内联框架。 
        对于外围的页面，iframe是一个普通的元素，对于iframe里面的内容，又是一个五脏六腑俱全的页面。iframe就是一个普通的元素，与span、div一样。 
        那么，iframe是内联元素还是块元素？首先，iframe和canvas标签一样可以设置宽（width）和高（height）并且有效。其次，iframe像普通文本一样不会换行， 因此iframe是一个行内块元素（inline-block）。

<body>
	<div>这是一段文字</div>
	<iframe src="http://www.sina.com.cn" scrolling="yes" frameborder="yes" width="100%" height="300">
 </iframe>
</body>

七.块元素和行内元素

1.块级元素（block element）

块级元素（block element）：在网页中一般通过块级标签来将页面分块，从而达到布局的效果

主要特点如下：

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关CSS属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度
块级元素什么都能放，但 p 元素里不能放 h1 等分级标题元素

常用的块级元素：

元素	描述
div	最常用块级元素，用来分块，没有语义
h1	一级标题
hr	水平分割线
ol	有序列表
ul	无序列表
li	列表项
table	表格
p	段落
form	表单

2.行内元素

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

主要特点：

和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关CSS属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
通常被包含在块级元素中

常用的行内元素：

元素	描述
a	锚点
b	加粗
span	最常用内联元素，划分内联元素里的区
strong	加粗强调
i	斜体
em	斜体强调
br	强制换行
u	下划线
sup	上标
sub	下标

可替换元素：

根据元素的标签和属性，来决定元素的具体显示内容

img：根据src读取图片信息，并设置图片的宽高，具有行内元素和块级元素的特性

iframe：不会自动换行，是行内元素，可以设置宽高

7.案例练习

模仿百度首页：

代码：用来少量的CSS，下期讲解.......

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		
	</head>
<style>
	body{
		
		padding-top: 8px;
		
	}
	a{
		text-decoration: none;
		color: black;
		
	}
	a:hover{
		color: blue;
	}
	header{
		font-size: 10px;
		word-spacing: 18px;
	}
	.left{
		margin:0px;
		margin-left: 10px;
		float: left;
	}
	.right{
		margin:0px;
		float: right;
		margin-right: 10px;
	}
	button{
		background-color:  royalblue ;
		border-radius: 5px;
		color: white;
		border: royalblue;
	}
	.center img{
		width: 240px;
		height: 115px;
	}
	.center{
		padding-top: 60px;
		margin: auto 0;
		text-align: center;
	}
	.sousuo{
		
	}
	.k{
		margin-top: 10px;
		width: 600px;
		height: 35px;
		border: 1.5px solid blue;
		border-radius: 10px;
	}
	.b{
		
		height: 41px;
		width: 100px;
		border-radius: 1px  10px 10px 1px ;
		margin-left: -105px;
		margin-top: 10px;
		font-size: 15px;
	}
	.sousuo img{
		
		margin:  auto 0;
		height: 35px;
		width: 50px;
		margin-left: -150px;
		margin-right: 10px;
	}
	.kao{
		margin:40px;
	}
	.kao a{
		font-size: 15px;
		color: cornflowerblue;
	}
	.l1{
	    color: cornflowerblue;
		
	}
	.l2{
		color: lightskyblue;
	}
	.center1{
		width: 600px;
		margin: 0 auto;
		font-size: 13px;
		
	}
	.left1{
		float: left;
		font-family: 微软雅黑;
	}
	.right1{
		float:right
	}
	.center1 table{
		padding-top: 20px;
		word-spacing: 10px;
		float: left;
		margin-left: 0px;
		font-size: 15px;
	}
	.center1 b{
		color: sandybrown;
		clear: both;
	}
	.footer{
		margin:0 auto;
		margin-top:500px;
		clear: both;
		word-spacing:6px;
		text-align: center;
	}
	.footer a{
		font-size: 5px;
		color: darkgray;	
	}
</style>
	<body>
		<!-- 头部 -->
		<header>
			<span class="left">
				<a href="http://news.baidu.com/" target="_blank">新闻</a>
				<a href="https://www.hao123.com/?src=from_pc" target="_blank">hao123</a>
				<a href="https://map.baidu.com/@11585280.82,3555907.48,12z" target="_blank">地图</a>
				<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
				<a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>
				<a href="https://image.baidu.com/"" target="_blank">图片</a>
				<a href="https://pan.baidu.com/?from=1026962h" target="_blank">网盘</a>
				<a href="https://www.baidu.com/more/" target="_blank">更多</a>
			</span>
			
			<span class="right">
				<label>设置</label>	
				<button>登录</button>
			</span>
		</header>
		
		<!-- 中间部分 -->
		<div class="center">	
			<img src="../img/baidu.png" >
			<div class="sousuo">
				<input type="text" class="k" />
				<!-- <img src="../img/p.png" > -->
				<button class="b">百度一下</button>			
			</div>
			<div class="kao">
				<a>高考上百度，一站式智能报考!</a> 
				<label class="l1"><b>></b></label>
				<label class="l2">></label>
			</div>			
		</div>	
		<div class="center1">
			<span class="left1">
				<a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank"><h3>百度热搜></h3> </a>
			</span>			
			<span class="right1">
				<a><h3>◯ 换一换</h3></a>
			</span>			
			<table>
				<tr>
					<td><b>↥</b> <a>庆祝香港回归25周年 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> </td> 
					<td class=""><b>3</b> <a>香港回归25周年及奶奶曲祝福</a></td>
				</tr>
				<tr>
					<td> <b>1</b> <a> 明起冰墩墩停产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
					<td class=""><b>4</b>  <a>杭州西湖被暴雨“隐藏”了</a> </td>
				</tr>
				<tr>
					<td> <b>2</b> <a> 是否会建更多大型航母？国防回应&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
					<td class=""> <b>5</b> <a> 公司误发330薪后员工辞职跑路</a></td>
				</tr>
			</table>
		</div>
		<div  class="footer">
			<a href="https://home.baidu.com//" target="_blank">关于百度</a>
			<a href="https://ir.baidu.com/" target="_blank">About Baidu</a>
			<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
			<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">京ICP证030173号</a>
			<a href="" target="_blank">药品医疗器械网络信息服务备案（京）</a>
			<a href="" target="_blank">网药械信息备字（2021）第00159号</a>
		</div>	
	</body>
</html>

下期----CSS(层叠样式表)......