前期认识
内核(渲染引擎)
- IE内核——Trident
- 火狐内核(Firefox)——Gecko
- 苹果内核(Safari)——webkit
- 谷歌内核——Blink
- Opera内核——Blink
HTML——超文本标记语言
<!doctype html> ——当前文档类型
<html>
<head>
<title>设置网页头部标题</title>
<meta name="description" content="对当前网站的描述信息">
<meta name="keywords" content="">——关键字
css书写位置
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="">
<link rel="icon" href=""> ——设置网页图标
<meta charset="UTF-8"> ——防止乱码
</head>
<body>
<br> ——换行
<hr> ——横线
<p>
——段落
</p>
<h1></h1>~<h6></h6> ——标题
<strong></strong>/<b></b> ——加粗
<em></em>/<u></u> ——倾斜
<ins></ins>/<u></u> ——下划线
<font color="" size=""></font> ——文字设置
<del></del>/<s></s> ——删除线
<img src="" title="悬停文字" alt="无图文字">
<a href="目标路径" title="悬停文字"></a> ——超链接
<p id="test2">2阿斯顿发撒旦法放大女</p>
<a href="#test2">找以数字为2开头的段落</a> ——锚链接
无序列表
<ul>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
自定义列表
<dl>
<dt>列表标题</dt>
<dd>列表项</dd>
</dl>
表格
<table>
<caption></caption> ——标签中可以设置 h1-h6样式的标题
<tr>
<td></td>
</tr>
</table>
表单域
<form action="设置一个用来处理表单数据的后台程序" method="设置提交方式">
<fieldset>
<legend>表单域所含内容</legend>
表单控件:
<input type="text" autofocus placeholder="灰色文字">——输入框,自动获取鼠标焦点
<input type="password">——密码
<input type="checkbox">——复选框
<input type="radio" name="" checked>——单选框
<input type="file">——上传控件
按钮:
<input type="reset">——重置按钮
<input type="submit">——表单提交按钮
<input type="image" src="">——图片提交按钮
<input type="button" value="按钮">——普通按钮
<textarea style="resize:none;"></textarea>——多行文本域
/*使用reszie:none可以禁止文本域随意拖拽*/
下拉列表框:
<select>
<optgroup label="">
<option></option>
</optgroup>
</select>
</fieldset>
</form>
</body>
</html>
表格
- border——默认表格没有边框
- width和height——设置表格大小
- cellspacing——设置单元格与table之间的距离 cellspacing="2" 默认值
- cellpadding——设置内容与单元格之间的距离
- bgcolor——设置背景色
- colspan——横向合并
- rowspan——纵向合并
- 设置表格或者内容对齐方式
align: left | center | right
✔ 如果将align属性设置给table,那么控制的是整个表格的对齐方式
✔如果将align属性设置给tr或者td,那么控制的是内容的对齐方式
- border-collapse: collapse;——边框合并
表单控件
1. 给表单控件设置 autofocus 自动获取鼠标焦点
2. 点击表单控件前文字选中对应的表单控件
<label for="phone_number">手机号:</label>
<input type="text" placeholder="请输入手机号" maxlength="11" id="phone_number">
备注:
label 中for属性的值对应的是 input标签中的id值