H5学习感悟04
浏览器的内核
| 浏览器名 | 内核名 | 特点 |
|---|---|---|
| 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>
首行缩进
水平线标签（单）
<hr />
换行标签(单)
<br />
布局标签，没有语义
<div>div>
<span>span>
文本格式化标签
| 标签 | 效果 |
|---|---|
|
文字粗体方式显示 |
|
文字 斜体 |
|
文字 删除线 |
|
文字下划线 |
推荐用后一种，加强语义
标签属性
<hr width="500">
标签的属性不需要加单位- 属性不分顺序 但属性之间要空格隔开
图片标签（单）
<img src="../file/test.png">
| img标签属性 | 作用 |
|---|---|
| src | 图片路径 |
| alt | 图片显示不出的替换文字 |
| title | 当鼠标悬停的时候显示的文字 |
链接标签
<a href="">a>
| a链接属性 | 作用 |
|---|---|
| href | 要跳转的页面路径 |
| target | _blank: 新窗口打开 _self:当前窗口 |
锚点定位
<a href="#xixi">跳转a>
<h2 id="xixi">6666h2>
base标签（单）
<base target="_blank">
- 必须放在head标签下
特殊字符
| 特殊字符 | 作用 |
|---|---|
|
空格符 |
< |
< |
> |
> |
& |
& |
© |
版权符 |
注释标签
列表标签
无序列表
<ul>
<li>111li>
<li>222li>
<li>333li>
ul>
ul下只放li标签,其他的标签可以写在li下
有序列表
<ol>
<li>111li>
<li>222li>
<li>333li>
ol>
ol下只放li标签,其他的标签可以写在li下
自定义列表
<dl>
<dt>111dt>
<dd>222dd>
<dd>333dd>
<dd>444dd>
<dd>555dd>
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>66666p>
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>111td>
<td>222td>
<td>333td>
tr>
thead>
<tbody>
<tr>
<td>444td>
<td>555td>
<td>666td>
tr>
<tr>
<td>777td>
<td colspan="2">888 999td>
tr>
tbody>
table>
跨行合并
rowspan 合并的行数
<table width="200" border="1px">
<caption>表格的标题caption>
<tr>
<td>111td>
<td>222td>
<td rowspan="2">333666td>
tr>
<tr>
<td>444td>
<td>555td>
tr>
<tr>
<td>777td>
<td colspan="2">888 999td>
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>111option>
<option>222option>
<option>333option>
<option>444option>
select>
<select>
<option>111option>
<option>222option>
<option>333option>
<option selected="selected">444option>
select>
selected=“selected” 默认选中
html5新增标签和属性
header
标签定义文档的页眉(介绍信息)
<header>
<h1>Welcome to my homepageh1>
<p>My name is Donald Duckp>
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>111option>
<option>222option>
<option value="">333option>
<option value="">444option>
datalist>
fieldset 分组
<fieldset>
<legend>1111legend>
<legend>2222legend>
用户：
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>