简单学习HTML

时间:2020-8-31 作者:admin


互联网的三大基石

1.HTML :超文本标记语言

2.HTTP : 超文本传输协议

3.URL : 统一资源定位符

HTML基本框架

(1)通常⼀个HTML⽹⻚⽂件包含3个部分:标记头区 … 、内容区 … 和⽹⻚区 …

(2)html : 在HTML文档最前面,用来标识HTML文档开始

(3)head : 构成HTML开头部分

(4)meat : 用来提供关于文档的信息

(5)link : 用来引入 CSS文件

(6)script : 用来引入js文件或编写 js代码

(7)title : 定义文档的标题,会在浏览器窗口标题栏或者状态栏里显示

(8)body :在浏览器上要显示的内容

文档后缀定义为html格式就可以生成html文档

<html>
<head></head>
<body></body>
</html>
<!-- 声明当前HTML的版本是HTML5 -->
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML⽂档的基本结构</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
<style></style>
</head>
<body>
<!--主体内容-->
</body>
</html>
<!-- (1)html文档约束 -->
<!DOCTYPE html>

<!-- (2)定义一个最外层框架 -->
<html>
	
	<!-- (3)定义html的开头 -->
	<!-- head主要是会书写一些浏览器中的配置标签 -->
	<head>
		
		<!-- (4) 这是告诉浏览器要按照UFT-8的格式解析该网页-->
		<meta charset="utf-8" />
		
		<!-- (5) 是给文档定义一个标题,会在浏览器窗口标题栏或者状态栏里显示-->
		<title></title>
	</head>
	
	<!-- (6)body中会书写直接展现到用户面前的信息 -->
	<body>
		
	</body>
</html>

HTML基础标签

1.标题和⽔平线

h1 – h6 标签可定义标题

h999这样的标签不产⽣错误,但是不具有标题的效果

标题标签配合着属性使用

<h1></h1>
// 就是标题是靠右|靠左|居中显示(默认显示是left)
<h1 align = "right|left|center"
2. ⽔平线

hr 标签在 HTML ⻚⾯中创建⼀条⽔平线(horizontal rule)可以在视觉上将⽂档分隔成各个部分。在
HTML 中,hr 标签没有结束标签。

<hr />
// 可以设置宽度,颜色,在什么位置显示,多大
<hr width="100px" color="aqua" align="left" size="3"/>

常用属性

属性 描述
align center(居中) , left(左) , right(右) 规定 hr 元素的对⻬⽅式,以后可以⽤样式取代它
size pixels(像素) 规定 hr 元素的⾼度(厚度),后可以⽤样式取代它
width pixels % 规定 hr 元素的宽度,后可以⽤样式取代它
3. 段落和换⾏

p标签定义段落

<p></p>

常⽤属性

属性 描述
align left、right、center、justify(调整两端对齐) 规定段落中⽂本的对⻬⽅式,以后可以⽤样式取代它

pre预文本标签

<!-- <pre>预文本标签</pre>   灵活性不高,使用的不多,文本是按照我们指定的格式展示-->
<pre>[环球时报记者 郭媛丹]为向美国示威,中国朝南海发射“航母杀手”!
		 在当前中美两军频繁传出紧张动向之际,美国媒体迅速将这条劲爆消息放上显眼位置,
		 并指责此举可能让南海局势升级。《环球时报》记者注意到,尽管美国媒体炒得很热,但中美官方并没有证实相		   关报道。
</pre>
4.换⾏

