一：html语言基础

1.基本结构









窗口标题





内嵌样式

		<body bgcolor="" backgroud="" leftmargin=""  >

			主体：显示内容

		</body>

	</html>

2.基本标签

a.格式标签

		<p>段落</p>、<center>居中</center>

		<ul>项目</ul>、<li>列表项</li>

		<br/>换行、<hr size="宽度" noshade="去除阴影效果" />水平线

		<div sytle="border-top=1px dashed black; width=#; height=#;">虚线</div>

b.文本标签

		<hn>标题</hn>、<strong>加重文本：粗体</strong>、<cite>强调文本：斜体</cite>

		<font face="字体" size="字号" color="颜色">文本</font>

		<b>加粗</b>、<u>下划线</u>、<i>斜体</i>、<sup>上标</sup>、<sub>下标</sub>

c.图像标签

		<img src="图片路径" width="" height="" border="" alt="替换文字" title="工具提示文本" align="对齐方式" />

d.超链接标签

		<a href="跳转路径" target="_black" >链接文本</a>

		<a href="自己其他文档地址" target="_black" >链接文本</a>

		<a name="标记">文本</a>、<a href="#标记">链接文本</a>	当前文档

		<a name="标记">文本</a>、<a href="文件名称#标记">链接文本</a>	其它文档

e.特殊字符

		'<' --> &lt;(less than)

		'>' --> &gt;(greater than)

		'版权' --> &cope;(copyright)

		'商标' --> &reg;(register)

		'空格字符' --> &nbsp;

		'&' --> &amp;

二：表格

//cellspacing默认为2px

表头：粗体加居中 表头：粗体加居中


数据信息

数据信息

三：表单

	<select name="">

		<option value="" selected="selected">下拉选</option>

	</select>

	<textarea name=“” cols="列" rows="行" readonly>多行文本框</textarea>

</form>

	type:

		text:单行文本框

		password:密码框

		radio:单选按钮

		checkbox:复选框

		file:文件域

		hidden:隐藏域

		submit:提交

		reset:重置

		button:普通按钮

		image:用图片按钮提交

1.--> 表单中元素都必须有name属性

	<lable for="id">单行</lable>

	<input type="text" name="" id="" size="可见宽度" />

	<lable for="id">密码</lable>

	<input type="password" name="" id="" size="" />

2.--> 照片上传

	<lable for="id">文件域</lable>

	<input type="file" name="" id="" size="" />

3.--> 单选、复选、下拉选必须给value值;单选、复选的name属性必须相同：给一个name赋多个值，不方便服务器访问

	<lable for="id">单选</lable>

	<input type="radio" name="" value="" id="" checked>

	<lable for="id">复选</lable>

	<input type="checkbox" name="" value="" id="" checked>

4.--> 按钮

	<input type="submit" name="" value="提交"  />

	<input type="reset" name="" value="重置"  />

	<input type="image" src="图片路径" align=""  />

	<input type="button" value="单击我"  />

四：样式表

1.为什么需要样式表：

	避免标签过多、标签过于重复、难于修改

2.CSS：层叠样式表，将内容和表现形式分离

a.行内样式表：

		作用于一个标签

		样式规则不能重复使用

		解决了标签过多的问题

b.内嵌样式表：位于标签内



/CSS注释/

p{

border:1px dashed black;

font-size:16px;

color:red;

}



可以做到样式规则的重用

不能实现多个HTML文档共用同一套样式规则

c.外部样式表： (存在于head部分)

		能实现多个HTML文档共用同一套样式规则

五：选择器

CSS选择器：组织样式规则的容器，用于内嵌样式和外部样式规则的定义

1.标签选择器：同种元素的样式

		标签名{

			属性：属性值；

		}

		同种元素具有统一的外观

		不能重复应用于其他元素

		同种元素定义了优先级高，则先采用优先级高的，没有覆盖的样式将保留

