一、表单
作用：用来搜集用户信息
语法：
<form method="传送方式" action="服务器端文件"></form>
注：所有的表单元素都要放置在form中
1.文本框
语法：
<input type="text" placeholder="默认提示信息"/>
2.密码框
语法：
<input type="password" placeholder="密码"/>
3.提交按钮
语法：
<input type="submit" value="登录"/>
注：
- 通过value属性重新设置提交按钮上的文字内容
- 提交按钮和要提交的内容必须放置在同一个form中
4.单选按钮
语法：
<input type="radio" name="a" checked/>
注：
- 一组中的单选按钮设置一致的name属性值，可以达到多选其一的效果
- checked="checked" 在页面加载完成后添加默认选中项
- 当属性和属性值相同时，可以省略属性值
5.复选按钮
语法：
<input type="checkbox" checked/>
6.普通按钮
语法：
<input type="button" value="***"/>
注：
-普通按钮不具备提交功能，通常结合js点击事件来使用
-普通按钮默认文字内容为空，可通过value属性设置
7.下拉列表
语法：
<select> <option>a</option> <option selected>b</option> ... </select>
注：selected改变默认选中项
8.文本域
语法：
<textarea rows="行数" cols="字符宽度"></textarea>
扩展：禁止用户拖拽改变文本域大小，设置如下：
<textarea rows="15" cols="50" style="resize:none;"></textarea>
9.重置按钮
语法：
<input type="reset"/>
注：
-重置按钮必须和重置的内容放置在一个form中
- disabled="disabled" 给表单元素添加禁用状态
扩展： get和post的区别
- get用来获取数据，post用来发送数据
- get发送数据时，信息会显示在url地址栏中，post直接通过服务器发送数据，用户看不到这个过程
- get可以传送的数据量较小，一般不能超过2kb，post可以传送的数据量较大，理论上没有限制
- get安全性较低，post安全性较高
二、div
作用：无语义标签，主要用于布局和划分板块
语法：
<div>...</div>
三、span
语法：
<span>...</span>
作用：
-span标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化
-span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式
四、iframe框架
作用：将外部文件的内容嵌入到本页面中的某个位置
语法：
<iframe src="文件路径" width="数值" height="数值" frameborder="1|0" scrolling="no"></iframe>
注：
如何去掉或隐藏iframe的滚动条：
scrolling="no"
五、html注释
语法：
html注释
CSS基础
一、css概念及特点
css———层叠样式表
特点：很好的实现了结构与表现相分离
作用：对html页面中的标记进行样式的设置，如字体颜色，大小，对齐方式等
二、css基础语法
css由选择符和声明两大部分组成，声明又是有属性和属性值组成。
即：
选择符{属性:属性值;}
eg:
h1{color:red;}
注：
css属性和属性值之间用冒号连接，每条声明结束要加分号
三、样式表的创建
1.内联样式表(行间样式，行内样式)
语法：
<标记 style="属性:属性值;"></标记>
eg: <h1 style="color:red;">千锋教育</h1>
2.内部样式表（嵌入式样式）
语法：<style type="text/css">...</style>
eg:
<style type="text/css"> h1{ color:red; } </style>
注：style标签一般放在head部分
3.外部样式表
a）使用link标签引入外部样式表
首先创建一个后缀名为.css的文件
然后在html页面使用link标签引入，语法如下：
<link rel="stylesheet" type="text/css" href="css文件路径"/>
注：
-
rel用来设置引入文件与当前文件之间的关系
-
link标签一般也放在head部分
b) 使用@import引入css文件
语法：@import "css文件路径";
注：@import导入css文件时，必须放在所有本页面样式之前才能生效
link和@import引入外部样式的区别：
-
link是html标签，除了可以引入css文件外，还可以引入其他内容。
@import是属于css范畴，只能引入css文件。
-
link引入的css文件和页面同时加载，@import引入的css文件在页面加载完成后载入
注：加载顺序不同
- link是html标签，无兼容性问题，所有浏览器都支持，@import低版本浏览器不支持
注：浏览器支持不同
- link是html标签，支持js控制dom改变样式，@import不支持
注：是否支持js改变dom
四、样式表的优先级（三种样式表创建的区别）
采取就近原则，即离被设置的元素越近，优先级越高，一般为：
内联>内部>外部
当在css属性值中出现!important关键词时，它的优先级最高，即
!important>内联>内部>外部
五、css注释
语法：/* 注释内容 */
六、css选择器
1.id选择器
语法：<标记 id="id名"></标记>
id名{属性:属性值;}`
eg: <h1 id="edu">千锋教育</h1> #edu{color:red;}
注：
- id名要语义化命名，不能使用中文，数字，或以数字开头，也不能使用关键词，敏感词
常见命名方法：驼峰命名法(qfEduTit),下划线连接命名法（qf_edu_tit）
- id名是唯一的，不能出现同名的id
2.class选择器（类选择器）
语法：<标记 class="类名"></标记> .类名{属性:属性值;}
eg: <h1 class="edu">西安千锋</h1> <h1 class="edu">北京千锋</h1> .edu{color:red;}
注：我们可以给具有相同样式的元素添加相同的class名
3.元素选择符（类型选择符，标签选择器）
语法：标记名称{属性:属性值;}
eg: a{text-decoration:none;} body{font-family:"微软雅黑";}
注：
a)如果想改变某个元素的默认样式时，可以使用类型选择符；
b)当统一文档某个元素的显示效果时，可以使用类型选择符；
4.后代选择器
语法：选择符1 选择符2{属性:属性值;}
eg: .uls li{color:red;}
注：使用后代选择器必须满足条件：选择符1和选择符2必须是包含与被包含的关系
5.群组选择器
语法：选择符1,选择符2,选择符3{属性:属性值;}
eg: h1,h2,h3,h4,h5,h6,strong{font-weight:normal;}
6.通配符
语法： *{属性:属性值;}
eg: *{margin:0; padding:0;}
注：*匹配html根元素下所有的标签元素
7.伪类选择器
语法：选择符:hover{属性:属性值;}
注：a的四个状态，按照顺序依次为：
a:link 超链接的初始状态
a:visited 超链接被访问过后的状态
a:hover 鼠标滑过超链接时的状态
a:active 鼠标按下时的状态
记忆方法：爱恨原则
L o V e H A t e
注：在实际项目中我们会这样简写a的四个状态：
a{color:gray;} a:hover{color:blue;}
注：可以给任意一个html元素添加滑过状态，例如：
li:hover{background:pink;}
七、css选择器权重
概念：当多个选择器针对同一个元素设置相同的样式时，会优先使用选择器权重较高的样式
我们将选择器的权重分为以下四个等级：
a)内联样式 <h1 style="..."></h1> 权重：1000
b)id选择器 权重：100
c)class选择器，伪类选择器，属性选择器 权重:10
d)类型选择符，伪元素选择器 权重：1
注：
- 后代选择器的权重为所有选择器权重之和
- 群组选择器权重为选择器自身的权重
- 当权重相同时，取后面定义的样式
★ css层叠的含义
层叠指的是样式的优先级，当产生冲突时以优先级高的为准
-
内联样式>内部样式>外部样式（除非使用!important标记 ）
-
id选择符>类选择符>元素选择符
- 权重相同时取后面定义的样式
网友评论