HTML基础
头部标签释义
- 在网页中，HTML决定网页的结构，CSS决定网页的样子，JS决定网页的行为。
<!DOCTYPE html>声明样式，告诉浏览器这是一个html文档。<meta>标签：用于方便浏览器解析或搜索引擎搜索，一般放置于中，用"名称/值"方式：
1.表示文档内容类型、编码字符信息：
<meta charset="UTF-8">
2.为搜索引擎定义关键词：<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
3.描述网页内容：<meta name="description" content="Free Web tutorials on HTML and CSS">
4. 定义网页作者：<meat name="author" content="Wang Jiabin">
5. 每30秒刷新当前页面：<meta http-equiv="refresh" content="30">
HTML知识点
- HTML的结构元素：
header（头部）
nav（导航）
aside（侧边栏）
article（独立文章内容）
section（独立区域）
- HTML表单：
一、
<form method="post" action="login.html" enctype="text/plain">1.
action="url"表示把表单提交到某个页面。
2.method=get/post表示表单向服务器发送数据的方式。get提交时表单数据会在地址栏中显示，而post提交则不会显示所以，post提交更为安全。
3.enctype="text/plain"enctype属性规定在发送到服务器之前应该如何对表单进行编码，text/plain则表示为空格转换为+但不对特殊字符编码。二、表单元素：
input=""标签属性：
type（默认值）、password、email、CheckBox、radio、button、submit、reset、file、image、URL、hidden、number、range、search。name、value（可选，该元素的初始值），size（该元素的初始宽度），maxlength（可输入的最大字符数），checked（表示被选中）。- 列表框
<select>/<option>标签：
中必须含有一个。在option有多行选项需要滚动查看时，size属性设置可提示看到的行数。selected属性表示默认选中该行列表项。- 按钮：button（普通按钮），要和事件如onclick关联使用。submit（提交表单到action指定的URL并传递表单数据）。reset（重置按钮），如果要求美观可使用图片按钮如
<input type="img" src="图片路径"/>- 多行文本域：textarea不能用value属性赋初始值。
<textarea name="标识名" cols="显示的列数" rows="显示的行数"> 自我评价 </textarea>
- 数字number：限制输入的文本为数字，设定其最大值和最小值、合法的数据间隔step或默认值等。
<input type="number" name="num" min="0" max="100" step="10"/>- 滑块range：作用和数字number一样，只是外观显示为用滑块来选择数据值。
<input type="range" name="range" min="0" max="100" step="10"/>- 搜索框search：在任意页面中用于输入搜索关键词的文本框。
<input type="aearch" name="sousuo"/>- 文本域，用于文件上传：
<input type="file" mane="files"/>
<input type="submit" name="upfiles" value="上传"/>- 当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为：multipart/form-data，表示把表单数据分为多部分提交。
- 表单隐藏域：hidden，数据不会在页面上显示但是会随着表单一起提交。
<input type="hidden" mane="user" value="20"/>- 表单元素的只读属性：readonly；禁用：disable。
- W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。
- 表单元素的标注label：当鼠标点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定，name属性和id属性必须写。id
的属性必须要和for的属性对应起来，或者直接把表单写进label里面。<input id="radMale" name="gender" type="radio"> <label for="radMale">男</label>补充属性：
<form>：供用户输入的表单<input>：输入框textarea：文本域（多行输入）<label>：定义<input>元素的标签，一般为输入标题<select>：下拉选项列表<optgroup>：选项组<option>：下拉列表中的选项<button>：按钮<submit>：提交<datalist>：指定一个预先定义的输入控件选项列表<keygen>：定义了表单的密钥对生成器字段<output>：计算结果<fieldset>：定义一组相关的表单元素，并使用外框包含起来<legend>：定义<fieldset>元素的标题表单验证：
- 好处：减轻服务器的压力，确保数据的可行性和安全性。
- placeholder：文本框内的提示内容
<input type="text" name="name" placeholder="请输入你的姓名"/>- required:规定文本框的内容不能为空。
<input type="email" name="email" required/>- pattern: 表示输入的内容必须符合正则表达式自定义的规则。
`````表示规定以13、15开头的11位数字。
<iframe>框架
作用：在当前网页中引入其他网站的页面内容，配合
<a>标签的targer属性及<iframe>标签的name属性，可实现窗口间的关联
<iframe name="baidu" src="引用页面的链接地址"></iframe>
属性：name=“框架标识名”
frameborder=“边框”
scrolling=“是否出现滚动条”
noresize="noresize"更改页面大小
CSS基础知识
CSS块级/内联元素
- 块级元素
<address>,<caption>,<div>,<h1~h6>,<ul>,<ol>,<li>,<p>,<table>,<td>,<th>,<tr>,<dl>,<dt>,<dd>
1.块级元素默认情况下独占一行
2.块级元素可以容纳块级元素和行级元素
3.块级元素的大小是可以控制的，通过css属性来调整其宽高
- 行级元素
<a>,<br>,<em>,<i>,<img>,<input>,<span>,<strong>,<select>
1.行级元素默认情况下是在一行排列，不换行
2.行级元素可以容纳行级元素和文本，不可容纳块级元素
3.行级元素的宽高是不可改变的
4.行级元素可以产生换行和空格
- 行块级元素
1.通过
display:inline-block属性可以设置其为行块级元素，也就是他具备行级元素和块级元素的共同特点，不换行但是可以设置其宽高
CSS盒模型
一、盒模型的特点
- 内容（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
二、盒模型分为两种：
- W3C的标准盒模型（标准盒模型）
标准盒模型的content的范围包括margin、padding、border、content，并且content部分不包括其他部分。 - IE盒模型（怪异盒模型）
怪异盒模型的content的范围也包括margin、padding、border、content，但是IE盒模型的content部分包括了border和padding。
三、box-sizing的使用
box-sizing:border-box：用于IE盒模型
box-sizing:content-box：用于W3C盒模型
css选择器
- 通配符选择器：*
*{
padding:0;
margin:0;
}
-
ID选择器:#
#body{background-color:blue;} -
类选择器：.title
.title{font-size:12px;} -
标签选择器：a、h1、p…
a{color: red;} -
属性选择器：可以根据元素中的属性或属性值累选取指定元素。
- [属性名]选取含有指定属性的元素。
p[title] - [属性名=“属性值”]选取含有指定属性值的元素。
p[title="hello"] - [属性名^=“属性值”]选取属性值以指定内容开头的元素。
p[title^="ab"] - [属性名$=“属性值”]选取属性值以指定内容结尾的元素。
p[title $="c"] - [属性名*=“属性值”]选取属性值以包含指定内容的元素。
p[title*="c"]
-
并集选择器：
#p1,a,div,.dom{} -
子元素选择器：>
div span>ad1{} -
后代选择器：空格
div h1{} -
伪类选择器：
- a:link未访问时的状态
- a:visited访问过后的状态
- a:hover鼠标经过、悬停时的状态
- a:active鼠标按下去的状态
- :first-child,选中第一个子元素
- :last-child,选中最后一个子元素
- :nth-child($),选中任意位置的元素，（even表示偶数位，odd表示奇数位）
- 伪元素选择器：
- ::before
- ::after
-
E+P：选中紧跟在E元素之后的P元素
-
E~P：选中E元素后面的所有P兄弟元素
-
否定伪类：可以从已选中的元素中剔除某些元素
p:not(.hello) -
CSS选择器的比较
!important>行内样式>ID>class/属性选择器>标签选择器>通配符选择器
css权重（256进制）
!important----infinity
行间样式----1000
ID----100
class/属性/伪类----10
标签/伪元素----1
通配符----0
gradient线性渐变
（1）常规语法：
linear-gradient(to left/right,color1,color2)
（2）浏览器兼容语法：-兼容语法-linear-gradient(to left/right,color1,color2)
（3）现象渐变方向：to right/to left,to bottom/to top,to top left/to top bottom,to bottom lfet/to bottom right,
CSS3径向渐变radial-gradient：圆形渐变，颜色从一个起点朝所有方向混合。语法和线性渐变相似。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