2.类选择器；任意元素的样式

		.类名{

			属性：属性值；

		}

		任意的元素可以应用共同的样式

3.ID选择器：一个元素的样式

		#id名称{

			属性：属性值；

		}

		id元素具有唯一性

		样式不能重复使用

4.扩展选择器：

a.伪类选择器：特殊的类选择器

			选择器：伪类名{

				属性：属性值；

			}

			定义对象在不同状态下的样式效果：

				hover：悬停

				active：点击

				after：追加内容	content：#;

				只作用于a对象：

					link：未被访问前

					visited：已被访问后

b.包含选择器："子选择器"

			E1 E2{

				属性：属性值；

			}

			指定元素E1中子元素E2的样式

			解决了子元素选择器的定义(class、id)

			避免了样式表中样式的结构不清

			便于阅读

c.组合选择器：被分组的选择器应用相同的样式

			选择器1，选择器2{

				属性：属性值；

			}

			避免了元素之间重复定义相同的样式

			解决了代码臃肿赘余

六：优先级

1.选择器优先级：

	ID > 类 > 标签

2.样式表优先级：

	行内样式 > 内嵌样式

	行内样式 > 外部样式

3.就近原则：谁距离文本内容近采用谁

	内嵌样式  外部样式	   <head>内	(文本内容)

	行内样式  标签		<body>内	(文本内容)

七：常用标签

1.div与span

	<div>块级容器：自动换行		用于分割文档内容

	<span>行级容器：自动适应文本	用于一个段落中

2.ul与li

	<ul>与<li>：通常用于制作板块的内容列表和导航菜单。

3.p与h

	<p>定义段落，<h>定义标题，用于段落文本排版。

4.table与form

	<table>创建表格

	<form>创建表单

八：常用样式属性

1.字体样式：设置文本字体的样式

	font-size:#;字号

	color:#;字体颜色

	font-weight:#;粗细

	line-height:#;行高

	font-style:#;字体样式--italic斜体

2.边框样式：为元素添加边框

	border：border-width border-style border-color	宽 样式 颜色

		border-top;		上	(实线，虚线)

		border-righy; 	右	(实线，虚线)

		border-buttom; 	下	(实线，虚线)

		border-left; 	左	(实线，虚线)

	border-radius:水平半径 [垂直半径]	cala(6px);

		border-top-left-radius ：左上边框

		border-top-right-radius ：右上边框

		border-buttom-right-radius ：右下边框

		border-buttom-left-radius：左下边框

3.文本样式：为文本内容进行排版

	text-align：文本水平对齐方式

	vertical-align：文本垂直对齐方式

	text-indent：文本的缩进值

	text-decoration：文本的装饰效果

	text-shadow：h-shadow v-shadow blur color; 文本阴影

	text-transform：uppercase/lowercase/capitalize; 文本的大小写

4.方框样式：任何元素都是一个方框：内容、边框、内补丁、外补丁

	内补丁(填充padding)：内容与边框距离 --》上、右、下、左	顺时针

	外补丁(外边距margin)：边框与边框距离 --》上、右、下、左  顺时针

5.显示样式：

	行级标签(inline)：大小根据内容自适应，width/height属性无效

		<span>、<a>、<img/>、<lable>、<input/>、<strong>、<em>

	块级标签(block)：显示时独占一行，width/height属性有效

		<div>、<ul>与<li>、<hn>、<p>、<form>

	display属性：

		none：隐藏标签元素

		inline：同一行显示元素

		block：以块状方式独占一行

		inline-block：用于块级元素在一行横向排列

6.浮动与清除：

	float：left；文本流向对象的右边

	float：right；文本流向对象的左边

	float元素后，父级容器height将变为0(父级容器没有设置高度)

	clear：both；清除元素左右两边的浮动元素(即左右两侧不容许出现浮动元素)，元素将在下一行显示

	clear后，父级容器height将自适应

