查阅资料
《网道HTML教程》 、网页编辑器：JSbin、代码沙盒 Codesandbox
关键词 MDN文档搜索
预览网页：
// 方法1
yarn global add http-server
http-server . -c-1
// 方法2
yarn global add parcel
parcel xx.html
HTML 基本骨架
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--文件的字符编码，utf-8支持全球语言-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minium-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>网页标题</title>
</head>
<body>
</body>
</html>
标签的全局属性
| 全局属性 | 内容 | 备注 |
|---|---|---|
| class | 给标签划分类别 | <div class="middle"> |
| contenteditable | 标签内容可直接编辑 | |
| hidden | 隐藏标签内容 | <div hidden> |
| id | 给标签指定标识 | 尽量少用，不报错 |
| style | 给元素指定样式 | 元素上直接指定样式的优先级高 JS指定样式优先级更高 |
| tabindex | 指定tab键顺序 | <h2 tabindex=1>值为0最后一个，-1不要访问 |
| title | 文字超长省略号 |
默认样式与重置
HTML发明时还没有CSS，浏览器给标签加上默认样式，但是都很丑，也就有了CSS Reset
查看默认样式，Chrome开发者工具，Elements -> Styles -> user agent stylesheet
重置样式：
//reset.css
*{margin:0; padding:0; box-sizing: border-box;}
*::after, *::before{box-sizing: border-box;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
button,input,select,textarea{font:inherit;}
table{border-collapse; border-spacing:0}
元素的显示模式
| 区别 | 内容 | 备注 | 常见 |
|---|---|---|---|
块元素display:block | <div> <p>在页面中独占一行 自上而下垂直排列 | 可设置宽、高属性 | div / form / p / ul / ol / h1-h6 / li |
内联元素 （行内元素）display:inline | <span>不会独占一行，在页面中只占自身大小 | 不可设置宽、高属性 本身宽高靠内容撑开 | a / span / em / strong |
行内块元素 display:inline-block | <img> <input>不换行 | 能够识别宽、高 | button / img / input |
div {
width: 200px;
height: 100px;
background-color: #dff;
}
h1 {
width: 300px;
height: 100px;
background-color: rgb(206, 206, 84);
}
span {
width: 300px;
height: 200px;
background-color: rgb(83, 103, 103);
}
.img1 {
width: 200px;
}
.img2 {
width: 200px;
}
<div>div</div>
<p>p</p>
<h1>h1</h1>
<span>span</span>
<strong>strong</strong>
<em>em</em>
<img class="img1" src="http.jpeg" alt="" />
<img class="img2" src="html.jpeg" alt="" />
常用标签
章节标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
/*只要 class 含 middle*/
.middle{
background:black;
}
.bordered{
border: 1px solid red;
}
</style>
</head>
<body>
<header title=“完整的内容xxxx”>顶部广告</header>
<main class="middle bodered">
<h1>文章标题</h1>
<h2 tabindex=1>副标题</h2>
<section>
<h2>第一章</h2>
<p tabindex=2>一段话</p>
</section>
</main>
<aside>
参考资料
</aside>
<footer>© 版权所有</footer>
</body>
</html>
内容标签
// ol+li (ordered list 有序列表)
<ol>
<li></li>
</ol>
//ul+li (unordered list 无序列表)
<ul>
<li></li>
</ul>
// dl+dt+dd (描述列表)
<dl>
<dt><dt>
<dd><dd>
</dl>
<pre> 可控制空格等格式在页面中显示 </pre>
<code> 里面的字是等宽的 </code> // font-family:monospace
<hr> 这是一个分割线 </hr>
<br> 这是一个换行标签 </br>
<a href="http://qq.com">QQ</a>
<em> 可把内容改为斜体 </em>
<strong> 可把内容加粗显示 </strong>
<quote> 内容引用 </quote>
a 超链接
作用是跳转到外部页面、内部锚点、邮箱或电话
| 属性 | 内容 | 备注 |
|---|---|---|
| href超链接 hyper ref | 超链接的地址 | <a href="https://qq.com">href取值有很多种：网址、路径 伪协议 <a href="javascript:;"> |
| target | 指定打开链接网址的方式 | <a target="_blank">target取值有:内置名字、程序员命名 _blank/_top/_parent/_self |
| download | ||
| ref=noopener |
table 表格
<table>
<thead>
<tr>
<th></th>
<th>小红</th>
<th>小明</th>
<th>小颖</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>61</td>
<td>85</td>
<td>98</td>
</tr>
<tr>
<th>英语</th>
<td>77</td>
<td>88</td>
<td>99</td>
</tr>
<tr>
<th>语文</th>
<td>81</td>
<td>92</td>
<td>84</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
</tfoot>
</table>
<style>
table{
width:600px;
table-layout:auto;
border-collapse:collapse; // 合并
border-spacing:0;
},
td,th{
border:1px solid red;
}
img 图像
作用是发出
get请求，展示一张图片
| 标题 | 内容 | 备注 |
|---|---|---|
| alt属性 | 图片加载失败显示的内容 | |
| height属性 | 高度 | <img height="400"> |
| width属性 | 宽度 | <img width="400"> |
| src属性 | 图片地址 | |
| onload事件 | 监听图片加载成功 | |
| onerror事件 | 监听图片加载失败 | |
| max-width：100% 响应式 |
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
img{
max-width:100%; // 图片响应式
}
</style>
<img id="xxx" width="400" src="dog2.png" alt="一只狗">
<script>
xxx.onload = function(){
console.log("图片加载成功");
};
xxx.onerror = function(){
console.log("图片加载失败");
xxx.src = "/404.png"
};
</script>
form 表单
表单由容器和控件组成，用来给用户填写信息，向Web服务器提交信息，发出get或post请求，然后刷新页面。
用于创建供用户输入的 HTML 表单，包含一个或多个如下的表单元素：
<input>、<select>、<option>、<label>、<button>、<textarea>
| 属性 | 内容 | 属性值 |
|---|---|---|
| name | 规定表单的名称 | text |
| action | 规定当提交表单时向何处发送表单数据 | URL |
| autocomplete | 是否提示自动填充 | on / off |
| method | 规定用于发送表单数据的 HTTP 方法 | get / post |
| target | 规定在何处打开 action URL | _blank / _self / _parent / _top |
| novalidate | 如果使用该属性，则提交表单时不进行验证 | novalidate |
表单由表单标签、表单域（输入框）、表单按钮组成。
input标签
规定了用户可以在其中输入数据的输入字段，输入字段可通过多种方式改变，取决于 type 属性。
<form action="demo_form.php">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
</form>
button标签
<button type="button">点我!</button>
type 属性的值有：button、reset、submit，规定按钮的类型。
select标签
用来创建下拉列表，<option> 标签定义了列表中的可用选项。
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
label标签
为 input 元素定义标注（标记），<label> 标签的 for 属性与相关元素的 id 属性相同，规定 label 与哪个表单元素绑定。
<form action="demo_form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>
