标签：css load tar square sea lin 清除 服务器 float
HTML网页基本结构
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
<body></body>等成对的标签，分别叫做开放标签和闭合标签。单独呈现的标签（空元素），如<hr/>;意为用 / 来关闭空元素。
标题标签：<h1>.....</h1>~<h6>.....</h6>
段落标签：<p>...</p>
换行标签：<br/>
水平线标签：<hr/>
字体样式标签：
加粗：<strong>...</strong>
斜体：<em>...</em>
图像标签
语法：<img src（图像地址）="path" alt（图像的替代文字）="text" title（鼠标悬停提示文字）="text" width（图像宽度）="x" height(图像高度)="y"/>
超链接标签
语法：<a href（超链接要联接的路径）="www.baidu.com" target（链接窗口）="_blank">百度一下</a>
应用场合：页面间链接；锚链接；功能性链接
列表可以分为：有序列表，无序列表，自定义列表
表格标签：<table>.....</table>
行标签:<tr>.....</tr>,可以有多行
单元格标签<td>......</td>,可以有多个单元格
表格的跨列：
指单元格的横向合并
表格的跨行：
指单元格在垂直方向上的合并
HTML标签常用属性
align：设置内容的对齐方式
size：设置水平线的高度
color：设置内容颜色
width：设置内容宽度
heigh：设置内容高度
行内元素：
<img/>、<strong></strong>、<em></em>
<hr>、<br>、<a></a>
块级元素
<h1></h1>~<h6></h6>、<p></p>
alt属性和title属性的去区别：
alt是在图片不能正常加载的时候会显示提示语两个
title是鼠标划上去显示的内容
超链接标签的使用场景：
页面链接、锚链接、功能性链接
视频元素：
语法：<video src="视频路径" controls></video>
属性及值：
controls 值：controls 表示视频元素的控件，如播放按钮
autoplay 值：autoplay 表示视频就绪后马上播放
loop 值：loop 表示视频结束后重新播放
preload 值：preload 表示视频在页面加载时进行加载，并预备播放
muted 值：音频输出为静音
width/height 值：length（px） 设置视频播放器的宽度和高度
音频元素：
<audio src="音频路径" controls></audio>
HTML5的结构元素：
header：标题头部区域的内容
footer：表及脚部区域的内容
section：Web页面中的一块独立区域
article：独立的文章内容
aside：相关内容或应用
nav：导航类辅助内容
<iframe>内联框架
<iframe src="path"(引用页面地址) name="mainFrame"(框架标识名)></iframe>
<iframe>属性（实现页面间的相互跳转）
在被打开的框架上加name属性：
<iframe name="mainFrame" src="subframe/the_second.html" />
在超链接上设置target目标窗口属性为希望显示的框架窗口名：
<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>
表单
语法：<form method="post"(规定如何发送表单数据 常用值：get/post) action="result.html"(表示向何处发送表单数据)></form>
元素格式：
<input type="text" name="fname" value="text"/>
type：元素类型。eg：text、password、checkbox、radio、submit、reset、file、hidden、image、button。默认值为text。
name：表单元素名称。
value：元素初始值。
size:表单元素的初始宽度。
maxlength：type为text或password时，输入的最大字符数。
checked：type为radio或checkbox时，指定按钮是否是被选中。
text:默认值
password：定义密码
radio：单选按钮
checkedbox：复选框
select：下拉框
textarea：多行文本域
file：文件选择字段
email：email地址
url：输入URL字段
number：输入数字字段
range：精确数值不重要的输入数字的控件
search：搜索字符串
HTML5新增的表单元素：
email、url、number、range、search
表单验证的好处：
减轻服务器压力；
保证数据的可行性与安全性
CSS3基本语法结构
选择器{ 示例 h1{
声明1； font-size：12px：
声明2； color：#f00：
........ }
}
行内样式：
使用style属性引入CSS样式
内部样式表：
CSS代码写在<head>的<style>标签中
外部样式表：
CSS代码保存在扩展名为.css的样式表中
链接式
导入式
链接式与导入式的区别：
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>连接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS样式优先级：
就近原则：越接近标签的样式优先级越高
外部样式>内部样式>行内样式
CSS3基本选择器
标签选择器 示例 h3{color：red；} 说明：可直接用于HTML标签
类选择器 示例 .class{color：blue；} 说明：可在页面中多次使用
ID选择器 示例 #id{color：green} 说明：在同一个页面中只能使用一次
选择器的优先级：
ID选择器>类选择器>标签选择器
高级选择器：
后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器
字体样式：
font-family：设置字体类型 举例：font-family：“隶书”；
font-size：设置字体大小 举例：font-size:12px；
font-style:设置字体风格 举例：font-style:italic;
font-weight:设置字体粗细 举例：font-weight：bold；
font：在一个声明中设置所有字体属性 举例：font：italic bold 36px “宋体”；
文本样式：
text-indent:设置首行文本的缩进 举例：text-indent:20px;
text-align：设置元素水平对齐方式 举例：text-align:right;
color：设置文本颜色 举例：color：#00C；
line-height:设置文本行高 举例：line-height:25px;
text-decoration:设置文本装饰 举例：text-decoration:underline;
文本阴影：
语法：text-shadow:color（阴影颜色） x-offset（水平位移） y-offset（垂直位移） blur-radius（阴影模糊范围）；
示例：h2{
font-size:18px;
text-shadow:blue 10px 10px 2px；
}
CSS超链接：
a:link 未单击访问时超链接样式 示例： a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 示例：a:visited{color:#333;}
a:hover 鼠标悬浮其上的超链接样式 示例：a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 示例：a:active{color:#999;}
设置伪类的顺序： a:link->a:visited->a:hover->a:active
列表样式：
none：无标记符号 示例：list-style-type:none;
disc：实心圆，默认类型 示例：list-style-type:disc;
circle：空心圆 示例：list-style-type:circle;
square：实心正方形 示例：list-style-type:square;
decimal：数字 示例：list-style-type:decimal;
网页背景
background-color 背景颜色
background-image 背景图像
background-repeat 背景重复方程式
background-position 北京定位
background-size 背景尺寸
CSS3渐变
线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
语法：background：linear-gradient（position color1 color2...）
径向渐变
圆形或椭圆渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
标准文档流
指元素根据块元素或行内元素特性按从上到下。从左到右的方式自然排列
组成：
块级元素（block）：
<h1>...<h6>、<p>、<div>、列表
内联元素（inline）：
<span>、<a>、<img/>、<strong>...
display属性：
block：块级元素默认值
inline：内联元素默认值
inline-block：行内块元素
none：设置元素不会被显示
display特性：
块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示与隐藏（none）
使块元素排在一行的方法：
inline-block；float
float属性：left：元素向左浮动
right：元素向右浮动
none：默认值，不浮动
清除浮动：
clear属性：
left：在左侧不允许浮动
right：在右侧不允许浮动元素
both：左右两侧不允许浮动
none：默认值。允许浮动元素出现在两侧
清除浮动，防止父级边框塌陷的四种方法：
浮动元素后加空div：空div会造成HTML代码冗余
设置父元素的高度：固定高度会降低元素可扩展
父级添加overflow属性：有下拉列表框场景不能用
父级添加伪类after：没有副作用，推荐使用
overf属性：
visible：默认值。内容不会被修剪，会呈现在盒子之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但浏览器会显示滚动条以便查看其余内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
position属性：
static：默认值
relative：相对定位
absolute：决定定位
fixed：固定定位
父级div定义height 优点：简单、代码少、容易掌握 缺点：只适合高度固定的布局，要给出精准的高度，如果高度和父级div不一样时，会产生问题 结尾处加空div标签clear:both 优点：简单、代码少、浏览器支持好、不容易出现怪问题 缺点：如果页面浮动布局多，需添加很多空div，父级div定义伪类:after 优点：浏览器支持好、不容易出现怪问题 缺点：代码多，要两句代码结合使用才能让主流浏览器支持 父级div定义 overflow:hidden 优点：简单、代码少、浏览器支持好 缺点：不能和position配合使用，因为超出的尺寸会被隐藏 父级div定义 overflow:auto 优点：简单、代码少、浏览器支持好 缺点：内部宽高超过父级div时，会出现滚动条 父级div也一起浮动 优点：没有优点 缺点：会产生新的浮动问题 父级div定义 display:table 建议：不推荐使用，只作为了解 结尾处加br标签 clear:both 建议：不推荐使用，只作为了解
标签：css load tar square sea lin 清除 服务器 float
原文地址：https://www.cnblogs.com/zjx-959/p/12090718.html
