目录
(一）HTML简介
（1）普通静态网页最简单组合，HTML+CSS。
HTML，超文本标签语言，全称 HyperText Markup Lauguage。
其制作程度并不复杂，但是可以和其他技术相结合实现强大的功能，它主要是用来给网页提供内容的。
特点：1.简单 2.通用性 3.与平台无关
（2）web网页的三层结构：
结构层：由HTML提供的。核心是DIV，也就是内容层；
样式层：由CSS提供的，CSS的两大作用，布局（浮动布局，流式布局，flex布局）和美化（盒子模型+其它属性）；
行为层：由JS提供；
(二）HTML基本结构
HTML的基本骨架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
在HTML的基本骨架中，我们可以看到以下标签
| 标签 | 描述 |
|---|---|
| !DOCTYPE html | 文档声明 |
| html | 文档的根标签 |
| head | 网页的头部 |
| title | 网页的标题 |
| meta | 元信息 |
| body | 主体内容 |
(三）HTML构成与语法
一个HTML是由开始标签+标签内容+结束标签组成，组成的结果称为元素。
元素=开始标签+标签内容+结束标签
【标签和元素不是同一个概念】
例如：
<h1 title="first">Hello World</h1>
<!--
标 签：<h1></h1>
属 性：title="first"
元 素：<h1 title="first">Hello World</h1>
-->
单标签：只有开始标签，没有结束标签。例如:
<img src="./img/p1.jpg" alt=" ">
<br/>
<hr/>
双标签：有开始标签，也有结束标签。例如：
<table>表格</table>
任何一个标签上都有一个title，属性名不加引号，属性值通常加上引号
标签与标签之间有两种关系：
1.嵌套关系：
<table>
<thead></thead>
</table>
2.并列关系：
<tr>
<th></th>
<th></th>
</tr>
难免会想到会不会有交叉关系？HTML中没有交叉关系的
其它语法：
1.HTML中不区分大小写，我们写的时候都小写，因为绝大部分人对大写不太敏感；
2.对于单标签最后的 / 可加可不加；
3.对于属性来说 属性值可以不加引号；
HTML语法灵活，但不会报错，写错了页面就不会有你想要的效果。
虽然HTML的语法比较灵活，但是写代码时，还是需要遵循一些规则：
1.HTML的基本估计都要有，文档声明必须要有；
2.标签名都小写；
3.给属性值加上引号
4.有结束标签必须要加结束标签；
(四）HTML基本标签
（1）标题标签：（h：headline）
场景：应用于各大新闻、博客、文章的标题、网站的logo。
基本上任何一个网站都有，标题标签是有利于SEO
h:块级标签，独占一行
<h1></h1>
<h2></h2>
<h3></h3>
<!--h4、h5、h6不常用-->
（2）图片标签：
场景：网页中插入一张图片（一个图片也可以当做一个链接进行点击）
img：特殊行级标签，行内块，可以并排显示
<img src=" " alt=" ">
<!--
src:图片地址（相对地址/互联网上的绝对地址）
alt：1）当图片路径出错时，显示提示内容
2）有利于SEO
width：设置图片的宽度
height：设置图片的高度
-->
（3）段落标签
场景：语文中的段落，使用它进行分隔内容
p:块级标签，独占一行
<p>今天天气真的好好</p>
（4）超链接标签：
场景：形成一个链接
a:行内标签，会并排显示
<!-- 站外链接-->
<a href=“http：//www.baidu.com”>百度一下</a>
<!-- 站内链接-->
<a href=“./about.html”>关于我们</a>
<!-- 锚点链接 先打锚点，链接到锚点-->
<a name="dot"></a>
<a href="dot">联机到某个锚点</a>
<!-- 特殊的锚点 top （top可以省略不写）-->
<a href="#top">返回顶部
重要的属性：
href：表示一个链接的地址 href=”http：//www.baidu.com”
target：_blank 表示以一个新的选项卡打开链接，_self 表示在当前选项卡中打开链接
name：用于设置锚点
title：设置提示内容，鼠标放上去显示提示内容.【如果是站外链接需要加上http：// https://】
（5）列表相关标签
分类：
无序列表:用的相当的多，用来列表或者导航，基本上任何一个网站都会有列表
有序列表:用的比较少，只有你在强调语义化时才会使用有序列表
自定义列表:对一个事件、术语、名词解释时
1)无序列表：列表项和列表项之间没有一个先后顺序
<ul>
<li></li>
</ul>
2)有序列表：列表项与列表项之间有一个先后顺序
<ol>
<li></li>
</ol>
3）自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
（6）表单相关标签
表单：主要用于收集用户内容。有了表单我们就可以参与到一个网页的创建中了。我们不仅仅是网页的浏览者，也可以使一个网页的创建者。
1）form标签：
表单的意思（块级标签，独占一行）
<form action="" method=""></form>
它代表了把用户输入的内容提交到某个地方。
method表示提交数据的方式，通常有post和get两种方式，在这里先不做过多解释二者的区别。
默认创建出来的form表单，宽度是父元素的100%，高度是0
2）input标签：
表单元素，有多种形式，通过type就可以指定的形式
<!-- 普通文本框 -->
<input type="text" />
<!-- 密码框 -->
<input type="password" />
<!-- 单选框 二选一的话 需要加上name属性值且二者属性值要相同-->
<input type="radio" />
<input name="sex" type="radio" />男<input name="sex" type="radio" />女
<!-- 复选框 -->
<input type="checkbox" />
<!-- 文件上传 -->
<input type="file" />
<!-- 提交按钮 具备提交功能的按钮 -->
<input type="submit" />
<!-- 普通按钮 没有任何功能 -->
<input type="button" />
<!-- 图片按钮 -->
<input type="image" src="submit.jpg" alt="submit" />
<!-- 隐藏区域-->
<input type="hidden" name="country" value="norway"/>
3)其他
<!-- 下拉菜单-->
<select>
<option selected="true">1（表示下拉列表显示默认值是1）</option>
<option>2</option>
</select>
<!-- 文本域-->
<textarea row="3" cols="5"></textarea>
（7）表格相关的标签
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
表格标签的属性有很多:
| 标签 | 描述 |
|---|---|
| border | 表格边框的宽度 |
| cellspacing | 单元格之间的距离 |
| cellpadding | 单元边沿与其内容之间的距离 |
| rowspan | 横跨行 |
| colspan | colspan |
(五）其他相关
（1）一些emmet写法的简单几种
1）！+Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2）div.box +Tab
<div id="box"></div>
3)div#box +Tab
<div class="box"></div>
4)ul>li>a>span +Tab
<ul>
<li><a><span></span></a></li>
</ul>
（2）快捷键
shift+alt+向下箭头 复制上一行
ctrl+x 删除一行 （剪切）
ctrl+z 撤销
ctrl+鼠标中键 改变字体大小
拖动鼠标中键 同时选中多行
ctrl+b 把项目结构试图隐藏（展开）
(六）总结
HTML相对其他来说比较简单，标签不多内容也不多且十分常见，在没有配合CSS之间，应该好好分析一下网页的结构。可以找一些实例网站看看每个盒子里的结构，单单看这些标签之间在不同的页面之间是如何配合的，然后熟悉并掌握各种标签的在网页中所实现的功能。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
