说明
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE,猎豹安全,360极速浏览器,百度浏览器 |
firefox | Gecko | 火狐浏览器内核 |
Safari | Webkit | 苹果浏览器内核 |
chrome | Blink | chrome/opera浏览器内核。Blink其实是Webkit的分支 |
目前国内一般浏览器都会采用Webkit/Blink内核,如360,UC,QQ,搜狗等
html基本结构标签
标签名 | 定义 | 说明 |
---|---|---|
html | html标签 | 根标签 |
head | 文档的头部 | 在head标签中我们必须设置的标签是title |
title | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
body | 文档的主体 | 元素包含文档的所有内容,页面内容基本都是放到body里面的 |
文档类型声明标签
文档类型声明,作用就是告诉浏览器使用哪种HTML版本显示网页<!DOCTYPE HTML>
这句代码的意思是:当前页面采取的是HTML5版本来显示网页
注意:
1.<!DOCTYPE>声明位于文档中的最前面的位置,处于html标签之前
2.<!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签
lang语言种类
用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页
其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文,但是定义为en的网页,浏览器会提示翻译该页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
字符集
在head标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8"/>
html常用标签
标题标签h
<h1> - <h6>
段落和换行标签p
<p>这是一个段落</p>
特点:
1.文档在一个段落中会根据浏览器窗口的大小自动换行
2.段落和段落之间保有空隙
<br/> <!--换行标签-->
文体格式化标签strong,em
语义 | 标签 | 说明 |
---|---|---|
加粗 | strong或者b | 更推荐strong加粗,语义更强烈 |
倾斜线 | em或者i | 推荐em |
删除线 | del 或者s | 推荐del |
下划线 | ins或者u | 推荐ins |
div和 span标签
div和 span标签没有语义的,就是一个盒子,拿来装内容的
特点:
1.<div>标签用来布局,但是现在一行只能放一个div.大盒子
2.<span标签用来布局,一行上可以多个span,小盒子
图像标签和路径img
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示的时候提示的文字 |
title | 文本 | 提示文本。鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度,不设置高度的情况下,宽高会等比例缩放 |
height | 像素 | 设置图像的高度,不设置宽度的情况 下,宽高会等比例缩放 |
border | 像素 | 设置图像的边框粗细 |
超链接标签a
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target:_self为默认值,_blank为在新窗口中打开新方式
_top 和 _parent笔记后面补上
空标签
<a href="#" target="_self">空标签</a>
下载标签
<a href="D:\360极速浏览器下载\DingTalk_v6.0.15.5081263.exe" target="_self">下载</a>
网页元素标签
文本,图像,表格,音频,视频都可以添加超链接
<a href="http://www.baidu.com" target="_parent"><img src="img.png"></a>
锚点链接
可以快速定位到页面中的某个位置
<a href="#fuck"><img src="img.png"></a>
<p id="fuck">333333</p>
特殊字符
> 和 <等特殊字符具体网上查
表格标签
属性名 | 属性值 | 描述 |
---|---|---|
align | left,center,right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素(视频说是左边为标准计算) |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<tr >
<th>名字</th>
<th>年龄</th>
<th>链接</th>
</tr>
<tr>
<td title="提示文字">小明</td>
<td>33</td>
<td>
<a href="https://www.baidu.com/">贴吧</a>
<a href="https://www.baidu.com/">baidu</a>
<a href="https://www.baidu.com/">306</a>
</td>
</tr>
<tr>
<td>小七</td>
<td>2</td>
</tr>
</table>
表格结构标签
在表格标签中,分别用:thread标签表格的头部区域,tbody标签表格的主体区域,这样可以更好的分清表格结构
以上标签都是放在table标签中
合并单元格
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
- 合并单元格三部曲
1.先确定是跨行还是跨列合并
2.找到目标单元格,写上合并方式=合并的单元格数量。比如:
<td colspan="2"></td>
3.删除多余的单元格
代码:
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<thead>
<tr >
<th>名字</th>
<th>年龄</th>
<th>链接</th>
</tr>
</thead>
<tbody>
<tr>
<td title="提示文字" align="center" rowspan="2">小明</td>
<td>33</td>
<td>
<a href="https://www.baidu.com/">贴吧</a>
<a href="https://www.baidu.com/">baidu</a>
<a href="https://www.baidu.com/">306</a>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">小七</td>
<td>2</td>
</tr>
</tbody>
</table>
列表标签
无序列表
<ul>
<li>333</li>
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
有序列表
<ol>
<li>333</li>
<li>333</li>
<li>333</li>
<li>333</li>
</ol>
自定义列表
在HTML标签中,dl标签用于定义描述列表(或定义列表),该标签会与dt(定义项目/名字)和dd(描述每一个项目/名字)一起使用
其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
1.dl里面只能包含dt和dd
2.dt和dd个数没有限制,经常是一个dt对应多个dd
代码:
<body>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</body>
表单
表单是为了收集用户信息
表单域
表单域是一个包含表单元素的区域
在html标签中,form标签用于定义表单域,以实现用户信息的收集和传递
form会把它范围内的表单元素信息提交给服务器
<form action="提交服务器地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
input表单元素
type属性的属性值及其描述如下:
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过js启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和"浏览"按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符 |
除了type属性外,input标签还有其他很多属性,其常用属性如下:
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值,如果是radio 或者是 checkbox ,则为提交给服务器的值,其他input为默认值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
<form action="1.php" method="get" name="表单域名称">
用户名:<input type="text" name="name" maxlength="6"><br/>
密码:<input type="password" name="pwd"><br/>
性别:
男<input type="radio" name="sex" checked="checked" value="1">
女<input type="radio" name="sex" value="2"><br/>
爱好:
游泳<input type="checkbox" name="hobby" value="1">
听歌<input type="checkbox" name="hobby" checked="checked" value="2">
游戏<input type="checkbox" name="hobby" value="3"><br/>
其他信息:<input type="text" name="qita" value="33"><br/>
上传头像:<input type="file" name="file1"><br/>
重置:<input type="reset"><br/>
提交:<input type="submit" value="注册注册">
</form>
1,name和value是每个表单元素都有的属性值,主要给后台人员使用
2,name表单元素的名字,要求单选按钮和复选框要有相同的name值
label标签
label标签为input元素定义标注(标签)
label标签用于绑定一个表单元素,当点击label标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
语法:
<label for="sex">男</label>
<input type="radio" id="sex" name="sex" checked="checked" value="1">
<label for="sex1">女</label>
<input type="radio" id="sex1" name="sex" value="2"><br/>
select标签
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用select标签控件定义下拉列表
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option selected="selected">选项5</option>
</select>
1,select中至少包含一对option
2,在option中定义selected="selected"时,当前项即为默认选中项
textarea表单元素
语法:
文本域:<textarea rows="3" cols="20">文本域提示</textarea><br/>
1.通过textarea标签可以轻松地创建多行文本输入框
2.cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用css来改变大小