浏览器的内核
| 浏览器名 | 内核名 | 特点 |
|---|---|---|
| Firefox | Gecko | 代码公开 |
| safari | Webkit | |
| Chrome | Blink | |
| Opera | Presto/chrome(现) | |
| ie | Trident |
web标准
- 结构标准
- 样式标准
- 行为标准
html的骨架格式
<html>
<head>
<title></title>
</head>
<body></body>
</html>
生成骨架的快捷键
html:5 + tab
! + tab
代表当前用的是html5的版本
标签
排版标签
标题标签
h1-h6
<h1></h1>
段落标签
<p></p>
首行缩进
<style type="text/css">
p{
text-indent: 2em
}
</style>
水平线标签（单）
<hr />
换行标签(单)
<br />
布局标签，没有语义
<div></div>
<span></span>
文本格式化标签
| 标签 | 效果 |
|---|---|
<b></b> <strong></strong> | 文字粗体方式显示 |
<i></i> <em></em> | 文字 斜体 |
<s></s> <del></del> | 文字 删除线 |
<u></u> <ins></ins> | 文字下划线 |
推荐用后一种，加强语义
标签属性
<hr width="500">
标签的属性不需要加单位- 属性不分顺序 但属性之间要空格隔开
图片标签（单）
<img src="../file/test.png">
| img标签属性 | 作用 |
|---|---|
| src | 图片路径 |
| alt | 图片显示不出的替换文字 |
| title | 当鼠标悬停的时候显示的文字 |
链接标签
<a href=""></a>
| a链接属性 | 作用 |
|---|---|
| href | 要跳转的页面路径 |
| target | _blank: 新窗口打开 _self:当前窗口 |
锚点定位
<a href='#id'></a>需要跳转的地方添加标签<标签 id="id"></标签>
<a href="#xixi">跳转</a>
<h2 id="xixi">6666</h2>
base标签（单）
<base target="_blank">
- 必须放在head标签下
特殊字符
| 特殊字符 | 作用 |
|---|---|
| 空格符 |
< | < |
> | > |
& | & |
© | 版权符 |
注释标签
<!-- -->
列表标签
无序列表
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
ul下只放li标签,其他的标签可以写在li下
有序列表
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ol下只放li标签,其他的标签可以写在li下
自定义列表
<dl>
<dt>111</dt>
<dd>222</dd>
<dd>333</dd>
<dd>444</dd>
<dd>555</dd>
</dl>
表格标签
处理整齐的大批量数据
tr 行标签
td 列标签
<table>
<tr>
<td></td>
</tr>
</table>
表格的属性
| 表格属性 | 作用 |
|---|---|
| border | 设置表格的边框 |
| cellspacing | 单元格与单元格之间的空白距离（默认2px） |
| cellpadding | 单元格内容与单元格的距离（默认1px） |
| align | 表格相对于网页的水平位置(left center right) |
表头标签
加粗居中显示
<table>
<tr>
<th></th>
</tr>
</table>
表格结构
thead+tbody
<table border="1" width="100" cellspacing="1" cellpadding="0" align="center">
<thead>
<tr>
<td>
<div></div>
<p>66666</p>
</td>
<td>
<div></div>
<p></p>
</td>
<td>
<div></div>
<p></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div></div>
<p></p>
</td>
<td>
<div></div>
<p></p>
</td>
<td>
<div></div>
<p></p>
</td>
</tr>
<tr>
<td>
<div></div>
<p></p>
</td>
<td>
<div></div>
<p></p>
</td>
<td>
<div></div>
<p></p>
</td>
</tr>
</tbody>
</table>
表格的标题
caption
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
合并单元格
跨列合并
colspan 合并的列数
<table width="200" border="1px">
<caption>表格的标题</caption>
<thead>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</thead>
<tbody>
<tr>
<td>444</td>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td>777</td>
<td colspan="2">888 999</td>
</tr>
</tbody>
</table>
跨行合并
rowspan 合并的行数
<table width="200" border="1px">
<caption>表格的标题</caption>
<tr>
<td>111</td>
<td>222</td>
<td rowspan="2">333666</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>777</td>
<td colspan="2">888 999</td>
</tr>
</table>
表单标签
input控件（单标签）
maxlength :输入的文本最大长度
value ：默认文本
| input type 属性 | 作用 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| button | 普通按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图像按钮 |
| 文件域 | 文件域 |
文本框和密码框
文本框<input type="text" name="">
密码<input type="password">
单选按钮
如果是一组，通过相同的name实现单选
单选按钮 <input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
默认选中
checked="checked"
<input type="radio" name="sex" checked="checked">
复选框
复选框
<input type="checkbox" name="hobby1">篮球
<input type="checkbox" name="hobby2">唱
<input type="checkbox" name="hobby3">跳
<input type="checkbox" name="hobby4">rap
按钮
普通按钮
普通按钮 : <input type="button" value="普通按钮 ">
提交按钮
提交按钮 :<input type="submit" value="提交按钮">
重置按钮
重置按钮 :<input type="reset" value="重置按钮">
图像按钮
图像按钮 :<input type="image" src="../file/test.png" name="">
label 标签
<label>
文本框 <input type="text" name="">
</label>
**如果label有多个表单，可以通多for-id 的形式定位**
<label for="tag">
文本框 <input type="text" name="">
文本框2 <input type="text" name="" id="tag">
</label>
文件域
文件域 :<input type="file" name="">
文本域
<textarea></textarea>
表单域
| 属性 | 作用 |
|---|---|
| action | url地址 |
| method | 提交方法 |
| name | 表单名 |
<form action="" method="post">
</form>
下拉菜单
<select>
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<select>
<option>111</option>
<option>222</option>
<option>333</option>
<option selected="selected">444</option>
</select>
selected=“selected” 默认选中
html5新增标签和属性
header
标签定义文档的页眉(介绍信息)
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
nav 定义导航
<nav> 导航</nav>
footer 定义页脚标签
<footer></footer>
article定义文章
<article></article>
section定义区域
<section></section>
aside 侧边
<aside></aside>
datalist
<input type="text" name="" list="data">
<datalist id="data">
<option>111</option>
<option>222</option>
<option value="">333</option>
<option value="">444</option>
</datalist>
fieldset 分组
<fieldset>
<legend>1111</legend>
<legend>2222</legend>
用户：
</fieldset>
html5新增的input type
| input type 属性 | 作用 |
|---|---|
| 邮箱 | |
| tel | 手机 |
| number | 数字 |
| url | url |
| search | 搜索 |
| range | 区域 |
| time | 小时分钟 |
| datetime | 时间 |
| month | 月年 |
| week | 星期 |
| color | 颜色 |
邮箱:<input type="email" name="">
手机:<input type="tel" name="">
数字:<input type="number" name="">
url:<input type="url" name="">
搜索:<input type="search" name="">
区域:<input type="range" name="">
小时分钟:<input type="time" name="">
年月日 :<input type="date" name="">
时间:<input type="datetime" name="">
月年:<input type="month" name="">
星期 年:<input type="week" name="">
颜色:<input type="color" name="">
html5新增的input 属性
| 属性 | 作用 |
|---|---|
| placeholder | 占位 |
| autofocus | 自动聚焦 |
| multiple | 多文件上传 |
| autocomplete | 自动记录 |
| required | 不为空 |
| accesskey | 快速定位光标 |
<input type="text" name="" placeholder="8888">
<input type="text" name="" autofocus="autofocus">
<input type="file" name="" multiple="multiple">
自动记录: <input type="text" name="777" autocomplete="autocomplete">
<input type="submit" name="" value="提交">
<input type="text" name="" required>
<input type="text" name="" accesskey="s">
多媒体标签
插入视频
<embed width="400" height="400" we
src="https://www.bilibili.com/video/av58485737?spm_id_from=333.334.b_686f6d655f706f70756c6172697a65.3"></embed>
<video controls autoplay width="500">
<source src="../file/music.mp3" type="">
</video>
插入音频
<audio src="../file/music.mp3" controls="controls" loop="-1" autoplay="autoplay"></audio>
兼容
<audio controls loop="-1">
<source src="../file/music.mp3" type="">
<source src="../file/music.ogg" type="">
//不支持
</audio>
扫一扫
544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