7.定位：

	position：absolute；绝对定位-->将对象从文档中拖出

		left:#;

		top:#;

	position：relative；相对定位-->不会将对象从文档中拖出

		left:#;

		top:#;

九：表格布局

table.css：

body(主体){

color:#999999;

font-size:14px;

}

table(表格){

border:1px solid gray;

}

td(单元格){

text-align：center;

vertical-align：middle；

padding-top:10px; --> height

padding-bottom:10px; --> height

border-bottom:1px solid gray;

border-left:1px solid gray;

color:gray;

}

.title(标题){

font-size:18px;

font-weight:bold;

color:#084B5C;

}

.cell(单元格):hover td{

color:#000000;

cursor:pointer/text/crosshair/wait/help; //鼠标指针所用的光标形状

backgroud-color:#99CCCC;

}

.button(按钮){

backgroud-color:gray;

width:70px;

height:25px;

border:0px;

vertical-align:middle;

}

<link href="table.css" type="text/css" rel="stylesheet" />

<table width="" border="0" cellspacing="0" cellpadding="0">

	<tr >

		<td class="title"></td>

	</tr>

	<tr class="cell">

		<td></td>

	</tr>

</table>

<div>

	<input type="button" name="button" class="button" value="搜索" />

</div>

十：框架布局

将浏览器窗口分成几个独立的窗口，分别显示不同的页面布局方式

<frameset rows="90,*" frameborder="0px">

	<frame src="top.html" name="top" />

	<frameset cols="182,*" frameborder="0px">

		<frame src="left.html" name="left" />

		<frame src="right.html" name="right" />

	</frameset>

</frameset>

<noframe>

	<body>浏览器不兼容时显示内容</body>

</noframe>

十一：DIV+CSS布局

blogstyle.css:

页面元素样式初始化：

*{

margin:0px;

padding:0px;

}

body,a{

font-size:12px

}

a{

text-decoration:none;

{

.clear{

clear:both;

}

上、中、下共享样式规则：

	#top，#content,#footer{

		width:960px;

		margin:10px auto;

		border:1px solid gray;

	}

top部分的样式规则；

	#top{

		height:#;

	}

	#top #tfun{

		height:#;

	}

	#top #blogtitle{

		height:#;

	}

	#top #nav{

		height:#;

	}

子菜单中的样式规则：

	#top #nav ul{}

	#top #nav ul li{}

content部分的样式规则；

	#content{

		height:#;

		border:0px;

	}

	#content #left{

		width:68%;

		border:1px solid gray;

		height:100%;

		float:left;

	}

	#content #right{

		width:30%;

		border:1px solid gray;

		height:100%;

		float:right;

	}

footer部分的样式规则：

	#footer{

		heighr:#;

	}

	#footer div{

		width:#;

		margin:0px auto;

		text-align：center;

	}

	#footer div a{

		display:block;

		width:#;

		heighr:#;

		float:left;

	}

	#footer p{

		text-align：center;

	}

<link href="blogstyle.css" type="text/css" rel="stylesheet"/>

<div id="top">

	<div id="tfun"></div>

	<div id="blogtitle"></div>

	<div id="nav"></div>

</div>

<div id="content">

	<div id="left"></div>

	<div id="righr"></div>

	/*<div class="clear"></div>*/content有固定高度，float后不会回弹

</div>

<div id="footer">

	<div></div>

	<p></p>

</div>

十二：ul与li和div与a

通配符选择器：所有的元素

#content *{} 代表content选择器的后代所有元素都共享样式

*{

	margin:0px;

	padding:0px;

}

ul{

	width:#;

	list-style:none;

	margin-left:20px;

}

li{

	width:100px;

	float:left;

}

li{

	display:inline-block;

	width:#;

	height:#;

}

li{

	width:#;

	height:#;

	font-size:#;

	line-height:#;

}

div{

	width:600px;

	margin:0px auto;

	text-align：center;

}