br标签为换⾏符号 br 标签是空标签(意味着它没有结束标签,因此这是错误的:

<br/>
5. 列表
(1)无序列表

由 ul 和 li 标签组成。

<ul>
<li></li>
<li></li>
......
</ul>

<ul>
	<li>好好学习</li>
	<li>天天向上</li>
</ul>

</ul>
<ul type="square">
    <li>好好学习</li>
    <li>天天向上</li>
</ul>
<ul type="circle">
    <li>好好学习</li>
    <li>天天向上</li>
</ul>

常用属性

属性 描述
type disc
circle
square
规定列表的项⽬符号类型。可以使⽤样式取代。
dise:实⼼圆(默认)
circle:空⼼圆
square:⽅块
(2)有序列表

由 ol 和 li 标签组成。

<ol>
<li></li>
<li></li>
......
</ol>

<ol>
	<li>好好学习</li>
	<li>天天向上</li>
</ol>

常用属性

属性 描述
type 1
a
A
i
I
规定在列表中使⽤的标记类型。
1:⽤数字形式表示序号(默认)
a:⽤⼩写字⺟表示序号
A:⽤⼤写字⺟表示序号
i:⽤⼩写罗⻢数字表示序号
I(⼤写i):⽤⼤写罗⻢数字表示序号
6.div和span
(1)div
  1. 是⼀个块级元素,通常与css配合使⽤,⽤于布局
  2. div 标签可以把⽂档分割为独⽴的、不同的部分

  3. 换⾏是 div 固有的唯⼀格式表现

  4. 可以通过 div 的 class 或 id 应⽤额外的样式

<div>content</div>

常⽤属性

属性 描述
align left、right、center 规定div元素中的内容的对⻬⽅式,以后可以⽤样式取代它
(2)span

span标签被⽤来组合⽂档中的⾏内元素 ,span 没有固定的格式表现

<span>content</span>
7.格式化标签
(1)font

规定⽂本的字体、字体尺⼨、字体颜⾊

(2)pre

定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽字体

(3)⽂本标签

b(粗⽂本)、i(斜体⽂本)、u(下划线⽂本)、
del (中划线⽂本)、sub(下标⽂本)、sup(上标⽂本)

8. a标签

a标签定义超链接,⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。

a元素最重要的属性是 href 属性,它指示要链接的⽬标位置,同时没有href属性a标签内的内容与普通 ⽂本没有区别,也就失去了超链接的功能

<a href="http://www.baidu.com">百度</a>
属性 描述
href URL 连接所要跳转的位置,可能是其他或当前⻚⾯。
target blank
parent
self
top
Framename作
为锚点的a标签
的name值
规定在何处打开链接⽂档。
blank:开启新⻚⾯显示⻚⾯;
self:当前⻚⾯显示跳转到⻚⾯,默认值。
_top:⽤于有frameset布局的⻚⾯,想要覆盖整个⻚⾯显示。
Framename:这⾥framename与上边的值不同,具体以为frame起了
什么样的名字为准,该值指示要连接的⻚⾯跳转后将在相应名称的
框架中显示
锚点的实现

利⽤a标签的name属性:

<a name="top"></a>

⼀般标签的id属性:div id=””、a id=”” 等:

<div id="top"></div><a id="top"></a>

锚点定位

<a href="#top">返回⾸部</a>
9.图⽚

img 元素向⽹⻚中嵌⼊⼀幅图像。

注意:从技术上讲,img 标签并不会在⽹⻚中插⼊图像,⽽是从⽹⻚上链接图像。img 标签创建的是 被引⽤图像的占位空间

<img src="" alt="" >

必须属性

属性 描述
alt text 规定图像的替代⽂本,⼀般在图⽚⽆法正常显示占位的⽂字。
src URL 规定显示图像的 URL。

常⽤属性

属性 描述
align top、bottom、middle、left、right 规定如何根据周围的⽂本来排列图像
border pixels 定义图像周围的边框
height pixels、% 定义图像周围的边框
width pixels、% 定义图像的宽度
title ⽂本 当⿏标在图⽚上时显示的⽂字
10.表格

table 标签定义 HTML表格

tr 标签定义表格的⾏。tr元素包含⼀个或多个th或td元素

td 标签定义 HTML 表格中的标准单元格。

th 定义表格内的表头单元格。th元素内部的⽂本通常会呈现为居中的粗体⽂本,⽽ td 元素内的⽂本通
常是左对⻬的普通⽂本。

简单的HTML表格由table元素以及⼀个或多个tr、th、或td元素组成。

理解:table相当于⼀个表格的外框,tr为⾏,td为⼀个⼀个单元格,th为有标题作⽤的单元格,th中的
内容同时有加粗的效果。

常⽤属性

属性 描述
align right、center、left 表格对⻬⽅式
border px 规定表格边框的宽度
width % 、px 规定表格的宽度

tr常⽤属性

属性 描述
align right、left、center 定义表格⾏的内容对⻬⽅式。
bgcolor rgb(x,x,x)、#xxxxxx、
colorname
规定表格⾏的背景颜⾊,以后可以⽤样式取代它
valign top、middle、bottom 规定表格⾏中内容的垂直对⻬⽅式,以后可以⽤样式
取代它

td 的colspan和rowspan分别规定单元格横跨的列数和⾏数

11.表单
(1)form

form 标签⽤于为⽤户输⼊创建 HTML 表单。

表单能够包含 input 元素,⽐如⽂本字段、复选框、单选框、提交按钮等等。

还可以包含 textarea等元素。

表单⽤于向服务器传输数据。form 元素是块级元素,其前后会产⽣折⾏。

常⽤属性

属性 描述
action URL 规定当提交表单时向何处发送表单数据
method get、post 规定⽤于发送 form-data 的 HTTP ⽅法
name Form_name 规定表单的名称
target _blank _self _ parent _top framename 规定在何处打开 action URL
(2)method:表单提交⽅式:get、post

get : 默认,主动的获取⽅式,数据放在url上,数据的容量有限,安全性差,有缓存

post : 数据放在请求实体中,数据量理论上没有限制,相对安全,没有缓存

(3)input

input 标签⽤于搜集⽤户信息。

根据不同的 type 属性值,输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、单选按钮、
按钮等等

常⽤属性

属性 描述
alt text 定义图像输⼊的替代⽂本。
checked checked 规定此 input 元素⾸次加载时应当被选中。
disabled disabled 当 input 元素加载时禁⽤此元素。
readonly readonly 规定输⼊字段为只读。
maxlength number 规定输⼊字段中的字符的最⼤⻓度。
value value 规定 input 元素的值。
type button
checkbox
file
hidden
image
password
radio
reset
submit
text
规定 input 元素的类型。按钮复选框⽂件隐藏域图像形按钮密码单选
框重置按钮提交按钮⽂本

若上传⽂件,请求⽅式为post,且表单添加⼀个属性:enctype="multipart/form-data"

注意:
  1. 没有name属性的属性是⽆法提交到后台的!!!!
  2. Radio单选按钮以name相同为⼀组。
  3. Checkbox复选按钮以name相同为⼀组。
(4)textarea
  1. 该标签定义多⾏的⽂本输⼊控件
  2. ⽂本区中可容纳⽆限数量的⽂本,可以通过 cols 和 rows 属性来规定 textarea 的尺⼨
  3. cols规定⽂本区内的可⻅宽度
  4. rows规定⽂本区内的可⻅⾏数
<textarea>content</textarea>
(5)label
  1. label 标签为input 元素定义标注(标记)
  2. label元素不会呈现任何的特殊效果。
  3. label标签的for属性应当与相关元素的id属性相同,此时点击label标签会⾃动为元素聚焦
<label for="username">⽤户名:</label>
<input type="text" id="username" name="username"/>
(6)button
<button>按钮</button>

常⽤属性

属性 描述
disabled disabled 禁⽤该按钮。
type button、submit、reset 规定按钮的类型。
value text 规定按钮的初始值
name button_name 规定按钮的名称。
(7)select

select⽤于定义下拉列表

<select name="color" >
    <option value="red">红⾊</option>
    <option value="green">绿⾊</option>
    <option value="blue">蓝⾊</option>
</select>

select常⽤属性

属性 描述
disabled disabled 禁⽤该下拉框。
multiple multiple 规定可选择多个选项。
name name 规定下拉列表的名称。
size number 规定下拉列表中可⻅选项的数⽬。

option常⽤属性

属性 描述
disabled disabled 禁⽤该下拉框。
selected selected 规定选项(在⾸次显示在列表中时)表现为选中状态。
value text 定义送往服务器的选项值。
12.常⽤字符实体
  1. 在 HTML 中,某些字符是预留的。
  2. 在 HTML 中不能使⽤⼩于号(<)和⼤于号(>),这是因为浏览器会误认为它们是标签
  3. 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使⽤字符实体(character entities)

实体名称对⼤⼩写敏感!

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#38;
© 版权 &copy; &#169;

13. 标签的分类

HTML中标签元素三种不同类型:块状元素,⾏内元素,⾏内块状元素。

(1)块级元素

  1. 元素都从新的⼀⾏开始,并且其后的元素也另起⼀⾏
  2. 元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置
  3. 元素宽度在不设置的情况下,是它本身⽗容器的100%(和⽗元素的宽度⼀致),除⾮设定⼀宽度

(2)行内元素

  1. 和其他元素都在⼀⾏上
  2. 元素的⾼度、宽度及顶部和底部边距不可设置
  3. 元素的宽度就是它包含的⽂字或图⽚的宽度,不可改变

(3)⾏内块状元素

  1. 和其他元素都在⼀⾏上;
  2. 元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。

标签补充

1. html框架

<!-- (1)html文档约束 -->
<!DOCTYPE html>

<!-- (2)定义一个最外层框架 -->
<html>
	
	<!-- (3)定义html的开头 -->
	<!-- head主要是会书写一些浏览器中的配置标签 -->
	<head>
		
		<!-- (4) 这是告诉浏览器要按照UFT-8的格式解析该网页-->
		<meta charset="utf-8" />
		
		<!-- (5) 是给文档定义一个标题,会在浏览器窗口标题栏或者状态栏里显示-->
		<title></title>
	</head>
	
	<!-- (6)body中会书写直接展现到用户面前的信息 -->
	<body>
		
	</body>
</html>

2. bead中常用标签

<!DOCTYPE html>
<!-- HTML的文档约束 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- meta  人名
		content  满足
		 要满足这个条件才可以展示这个网页
		 -->
		<!-- 搜索引擎优化 -->
		<!-- 根据作者来搜索这个网页 -->
		<meta name = "author" content = "朱自清,张三" />
		<!-- 根据描述内容来搜索这个网页 -->
		<meta name = "description" content="盼望着盼望着东风来了"/>
		<!-- 根据关键字来搜索这个网页 -->
		<meta name = "keywords" content="东风,盼望"/>
			
		<!-- 自动刷新网页 -->
		<!-- 说明可以自动刷新页面, 可以控制多久打开 -->
		<meta http-equiv="refresh" content="5;http://www.baidu.com"/>
		
		<!-- 禁止网页缓存 -->
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache">
		<meta http-equiv="expires" content="0">
		
	</head>
	<body>
	</body>
</html>

3. body中常用的基础标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- h1-h6
				标题标签   块级元素
				默认将文本内容加粗变大
		 -->
		 <!-- 
			<h1>TAOBAO</H1>
			<H2>TAOBAO</H2>
			<H3>TAOBAO</H3>
			<H4>TAOBAO</H4>
			<H5>TAOBAO</H5>
			<H6>TAOBAO</H6>
			<H7>TAOBAO</H7>
			<H8>TAOBAO</H8>
			<H9>TAOBAO</H9> -->
			专家:中国若射东风21D 美导弹预警系统很快就能发现
			<h1>专家:中国若射东风21D 美导弹预警系统很快就能发现</h1>
			<!-- 超过了h6之后就不会有变化了 -->
			<!-- alingn 设置显示的位置  默认是left-->
			
			<h1 align="left">专家:中国若射东风21D 美导弹预警系统很快就能发现</h1>
			<h1 align="right">专家:中国若射东风21D 美导弹预警系统很快就能发现</h1>
			<h1 align="center">专家:中国若射东风21D 美导弹预警系统很快就能发现</h1>
			
		<!-- 水平线
				属性
					width  宽度
					align  展示位置
						center 居中显示
						left   居左显示
						right  居右显示
		 
		 -->
		 <hr width="800px" color="aqua" align="center" size="3"/>
		 
		 <!-- <p>段落标签</p> -->
		 [环球时报记者 郭媛丹]为向美国示威,中国朝南海发射“航母杀手”!
		 在当前中美两军频繁传出紧张动向之际,美国媒体迅速将这条劲爆消息放上显眼位置,
		 并指责此举可能让南海局势升级。《环球时报》记者注意到,尽管美国媒体炒得很热,但中美官方并没有证实相关报道。
		 <p align="left">&nbsp;&nbsp;[环球时报记者 郭媛丹]为向美国示威,中国朝南海发射“航母杀手”!<br/>
		 在当前中美两军频繁传出紧张动向之际,美国媒体迅速将这条劲爆消息放上显眼位置,<br/>
		 并指责此举可能让南海局势升级。《环球时报》记者注意到,尽管美国媒体炒得很热,但中美官方并没有证实相关报道。</p>
		 
		 <!-- <pre>预文本标签</pre>   灵活性不高,使用的不多,文本是按照指定的格式展示-->
		 <pre>[环球时报记者 郭媛丹]为向美国示威,中国朝南海发射“航母杀手”!
		 在当前中美两军频繁传出紧张动向之际,美国媒体迅速将这条劲爆消息放上显眼位置,
		 并指责此举可能让南海局势升级。《环球时报》记者注意到,尽管美国媒体炒得很热,但中美官方并没有证实相关报道。
		 </pre>
		 
		 
	</body>
</html>

4. body中常用的小标签

<!DOCTYPE html>
<!-- 这种小标签有很多,可以在w3c和菜鸟教程中查找 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 下划线标签 -->
		<u>上海尚学堂</u><br/>
		<!-- 斜体标签 -->
		<i>上海尚学堂</i><br/>
		<!-- 加粗加黑标签 -->
		<b>上海尚学堂</b><br/>
		<!-- 删除性或中划线标签 -->
		<del>上海尚学堂</del><br/>
		
		<!-- 上标标签 -->
		2<sup>3</sup>
		<!-- 下标标签 -->
		log<sub>3</sub>
		
		<!-- 字体放大 -->
		<big>上海尚学堂</big>
		
		<!-- 字体标签 -->
		<font color="crimson" size="25px" face="宋体">上海尚学堂</font>
		<!-- span 要和CSS一起使用,使用style属性使用 -->
		<span>上海尚学堂</span>
		<hr/>
		
		
		
		<!-- 列表标签
				(1)有序列表
				(2)无序列表
				(3)自定义列表
			作用 : 
				[1]树型菜单
				[2]导航栏布局
		 -->
		<!-- (1)有序列表 -->
		<ol type = "1">
			<li>javaSE</li>
			<li>javaEE</li>
			<li>javaME</li>
		</ol>
		
		<!-- (2)无序列表) -->
		<ul>
			<li>javaEE</li>
			<li>javaME</li>
			<li>javaSE</li>
		</ul>
		
		<!-- (3)自定义列表 -->
		<dl>
			<dt>javaEE</dt>
			<dt>javaME</dt>
			<dt>javaSE</dt>
		</dl>
		<hr/>
		
		<!-- 跑马灯标签 默认是从右往左开始的-->
		<!-- direction 是改变滚动的方向 -->
		<!-- behavior 是改变他的行为 -->
		<!-- scrollmount  改变他滚动的速度 -->
		<marquee behavior="slide" direction="right" scrollamount="10px">上海尚学堂</marquee>
	</body>
