1.页面基础结构
<!DOCTYPE html>
<html lang="en">
<!--头-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css-->
<link rel="stylesheet" href="">
</head>
<!--身体-->
<body>
<!--脚-->
<footer>
</footer>
<!--script-->
<script></script>
</body>
</html>
这个知识点主要是要注意HTML的整体结构,以及css、script的引入位置
2.块级元素以及行内元素的特征
块级元素基本特征:
- 能识别宽高
- margin和padding的上下左右均可以调整
- 可以自动换行
- 多个块级元素标签在一起默认排列方式为从上至下
行内元素基本特征:
- 不自动换行
- 能够识别宽高
- 默认排列方法从左到右
常见块级元素有:div
常见行内元素有:span
3.标题及文字标签
标题标签:h1~h6
文字段落标签:<p></p>
加粗标签:<b></b> <string></string>
倾斜标签:<i></i>
下划线标签:<u></u>
删除线标签:<s></s>
强调:<em></em>
文本强行换行:<br>
字体颜色:<font color=" ">
字体大小:<font size=" ">
字体:<font face=" ">或<font family=" ">
加粗属性:font-weight:bold
锚文本,超链接:<a href=" http://www.baidu.com/"></a>
4.按钮
属性 | 值 | 备注 |
disable | disable | 规定应该禁止该按钮 |
form | form-name | 规定按钮属于一人或多个表单 |
name | button-name | 规定按钮的名称 |
type | button reset submit | 该按钮是提交按钮(除了IE外其他浏览器的默认值) 可点击的按钮(IE浏览器的默认值) 重置按钮(清除表单数据) |
value | text | 规定按钮的初始值 |
form属性的值必须是按钮所属表单的id。如需引用多个表单,使用空格分隔的列表。
name属性用于在JavaScript中岁元素进行引用,或者在表单提交之后,对表单数据进行引申。
方法:
属性 | 描述 |
onkeyup | 松开一个键时执行的脚本 |
onblur | 当元素失去焦点时执行的脚本 |
onclick | 当元素区域内单击鼠标左键时执行的脚本 |
ondbclick | 当元素区域内双击鼠标左键时执行的脚本 |
onfocus | 当元素取得焦点时执行的脚本 |
onmousedown | 当元素区域内按下鼠标键(不分左右键)时执行的脚本 |
onmousemove | 当鼠标指针在元素区域内移动时执行的脚本 |
onmouseout | 当鼠标指针移出元素区域时执行的脚本 |
onmouseover | 当鼠标指针移入元素区域时执行的脚本 |
onmouseup | 在元素区域内松开鼠标键(不区分左右键)时执行的脚本 |
onkeydown | 按下一个键时执行的脚本 |
onkeypress | 按下并松开一个键时执行的脚本 |
5.文本框
autocomplete | on off | 规定是否使用输入字段的自动完成功能 |
checked | checked | 规定此 input 元素首次加载时应当被选中 |
disabled | disabled | 当 input 元素加载时禁用此元素 |
form | formname | 规定输入字段所属的一个或多个表单 |
maxlength | number | 规定输入字段中的字符的最大长度 |
name | field_name | 定义 input 元素的名称 |
pattern | regexp_pattern | 规定输入字段的值的模式或格式 |
placeholder | text | 规定帮助用户填写输入字段的提示 |
readonly | readonly | 规定输入字段为只读 |
required | required | 指示输入字段的值是必需的 |
type | button checkbox file hidden image password radio reset submit text | 定义可点击按钮 定义复选框 定义输入字段和“浏览”按钮,供文件上传 定义隐藏的输入字段 定义图像形式的提交按钮 定义密码字段,该字段中的字符被掩码 定义单选按钮 定义重置按钮,重置按钮会清除表单中的所有数据 定义提交按钮,提交按钮会把表单数据发送到服务器 定义单行的输入字段,用户可在其中输入文本(默认宽度为20个字符) |
value | value | 规定 input 元素的值。 |
6.表格(表头)
<table>
<!--表头-->
<thead>
<tr>
<th></th>
</tr>
</thead>
<!--表中数据-->
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
在页面上铺表时即可利用这种表的格式。
table为表格整体框架,thead为表头,th一般放表头内容,tr为行内容,td为纵内容
7.图标
<img src="" alt=""/>
src和alt可互补,当src引入图片路径无法使用时,可用alt试试引用,你会发现惊喜
图标可任意在网上查找,直接下载对应代码,插入到你的代码中
8.下拉选择
<select>
<option value="one">one</option>
<option value="two">two</option>
</select>
9.单选以及复选按钮
<!--单选按钮-->
<input type="radio" name="radio" value="1" checked/>
<input type="radio" name="radio" value="2" />
<!--复选按钮-->
<input name="subject" type="checkbox" value="math">
<input name="subject" type="checkbox" checked value="math">
<input name="subject" type="checkbox" checked="checked" value="English">
checked和checked="checked"两者无区别,可通用
10.textArea
<textArea>标签定义多行的文本输入控件
<textarea rows="10" cols="30">我是一个文本框,我可以随意拖动改变大小。 </textarea>
rows控制初始显示行数,cols控制初始长度
11.日期选择控件
<input type="date" value="2015-09-24" min="2015-09-16" max="2015-09-26"/>
min、max可控制时间的最小值以及最大值
12.属性