div a{

	display:block;

	width:60px;

	height:25px;

	float:left;

}

十三：方法和技巧

1.制作横向排列---ul与li 或 div与a

	li{

		display:block;

		width:#;

		height:#;

		float:left;

	}

	ul{

		/*font-size:0px;*/

	}

	li{

		display；inline-block;

		width:#;

		height:#;

		float:left;

		//font-size:18px

		//li与li之间注释掉

	}

	a{

		display:block;

		width:#;

		height:#;

		float:left;

	}

	a{

		dispaly:inline-block;

		width:#;

		height:#;

		float:left;

	}

2.设置元素之间距离方法；

	a.margin与padding	方框样式

	b.text-align与vertical-align   文本样式

	c.align与valign		表格属性

	d.line-height	字体样式

	两盒子都有外边距是取较大者

3.设置两个图片之间的距离

	<img>

	<div>

	<table>

	<ul>与<li>

	margin与padding调节距离

4.元素默认样式

	body{

		margin:8px;

	}

	ul{

		margin-top:16px;

		margin-button:16px;

		paddint-left:40px;

	}

	p{

		margin-top:(font-size)px;

		margin-button:(font-size)px;

		height:自适应内容；

		width：独占整行；

	}

	hn{

		margin-top:(n的变化而变化)px;

		margin-top:(n的变化而变化)px;

		height:自适应内容；

		width：独占整行；

	}

	div{

		width:独占整行；

		height：自适应内容；

	}

	span{

		width:自适应内容；

		height：自适应内容；

	}

	font-size:16px;

	block元素：独占一行

	inline元素：自适应内容

项目中遇到的几个问题：

1.背景图片与插入图片

	background：url() repeat-x;		//属性

	<img src=""/>	  //元素

2.表单图片提交按钮与图片链接

	<input type="image" src="" />

	<a href="#"><img src="" /></a>

3.图片透明度问题：opacity属性(0.0~~1.0)

	<img src="" class="image" />

	img{opacity:1.0;}

	img:hover{opacity:0.5;}

4.文字容器伪类问题：

	td{

		backgroud-color:#99cccc;	(背景色)

		cursor:pointer/text/crosshair/wait/help	 (指针状态)

	}

5.背景图片的定位：

	background：url() 重复 水平移动距离 垂直移动距离(正下移，负上移)

	background：url() position定位

6.float定位

	父级容器的回弹(最好都给定width和height)

	float定位时文件的流动性(对象)

	clear的使用：只对块级容器有作用

7.position定位

	position:absolute；绝对定位 --绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块(页面或画布)

	position:relative；相对定位	--元素“相对于”它的起点进行移动,元素仍然占据原来的空间

	父级容器绝对定位与相对定位对子容器定位的影响

8.行级容器与块级容器的区别

行级容器：inline

		weith和height不受影响

		padding与margin不能改变本身位置

		居中时可直接设与容器等高的line-height

块级容器：block 、inline-block、 flex

		可设width和height

		padding与margin能改变本身位置

9.居中:

	1).<center>文本</center>	元素

	2).align/valign		属性

	3).margin:0px auto;		方框样式

	4).position: absolute;		绝对定位

	   left: 50%;

       top: 50%;

	   transform: translate(-50%,-50%);