</html>

5. 超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			超链接标签不会自动换行
		
			超链接的作用 : 
			(1)实现不同页面之间的跳转
				href : 指定跳转到目标资源的过程
				target : 打开网页的方式
			(2)实现锚点功能
		 -->
		 <!-- 跳转到本地的资源位置 -->
		 <a href="02body常用小标签.html">02小标签使用</a>
		 
		 <!-- 跳转到网络位置 -->
		 <a href="http://www.baidu.com">百度</a>
		 
		 <!-- 设置打开网页的方式 -->
		 <a href="http://www.baidu.com" target="_blank">百度</a>
		 
		 <hr/>
		 
		 <!-- br 换行  br*20生成20个br换行 -->
		 <!-- 锚点 -->
		 <a href="#bottom" name="top">返回底部</a>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <br>
		 <a href="#top" name="bottom">返回顶部</a>
		 
	</body>
</html>

6. 图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 相对路径 -->
		<img src="img/1.jpg" >
		
		<!-- 绝对路径 -->
		<img src="C:\\Users\\13390\\Desktop\\1.jpg">
		
		<!-- 网络路径 -->	
		<img src="https://pics2.baidu.com/feed/6609c93d70cf3bc79ea68411b88560a7cc112a30.jpeg?token=701d1bc1e8b6b5c7a735a177ae67b012">
		
		<hr>
		
		<img src="img/1.jpg" title="图片" height="200px" alt="图片显示错误">
		
	</body>
