HTML总结 HTML详细介绍重要知识点
2017-11-27 21:52
295 查看
标签
标题标签 <h1---h6> h1 字号最大 h6 字号最小
段落标签 <p>--</p>
换行标签 <br/>
字体加粗标签 <strong>---</strong>
字体倾斜标签 <em>---</em>
特殊符号
空格 &bnsp;
小于号 <
大于号 >
引号 "
版权符号 ©
图像标签的基本语法
<img src=“图片地址”alt=“图像无法显示时的替代文字”title=“鼠标悬停文字”
width=“图片宽度”height=“图片高度”/>
超链接
基本用法 <a href=“链接的地址”target=“从哪个窗口打开”>链接的文字或图像说明</a>
图像链接 <a href=“链接的地址”tarret=“从哪个窗口打开”><img src=“路径”alt=“”</a>
文本链接 <a href=“链接的地址”tarret=“从哪个窗口打开”>文字说明</a>
页面间链接
锚链接
<a name=“锚点”>目标</a>
<a href=“#锚点”>链接内容</a>
功能性链接 （电子邮件，qq MSN）
列表
有序列表 <ol type=“样式”>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
无序列表 <ul>
<li>第一项</li>
<li>第二项</li>
</ul>
自定义列表 <dl>
<dt>标题一<dt>
<dd>第一项</dd>
<dd>第二项</dd>
<dt>标题二</dt>
<dd>第一项</dd>
<dd>第二项</dd>
</dl>
创建表格 (<table>标签的border边框属性，指定边框的宽度。）
<table>
<tr>
<th>1行1列标题</th>
<th>1行2列标题</th>
<th>1行3列标题</th>
</th>
<tr>
<td>1行1列的单元格</td>
<td>…………</td>
</tr>
</table>
表格跨列
<table>
<tr>
<td colspan=“所跨的列数”>单元格内容</td>
</tr>
</table>
表格跨行
<table>
<tr>
<td rowspan=“所跨的行数”>单元格内容</td>
</tr>
</table>
video 的用法
<video src=“视频路径” contorls=“提供一些按钮”></video>
<video controls> autoplay(自由播放)
<source src=“video/video.wem”>
<source src=“video/video.mp4”>
</video>
audio 的用法
<aideo controls> autoplay(自由播放)
<source src=“aideo/aideo.ogg”>
<source src=“aideo/aideo.mp3”>
</audio>
HTML的结构元素
<header>
网页头部 article(独立的文章部分)
aside(相关内容 用于侧边栏)
nav(导航 辅助内容)
</header>
<section>
网页主体部
</section>
<footer>
网页底部
</footer>
<iframe> 框架
<iframe src=“引用页面地址” name=“mo” width=“宽”hight=“高”/>
<a href=“引用另一页面地址” target=“mo”>……</iframe>
表单
<form method=“提交方式”action=“提交地址”>
姓名：<input type=“text” name=“gan”/>
密码：<input type=“possword” name=“pass” />
单选按钮 （radio） value=“男”checked/>男 (checked 默认选项)
<input type=“radio”name=“gan” value=“男”/>男
<input type=“radio”name=“gan” value=“女”/>女
复选按钮 (checked)
<input type=“checkbox”name=“gan”value=“sports”>运动/>
提交按钮
提交到指定的URL
<input type=“submit”name=“”value=“提交”/>
<input type=“image”src=“”/>
普通提交
<input type=“button”name=“”value=“提交”/>
重置按钮 (reset)
<input type=“reset”name=“”value=“重置”/>
邮箱 （email）
<input type=“email”name=“”/>
网址 (url)
<input type=“url”name=“”/>
数字 （number）
<input type=“number”name=“”min=“最小值”max=“最大值”step=“数字间隔”/>
滑块 （range）
<input type=“range”name=“”min=“最小值”max=“最大值”step=“数字间隔”/>
搜索框 （search）
<input type=“search”na
4000
me=“”/>
隐藏域 （hidden）
<input type=“hidden”value=“”name=“”/>
列表框 （select）(selected 属于该选项默认值)
<select name=“列表名称”size=“行数”>
<option value=“可选项的值”>内容</option>
<option value=“ ”selected>……</option>
</select>
文本域 （file 用于上传的操作，文件，图片等）
<form method=“提交方式”action=“引用地址”enctype=“multipart/form-data”>
<input type=“file”name=“ ”/>
<input type=“snbmit”name=“”valu=“上传”/>
</form>
多行文本域 （textarea）
<textarea name=“”cols=“显示的列数”rows=“显示的行数”
文本内容
</textarea>
readonly 只读 disabled 禁用
表单初级验方法
一种提示 （pleceholder）
<input type=“ ”name=“”placeholder=“提示内容”/>
内容不能为空 (required)
<input type=“” name=“”required/>
是否与自定义的正则表达式相匹配 （pattern）
<input type=“”name=“”required pattern=“表达式”
\s 任意的空白符号
\S 非任意的空白符号
\d 任意的一个数字符号，等价于【0-9】
\D 任意的一个非数字符号，等价于【^0-9】
\w 匹配一个数字、下划线或符号，等价于【a-z A-Z】
\W 匹配一个非个字符号，等价于【^a-z A-Z】
.除了换行符号之外的任意符号
{n} 匹配前一项N次
{n，m} 匹配前一项至少n次，至多m次
* 匹配前一项0次或者多次
+ 匹配前一项1次或者多次
？匹配前一项0次或者1次
css的基本语法结构
（选择器）h1{（属性）font-size:（值）12px;
color:red;
}
<style>
在html中直接写
引入css样式的方法：
行内样式：（直接使用style属性设置css样式）
<p style=“font-size：14px； color：green；”>直接在html标签中设置样式</p>
内部样式表：（把css代码写在<head>的<style>标签中，与html内容在同一个文件中。）
外部样式表：
一：链接外部样式表
<head> rel(指的是页面中使用这个外接样式表) type(文件类型是样式表)
<link href=“引用文件所在位置”rel=“stylesheet”type=“text/css”/>
</head>
二：导入外部样式表
<style> @import（表示导入文件）
@import url(样式文件所在位置)
</style>
样式优先级：行内样式>内部样式表>外部样式表
基本选择器
1.标签选择器
p{font-size：16px；}
2.类选择器
.gan{font-size:16px;} class=“gan”
(类名称）
3.ID选择器
#gan{font-size:16px;} id=“gan”
(id名称)
选择器优先级：ID选择器>class类选择器>标签选择器
高级选择器
层次
后代选择器 E F （所有E元素后代中的F元素被选中）
子选择器 E>F (E元素的下一代F元素被选中)
相邻兄弟选择器 E+F （E元素相邻的后一个元素F元素被选中）
通用兄弟选择器 E~F （E元素后的所有兄弟被选中）
2.结构伪类选择器
E：first-child 父元素的第一个子元素E
E：last-child 父元素的最后一个子元素E
E F：nth-child（n） 父元素的第n个子元素F
根据类型
E：first-of-type 父元素中具有指定类型的第一个元素E
E：last-of-type 父元素中具有指定类型的最后一个元素E
E F：nth-of-type 父元素中具有指定类型的第n个元素F
3.属性选择器
E【attr】 选择具有属性attr的
E【attr=val】 选择属性attr=val属性值的必须一致
E【attr^=val】 以属性值val开头的
E【attr$=val】 以属性值val结尾的
E【attr*=val】 字符串val与属性值中的任意位置先匹配
五、美化页面
1.设置字体类型 font-family
font-family：隶书；
2.设置字体大小 font-size
font-size：12px；
3 设置字体风格 font-style
normal（标准） italic（斜体字体样式） oblique（倾斜字体样式）
font-style：italic；
4 设置字体粗细 font-weight
normal（标准 400） bold（粗体字体 700）bolder（跟粗的字体） lighter（更细的字体）
font-weight：bolder；
5 字体属性 （顺序 风格-粗细-大小-类型）
网页文本
1. 设置文本颜色 color
2. 设置水平对齐方式 text-align
left（排列在左侧，默认值）right（排列在右边）
center（排列在中间）justify（实现两端对齐文本效果）
3. 首行缩进 text-indent
4.文本行高 line-height
5.文本的装饰 text-decoration
none（默认值）underline（文本下划线）overline（文本上划线）
line-through（文本删除线）
6.垂直对齐方式 vertical-align
（设置文本于图片的居中对齐，此时的值为middle）
7.文本阴影 test-shodow可叠加
test-shodow：color x轴位移（x-offset） y轴位移（y-offset）模糊半径（blur-radiu）
超链接伪类
a：link 单击访问前的超链接样式
a：visited 点击访问后的超链接样式
a：hover 鼠标悬浮超链接样式
a：active 点击未释放超链接样式
列表样式
List-style-type:none\disc\circle\square\decimal
简写：list-style表示全部
背景样式
一、 背景属性
1. 背景颜色：background-color
2. 背景图像：background-image
1.> 背景图像
2.> 背景重复方式：backgrond-repeat：
（1） repeat
（2） no-repeat
（3） repeat-x
（4） repeat-y
3. 背景定位：background-position{
12px 12px; -12px -12px;
30% 60%; 80% 50%;
right top;~
}
背景的简写方式：
position: #c00 url() 205px 50px no-repeaet;
4. 背景尺寸：
1.> auto默认，原样
2.> percentage百分数
3.> contain图片正好适应自定义的辈子背景区域
4.> cover放大填充
5. CSS渐变
1.> 线性渐变linear-gradient(to top,red,green);
2.> 径向渐变redial-gradient(……)；
第六章---盒子模型
一、盒子模型
1、边框
1.>border-color:上右下左、上下左右、上 左右 下
2.>border-width：同上
3.>border-style: none;hidden;dotted;dashed;solid;double;……
简写方式：eg:border:1px solid black;
2、内边距-padding
3、外边距-margin
设置方法：上右下左、上下左右、上 左右 下
使用margin：0 auto；的条件：1.块元素 2.设置了固定宽度
二、 盒子尺寸：border-box:内容的宽度或高度content：border+padding+margin+height/width
三、 圆角边框：border-radius上右下左、上下左右、两对角
1> 圆形：块元素、宽高一致、圆角半径为宽高一半或50%
2> 半圆形：eg：上半圆border-radius：50% 50% 0 0 ；同理
3> 扇形：亦是如此，border-radius：50% 0 0 0 ；三同一不同：宽高圆角半径一致；取值不同
四、盒子阴影：box-shadow：10px 10px 10px #06c; box-shadow: inset 10px 10px 10px #06c;
第七章、浮动
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列
display （html标签的显示方式）
block （块级元素，该元素前后会带有 换位符）
inline （行内元素，该元素前后没有 换位符）
inline-block （行内块元素，该元素既具有行内元素的特性，也具有块元素的特性）
(可以让元素排在一行，并且支持宽度和高度，添加该属性在标准文档流中，不需要清楚浮动）
none （该元素不会被显示）
浮动：脱离文档流并向左/向右浮动，知道碰到父元素或另一个浮动元素
float 属性定义网页元素在哪个方向浮动。（可以让元素排在一行，并且支持宽度和高度，可以决定排列方向）
left（左） fight（右） none（默认值 不浮动）
清除浮动 （clear属性）
left（在左侧不允许浮动元素）
right（在右侧不允许浮动元素）
both（在左，右两侧不允许出现浮动元素）
none（默认值允许浮动元素出现在两侧）
解决父级边框塌陷的方法
1.浮动元素后面加空div
2.设置父元素的高度
3.父级添加overf属性
（visible 默认值，内容不会修剪，会呈现在盒子外）
（hidden 内容会修剪，其余内容不可见）
（scroll 内容会修剪，浏览器会显示滚动条 ）
（auto 内容会修剪，当内容溢出的高度时才会显示滚动条，底部的滚动条只有在x方向出现内容溢出时，才会显示）
4.父级添加伪类after
eg. .a：after{ content：“”；}/*在clear类后面添加内容为空/*
第八章
定位网页元素
position（定位）
static （默认值，没有定位，元素按照标准文档流进行布局）
relative （相对定位）
相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
absolute （绝对定位）
绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
rixed （固定定位）
固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
z-index （层叠）
透明度 opacity:x (0--1）值越小越透明
filter：alpha（opacity=x） （0--100） 值越小越透明
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html重要知识点总结
- CSS中padding、margin两个重要属性的详细介绍及举例说明
- Struts2重要知识点总结
- HashMap重要知识点总结
- HTML小知识点总结
- html 的 meta 总结，html 标签中 meta 属性使用介绍
- hibernate重要知识点总结
- html的meta总结，html标签中meta属性使用介绍
- HTML＆CSS日常知识点总结
- Linux集群服务知识点总结及通过案例介绍如何实现高性能web服务
- 详细介绍如何保护 MySQL 重要的数据
- html的meta总结，html标签中meta属性使用介绍（转）
- Codecademy上的HTML/CSS课程知识点总结（二）
- HTML meta标签总结与属性使用介绍
- 在html输入框中响应enter键盘------介绍重要的onkeydown方法实现“模糊查找”
- html知识点总结
- 【温故知新】——HTML基础重要知识点复习
- html的meta总结，html标签中meta属性使用介绍
- html知识点总结(二)