1、列表
1、有序
<ol></ol>
<li></li>
属性:
1、type
2、start
2、无序
<ul></ul>
<li></li>
属性:
1、type
取值:
circle
square
disc(默认)
none
3、定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
2、结构标记
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
3、表单
1、表单元素
<form></form>
属性
1、action
表单提交的服务器程序路径
2、method
1、get
2、post
3、enctype
1、application/x-www-form-urlencoded
2、multipart/form-data
3、text/plain
2、表单控件
1、input元素
语法:<input>
属性:
1、type
2、name
3、value
4、disabled
1、文本框与密码框
<input type="text">
<input type="password">
属性:
1、maxlength
2、readonly
2、单选按钮和复选框
1、单选按钮
<input type="radio">
属性:
name:分组,一组中最多只能有一个按钮被选中
checked:默认被选中
2、复选框
<input type="checkbox">
name:分组,在后台服务器中,可以以一个组名获取所有的选中值。
checked:默认被选中
3、按钮
1、提交按钮
<input type="submit">
功能:提交表单数据到服务器
2、重置按钮
<input type="reset">
功能:将表单数据恢复到初始化
3、普通按钮
<input type="button">
功能:执行客户端脚本
4、隐藏域和文件选择框
1、隐藏域
<input type="hidden">
2、文件选择框
<input type="file">
注意:
1、表单的 method 必须为post
2、表单的 enctype 必须为 multipart/form-data
2、textarea元素
<textarea>内容</textarea>
属性:
1、name :名称
2、cols :一行中的字符数,变相设置宽
3、rows :默认显示多少行数据
4、readonly
3、select 和 option 元素
选项框(下拉选项框,滚动列表)
<select></select>
name:名称
size:大于1的话则为滚动列表
multiple:设置多选
<option></option>
value:值
selected:预选中
4、其他元素
1、为控件分组
<fieldset>
<legend>组名</legend>
</fieldset>
2、关联文本与表单控件
<label>文本</label>
属性:
for:要关联的表单控件的ID值
3、按钮
<button>内容</button>
注意:
该元素 放在 form 中则为提交按钮,否则为普通按钮(IE除外)
4、其他元素
1、浮动框架
<iframe>内容</iframe>
属性:
src:引入浮动框架的url
width:
height:
frameborder:浮动框架的边框
2、摘要与细节
<details>
<summary></summary>
</details>
3、度量元素
<meter>内容</meter>
min:最小值,默认为0
max:最大值,默认为1
value:显示的度量值
4、高亮显示
<mark></mark>
5、时间元素
<time>文本内容</time>
datetime:关联的日期时间
=================================
1、CSS概述
2、CSS语法
3、尺寸与边框
=================================
1、CSS概述
1、问题
1、设置页面中所有的文本颜色为红色
2、页面中所有的div里面的文本的颜色变为 蓝色
3、页面中所有的div里面的文本的颜色变为 绿色
HTML元素属性的弊端:
1、想完成相同效果,却要使用不同属性
2、HTML元素改变的样式可重用性不高
2、CSS
CSS:Cascading Style Sheets
层叠样式表,级联样式表,样式表
特点:
1、实现了网页内容与表现相分离
2、提高了代码的可重用性和可维护性
3、CSS与HTML之间的关系
1、HTML用于构建网页的结构
2、css负责构建HTML页面元素的样式
4、HTML属性和CSS样式的使用原则
W3C建议 尽量使用CSS样式取代HTML属性
1、修改文本的颜色
推荐使用css的color属性
2、修改元素的背景颜色
推荐使用css的background-color属性
如果是HTML元素所特有的属性的话,只能使用HTML元素属性
td元素属性colspan
5、使用CSS样式表的方式(重点)
1、内联方式
作用:将样式定义在单个的HTML元素中
语法:
<ANY style="样式声明1;样式声明2"></ANY>
样式声明语法:
样式属性:属性值
eg:
1、文本颜色的样式属性
color:red;
2、背景颜色的样式属性
background-color:green;
3、文本大小的样式属性
练习:设置页面上的 某个 div 元素中的 样式 , 文本颜色为 黄色(yellow),背景颜色为黑色(black),字体大小为48像素
2、内部样式表
1、特点
应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性,同时体现内容与表现相分离
2、语法
1、在 <head>元素中 增加 <style></style>标记用来声明样式
2、在 <style></style>元素中 编写若干 “样式规则”
样式规则语法规范:
&nb