</html>

<!-- img
		
		
		src : 引入图片的位置(相对路径,绝对路径,网络路径)
		绝对路径和网络路径只能通过外部打开才能显示
		title : 图片的标题
		hight : 指定一个宽度或高度会同时改变
		alt : 当图片路径是错的时候就会显示这个Alt里面的文字
 
 -->

7.表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<table border="1px" align="center">
			<tr>
				<td>1</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>5</td>
				<td>4</td>
			</tr>
			<tr>
				<td>4</td>
				<td>3</td>
			</tr>
		</table>
		
		
		<br>
		
		<table border="1px" align="center" height="500px" width="500px">
			<tr>
				<th></th>
				<th></th>
				<th></th>
			</tr>
			<tr>
				<th></th>
				<th></th>
				<th></th>
			</tr>
			<tr>
				<th></th>
				<th></th>
				<th></th>
			</tr>
		</table>
	</body>
</html>



<!-- 
	table>tr*3>th*3  : 声明3行3列的 表格

	table 表格的自适应能力_(align = "center")整个表格居中
	width = "300px" height = "300px" cellpadding : 内容和单元格的距离
	cellspacing :单元格和单元格距离
 
	tr : 可以指定表格的高度
	td : 可以指定表格的宽度
	th : 自动加黑加粗
 -->
