基础标签
<!DOCTYPE>
定义文档类型
<!DOCTYPE>
声明位于文档中的最前面的位置,处于 <html>
标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
<!DOCTYPE html>
<html>
定义HTML文档
声明一个html文档,所有的标签都写在它内部
<html lang="en">
...
</html>
<title>
定义文档的标题
浏览器显示的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器显示的标题!</title>
</head>
<body>
网易内容
</body>
</html>
<h1>
到 <h6>
定义标题
<head>
<meta charset="UTF-8">
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
</head>
<p>
定义段落
<body>
<p>我是段落1....</p>
<p>我是段落2....</p>
<p>我是段落3....</p>
</body>
<hr>
定义水平线
单标签
<body>
<p>我是段落1....</p>
<hr>
<p>我是段落2....</p>
<hr>
<p>我是段落3....</p>
</body>
<br>
定义简单的换行
<body>
<p>我是段落1....</p>
<hr>
<p>我是<br>段落2....</p>
<hr>
<p>我是段落3....</p>
</body>
<!--__-->
添加注释
Ctrl+Shift+/
快捷键
<!--我是一个注释-->
格式标签
<em>
斜体–强调文本
<small>
小号文本
<b>
加粗文本
<body>
<p>我是一个正常文本</p>
<em>我是一个em显示出来的文本</em> <br>
<small>我是一个small显示出来的文本</small> <br>
<b>我是 b 加粗显示的文本</b> <br>
</body>
图像标签
<img>
单标签
alt 参数
图像加载不成功显示的内容
<body>
<img src="01test_image.png" alt="">
<img src="images/test_image.png" alt="图片不见了">
</body>
链接标签
<a>
定义锚
<a href="test.html" target="_blank">跳转到</a>
href
跟跳转后的地址
target
以什么方式跳转 _blank
以新建标签页的形式跳转
跳转到
为显示的内容
列表标签
<ul>
定义无序列表 <li>
定义列表的项目
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
<ol>
定义有序列表 <li>
定义列表的项目
<body>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
</body>
<di>
自定义列表 <dt>
定义列表的标题 <dd>
定义列表项目描述
<dl>
<dt>我是dt1</dt>
<dd>我是dd1</dd>
<dd>我是dd2</dd>
<dd>我是dd3</dd>
<dt>我是dt2</dt>
<dd>我是dd1</dd>
<dd>我是dd2</dd>
<dd>我是dd3</dd>
</dl>
</body>
列表快速生成
同时输入列表内容
表单标签
<from>
定义供用户输入的HTML表单
<input>
定义输入组件
<textarea>
定义多行的文本输入控件
<select>
定义选择列表(下拉列表)
<option>
定义选择列表中的选项
<label>
定义input元素的标注
<body>
<form action="test.html"> <!--提交后的跳转地址-->
<label>请输入用户名</label><input type="text" placeholder="请输入内容..."> <br> <!--placeholder 中的内容是提示-->
<label>请输入密码</label><input type="password" placeholder="请输入密码...."> <br>
<label>个人简介</label><textarea name="" id="" cols="30" rows="10"></textarea> <br><!--多行文本输入框--> <br>
<select name="" id="">
<option value="">男</option>
<option value="">女</option>
</select>
<br>
<input type="submit" value="提交"> <br> <!--此组件默认有跳转功能,跳转到action内的地址-->
<input type="button" value="我是一个按钮"> <br> <!--没有跳转功能-->
</form>
</body>
表格标签
<table>
定义表格
<caption>
定义表格的标题
<tr>
定义表格中的行
<td>
定义表格中的单元
<body>
<table border="1"> <!--表格是否有边框-->
<caption>表格的标题</caption>
<tr>
<td>码111</td>
<td>码222</td>
<td>码333</td>
</tr>
<tr>
<td>码111</td>
<td>码222</td>
<td>码333</td>
</tr>
<tr>
<td>码111</td>
<td>码222</td>
<td>码333</td>
</tr>
</table>
</body>
样式/节
<style>
定义文档的样式信息,写在<head> </head>
里面
<head>
<style>
p{
color:red;
fond-size:20px;
}
</style>
</head>
<div>
定义文档中的节(大区域)
<span>
定义文档中的节(小区域)