1.基本结构标签
<html></html>为最大标签，称为根标签
<head></head>文档头部 --- <title></title>网页标题，放在head里面
<body></body>文档主题内容
<h1>-<h6>一到六级标题
<p></p>段落标签
特点：（1）文本在一个段落中会根据浏览器的窗口大小自动换行。
（2）段落与段落之间保有间隙。
<br>单标签，强制换行，和<p>换行不一样的是，<br>换行时，行与行之间没有间隔
要加粗哪个把哪个夹在中间
<strong></strong>\<b></b>粗体
<em></em>\<i></i>倾斜
<del></del>\<s></s>删除线
<ins></ins>\<u></u>下划线
<div></div>和<span></span>都是用来布局的
区别是一行只能放一个div，但是可以放多个span
所以div会自动换行，span不会
<meta> 标签用于定义元信息（metadata），这些信息不是直接显示在网页上的内容，而是提供给浏览器和其他搜索引擎的信息。<meta> 标签通常放置在 <head> 部分，用于描述文档的各种元数据。
常见用途：
<meta charset="utf-8">
2.图像标签
<img src="图像的地址"/>
图片需要和HTML的文档存储在一起。
例如：
<img src="图像名称">
<img src="文件夹名/图片名">
<img src="../图片名">
绝对路径：
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例:"D:\wed\img\logo.gif"或完整的网络地址
3.超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本/图片</a>
点击图片/文字即可进行跳转。
href 用于指定链接目标的URL地址（必须属性）
target 用于指定链接页面打开的方式，_self为默认方式在此页面直接跳转，_blank在新的窗口打开
（1）外部链接
例：<a href="http://www.baidu.com">百度</a>
（2）内部链接
网站内部页面之间的相互链接。
直接在href=" "在引号之中直接写自己所书写的html文件的文件名即可跳转。
3）空链接(#)
空链接是占位的链接。
<a href="#"></a>
（4）下载链接
<a href="压缩包的名字">名字</a>
（5）网页元素链接
<a href=" "> <img src="地址"> </a>
6）锚点链接
是使用在一个网页中，内容太长不好寻找指定内容是所设置的链接，可直接找到想要查找的内容。
在href属性中，设置属性值为#名字的形式。
如：<a href="#two">第二</a>
找到目标位置标签，咋里面添加一个id属性=设置的名字即可
如:<h3 id="two"> 第2集</h3>
4.注释标签
<!--注释--> 快捷键为ctrl+/
5.特殊字符
| 空格 |   |
| < | < |
| > | > |
6.表格标签
基本语法：
<table>
<tr> 表示一行
<td>表示一个单元格</td>
......................................
</tr>
.....................................
</table>
表格结构标签
<thead>头部和<tbody>主体
合并单元格
1.跨行合并 rowspan='合并个数'
2.跨列合并 colspan='合并个数'
7.无序列表
<ul>里嵌套<li>
8.有序列表
<ol>里嵌套<li>
9.自定义列表
<dl>定义描述列表 <dt>定义项目名字 <dd>描述每一个名字
注意：
1.dl中只可以包含<dt>,<dd>其中两个为兄弟关系。
2.<dt>和<dd>个数无限制，经常一个<dt>包含多个<dd>
示例：
<dl>
<dt>陶喆：</dt>
<dd>天天</dd>
<dd>沙滩</dd>
<dt>周杰伦</dt>
<dd>晴天</dd>
<dd>你听得到</dd>
</dl>10.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://search.jd.com/search">
账户：<input type="text" name="account" value="Nozomi" maxlength="10"><br>
<button>确认</button>
</form>
</body>
</html>在text中，value为默认值，maxlength为文本框的最大输入
在其它type中，value有着不同作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://search.jd.com/search">
账户：<input type="text" name="account" value="Nozomi" maxlength="10"><br>
密码：<input type="password" name="pwd" value="" maxlength="8"><br>
<button>确认</button>
性别：
<!-- 单选框为radio，name和value相当于键值对，体现在url上，checked为默认选中 -->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="famale">女
<br>
爱好：
<!-- 多选框为checkbox -->
<input type="checkbox" name="hobby" value="badminton">羽毛球
<input type="checkbox" name="hobby" value="riding">骑行
<input type="checkbox" name="hobby" value="table tennis">台球
<!-- 用户不可见，提交表单时，携带的一些固定的数据 -->
<input type="hidden" name="tag" value="100">
<!-- 确定按钮 第一种写法 这里button就算不写type，也是提交按钮，默认有-->
<button type="submit">确定</button>
<!-- 确定按钮 第二种写法 value值在这里体现为按钮上的提示文字-->
<input type="submit" value="确定">
<!-- 重置按钮 第一种写法 -->
<button type="reset">重置</button>
<!-- 重置按钮 第二种写法 -->
<input type="reset" value="重置">
<!-- 普通按钮-指的是不会提交也不会重置的按钮 type必须要写，不然默认为submit -->
1.
<button type="button">普通按钮</button>
2.
<input type="button" value="普通按钮">
<!-- 文本域 -->
其它
<textarea name="other" cols="30" rows="10"></textarea>
<br>
<!-- 下拉框 value值为对应选择的下拉选项 默认变成了selected-->
籍贯：
<select name="place">
<option value="冀" selected>河北</option>
<option value="晋">山西</option>
<option value="粤">广东</option>
</select>
<!-- 禁用表单控件 disabled -->
<br>禁用
<input type="text" name="example" value="不可修改" disabled>
</form>
</body>
</html>
点击关联
<!-- 第一种做关联方式 for里是id-->
<label for="zhanghu">账户：</label>
<input type="text" id="zhanghu" name="account" value="Nozomi" maxlength="10"><br>
<!-- 第二种 直接包起来 -->
<label>
密码
<input type="password" name="pwd" value="" maxlength="8"><br>
</label>
fieldset和legend分区
效果：
代码：
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户：</label>
<input type="text" id="zhanghu" name="account" value="Nozomi" maxlength="10"><br>
<label>
密码
<input type="password" name="pwd" value="" maxlength="8"><br>
</label>
<button>确认</button>
</fieldset>
11.iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!-- 用iframe嵌入网页 frameborder只有有边框和无边框，既1和0 -->
<iframe src="https://www.taobao.com" frameborder="0" width="900" height="300"></iframe>
<!-- 嵌入图片 -->
<iframe src="懒羊羊.jpg" frameborder="0" width="900" height="200"></iframe>
<!-- 与超链接的target属性配合使用 -->
<a href="https://www.taobao.com" target="container">点我看京东</a>
<!-- 与表单的target属性配合使用 -->
<form action="https://so.toutiao.com/search" target="container">
<input type="text" name="keyword">
<input type="button" value="搜索">
</form>
<iframe name="container" frameborder="0" width="900" height="300"></iframe>
</body>
</html>
12.字符实体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!-- 空格 -->
<div>i you</div>
<!-- 但如果想打 怎么办 -->
<!-- &为& -->
<div>&nbsp</div>
<!-- 如果想打&怎么办 -->
<div>&amp;</div>
</body>
</html>13.meta
14.lang
ISO 639 语言代码
lang 属性的值通常是根据ISO 639标准定义的语言代码。常见的语言代码包括：
en：英语zh-CN：中文（简体）zh-TW：中文（繁体）es：西班牙语fr：法语de：德语ja：日语ko：韩语ru：俄语
例如：<html lang="en">
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