个人简历
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人简历模板</title>
	</head>
	<body>
		<!-- 设定一个表格,初始值为1 ,让它自由拓展,宽度为800像素 -->
		<table border="1" cellspacing="0px" style="margin:auto;" width="800px" >
			<tr height="70" style="width: auto;">
				<td colspan="7" align="center">个人简历</td>
			</tr>
			<!-- 行高50  居中对齐-->
			<tr height="50" style="text-align: center;">
				<!-- 横跨两行 -->
				<td rowspan="2">姓名</td>
				<!-- 横跨两行,宽度100 -->
				<td rowspan="2" width="100">  </td>
				<!-- 性别宽度100 -->
				<td width="100">性别</td>
				<td width="100">  </td>
				<td>文化程度</td>
				<td width="100"></td>
				<td rowspan="3" width="120">照片</td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td>身高</td>
				<td></td>
				<td>政治面貌</td>
				<td></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td width="100">籍贯</td>
				<td colspan="2"></td>
				<td>出生年月</td>
				<td colspan="2"></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td colspan="2">户口所在地</td>
				<td></td>
				<td>婚否</td>
				<td width="100"></td>
				<td>民族</td>
				<td></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td>身份证号码</td>
				<td colspan="2"></td>
				<td>现居住地址</td>
				<td colspan="3"></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td>毕业院校</td>
				<td colspan="3"></td>
				<td>毕业时间</td>
				<td colspan="2"></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td>学习专业</td>
				<td colspan="3"></td>
				<td>爱好特长</td>
				<td colspan="2"></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td rowspan="2">个人简介</td>
				<td colspan="6" rowspan="2"></td>
				<tr height="50" style="text-align: center;">
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td>就业时间</td>
				<td colspan="2">学校</td>
				<td>学年</td>
				<td>学历</td>
				<td>专业</td>
				<td>担任职务</td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td></td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td></td>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td>英语应用水平</td>
				<td colspan="3"></td>
				<td>职业期望</td>
				<td colspan="2"></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td>计算机应用水平</td>
				<td colspan="3"></td>
				<td>职业期望</td>
				<td colspan="2"></td>
			</tr>
			
			</tr>
			<tr height="50" style="text-align: center;">
				<td rowspan="4">工作经历</td>
				<td>时间</td>
				<td colspan="3">工作地点</td>
				<td colspan="2">职务</td>
			</tr>
			<tr height="50" style="text-align: center;">
				<td ></td>
				<td colspan="3"></td>
				<td colspan="2"></td>
			</tr>
			<tr height="50" style="text-align: center;">
				<td ></td>
				<td colspan="3"></td>
				<td colspan="2"></td>
			</tr>
			<tr height="50" style="text-align: center;">
				<td ></td>
				<td colspan="3"></td>
				<td colspan="2"></td>
			</tr>
			</tr>
			<tr height="50" style="text-align: center;">
				<td>待遇要求</td>
				<td colspan="6"></td>
			</tr>
			<tr height="50" style="text-align: center;">
			<td rowspan="2">联系方式</td>
			<td>移动电话</td>
			<td></td>
			<td>现在住址</td>
			<td></td>
			<td>邮编</td>
			<td></td>
			</tr>
			
			<tr height="50" style="text-align: center;">
				<td>紧急联系人</td>
				<td></td>
				<td>与本人关系</td>
				<td></td>
				<td>联系电话</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