二：HTML基础的更多相关文章

  1. PropertyGrid控件由浅入深(二)：基础用法

    目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法 控件的外观构成 控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...

  2. LINUX二十个基础命令

    LINUX二十个基础命令 一. useradd命令 1．命令格式: useradd 选项 用户名 2．命令功能: 添加新的用户账号 3．常用参数: -c comment 指定一段注释性描述.-d 目录 ...

  3. Swift语言指南(二)--语言基础之注释和分号

    原文:Swift语言指南(二)--语言基础之注释和分号 注释 通过注释向自己的代码中注入不可执行的文本,作为你自己的笔记或提示.Swift编译器运行时会忽略注释. Swift的注释与C语言极其相似,单 ...

  4. 二十二. Python基础(22)--继承

    二十二. Python基础(22)--继承 ● 知识框架   ● 继承关系中self的指向 当一个对象调用一个方法时,这个方法的self形参会指向这个对象 class A:     def get(s ...

  5. 十二. Python基础(12)--生成器

    十二. Python基础(12)--生成器 1 ● 可迭代对象(iterable) An object capable of returning its members one at a time. ...

  6. 二. Python基础(2)--语法

    二. Python基础(2)--语法 1.实现一个简单的登录系统 '''# 形式1 n = 1 while n < 4:     name = input("请输入姓名\n" ...

  7. Mina 系列(二)之基础

    Mina 系列(二)之基础 Mina 使用起来多么简洁方便呀,就是不具备 Java NIO 的基础,只要了解 Mina 常用的 API,就可以灵活使用并完成应用开发. 1. Mina 概述 首先,看 ...

  8. day02--Python基础二（基础数据类型）

    一.数据与数据类型 1 什么是数据? x=10,10是我们要存储的数据 2 为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3 数据类型 数字(int) 字符串 ...

  9. Tensorflow深度学习之十二：基础图像处理之二

    Tensorflow深度学习之十二:基础图像处理之二 from:https://blog.csdn.net/davincil/article/details/76598474   首先放出原始图像: ...

  10. 利用WPF建立自己的3d gis软件（非axhost方式）（二）基础状态切换

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(二)基础状态切换   先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密 ...

随机推荐

  1. 深入了解java虚拟机（JVM） 第十章 字节码指令

    一.字节码指令的含义 Java字节码指令由一个字节长度的,代表某种特定操作含义的数字(操作码)以及其后的零至多个代表此操作所需参数(操作数).此外字节码指令是面向操作数栈的,这里操作数栈在功能上对应实 ...

  2. 【OCP题库-12c】最新CUUG OCP 071考试题库（69题）

    69.(31-1)choose the best answer: Evaluate the following query: SELECT INTERVAL '300' MONTH, INTERVAL ...

  3. Code Chef February Challenge 2019题解

    传送门 \(HMAPPY2\) 咕 话说这题居然卡\(scanf\)的么??? int T;cin>>T; while(T--){ cin>>n>>a>> ...

  4. httpclient4.5 https请求 忽略身份验证

    import org.apache.commons.collections.MapUtils; import org.apache.http.*; import org.apache.http.cli ...

  5. PUSH的整体设计

  6. 使用deque模块固定队列长度，用headq模块来查找最大或最小的N个元素以及实现一个优先级排序的队列

    一. deque(双端队列) 1. 使用 deque(maxlen=N)会新建一个固定大小的队列.当新的元素加入并且这个队列已满的时候,最老的元素会自动被移除掉 >>> from c ...

  7. Error:(1, 1) 错误: 需要class, interface或enum

    这个东西在Ideal里面报的错误,在控制台提示: Error:(1, 1) 错误: 需要class, interface或enum 网上搜到说是编码问题,我的解决方式: 把出错的文件选中复制一份,再随 ...

  8. iOS --UIScrollView的学习（一）

    1.为什么使用UIScrollView 因为移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限,当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容普通的UIV ...

  9. C#-WebForm-Request、Response、QueryString

    知识点: Request - 获取请求对象 专门用来接传递过来的值 Request["key"](李献策lxc) 1.获取地址栏传递过来的值 get 2.获取表单传递过来的参数值 ...

  10. [Re:从零开始的分布式] 0.x——分布式锁概述

    为什么需要分布式锁 Martin Kleppmann是英国剑桥大学的分布式系统的研究员,Martin认为一般我们使用分布式锁有两个场景: 效率:使用分布式锁可以避免不同节点重复相同的工作,这些工作会浪 ...