8.表单标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body align="center">

		<img src="img/baidu.png" align="center" ><br>
		<form action = "https://www.baidu.com/s" method = "get">
			<!-- 普通文本框 -->
			<input  type="text" name = "wd" size="50px">
			<!-- submit提交 -->
			<input type="submit" value="百度一下" >
		</form>
	</body>
</html>

<!-- 
	https://www.baidu.com/s? 键1 - 值1 & 键2 - 值2
	?分割URL地址, 后面就是我们提交的内容

	表单的特征就是form标签
	
	表单重要的特性:
	action : 表单提交的位置
	
	method : 表单提交的方式
 
	get : 1. 参数会依附于URL地址之后
		  2. 利用get提交数据是不安全的
		  3. 利用get提交数据长度是有限制的
	post : 1. 参数不会依附于URL地址之后,
		   2. 利用post处理参数不受限制
		   3. post相对比较安全
		
 
 -->



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<form action="">
			<!-- 注册表单 -->
			<!-- 注册名 -->
			<!-- 如果value填写值就是默认值 不填就是空的-->
			账号 : <input type="text" name="账号" value="123"><br>
			
			<!-- 密码框不显示数字 -->
			密码 : <input type="password" name="密码" value=""><br>
			
			<!-- 单选框 -->
			男 : <input type="radio">
			女 : <input type="radio" />
			
			<!-- 多选框 -->
			健身 : <input type="checkbox"/>
			游泳 : <input type="checkbox"/>
			
			<!-- 多行文本框 -->
			<!-- 可以定义多少行, 多少列 -->
			个人介绍 : <textarea rows="15" cols="20">
				
			</textarea>
			
			<!-- 文件选择框 -->
			<input type="file" name="file"  /><br>
			
			<!-- 隐藏框 -->
			<input type="hidden"  name = "45678"/>
			
			<!-- 下拉框 -->
			<select name="ch">
				<!-- 默认选择 -->
				<option value="1" selected="selected"></option>
				<option value="2"></option>
				<option value="3"></option>
				<option value="4"></option>
				
			</select>
			
			
		</form>
	</body>
</html>


<!-- check -->

9.iframe框架标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li><a href="https://www.baidu.com/" target="ifm">百度</a></li>
			<li><a href="https://www.taobao.com/" target="ifm" >淘宝</a></li>
			<li><a href="https://www.360buy.com/" target="ifm">京东</a></li>
			
		</ul>
		
		<!-- 框架学习 -->
		<!-- name 的值要和上面的target的值必须一样才能够同步 -->
		<!-- src 写上得地址是默认的 -->
		<iframe  width="1500px" height="900px" name="ifm" src="http://www.baidu.com/"></iframe>
	</body>
</html>

10. 网页布局div标签

<!DOCTYPE html>
<!-- 网页设计先把网页模块化 -->
<!-- 写一个京东登录页面 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style >
			.top{
				height: 100px;
				
				width: 100%;
				/* 背景颜色 */
				background-color: crimson;
			}
			
			.tips{
				height: 40px;
				width: 100%;
				background-color: cornflowerblue;
			}
			
			.center{
				height: 475px ;
				width: 100%;
				background-color: aqua;
			}
			
			.bettom{
				height:150px ;
				width: 100%;
				background-color: blue;
			}
			
			.login{
				width: 350px;
				height: 400px;
				background-color : azure;
				
				/* 相对定位 */
				position: relative;
				
				left: 950px;
				top: 10px;
			}
			
		</style>
	</head>
	<body>
		<!-- 头部模块 -->
		<div class="top"></div>
		
		<!-- 中间的提示 -->
		<div class="tips"></div>
		
		<!-- 中间的展现 -->
		<div class="center">
			
			<div class="login"></div>
		</div>
		
		<!-- 底部模块 -->
		<div class="bettom"></div>
		
	</body>
</html>


<!-- div本身是没有任何含义的 
	 div : 作用就是把网页进行模块化的划分



-->

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。