目录
一、标题标签
标题标签从h1-h6，h1最大
<body>
<h1>一级标题标签</h1>
<h2>二级标签<h2>
</body>二、段落标签
<body>
<!-- 标题标签 -->
<h2> 悯农</h2>
<!-- 段落标签 -->
<p>锄禾日当午。<p>
<p>锄禾日当午。<p>
<p>锄禾日当午。<p>
<p>锄禾日当午。<p>
</body>三、换行标签
<body>
<h2>静夜思</h2>
床前明月光，<br />
疑似地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</body>四、水平线标签
<body>
<!--
hr标签：水平线标签，是一个单标签
color属性：设置水平线的颜色
width属性：设置水平线的宽度，值可以是具体的像素值，也可以是百分比
size属性：设置水平线的尺寸（粗细）
align属性：设置水平线对齐方式，常用值left（左对齐），center（居中对齐，默认值），right（右对齐）
-->
<h2>咏鹅</h2>
<hr color="red" width="30%" size="10px" align="right" />
<p>鹅鹅鹅，</p>
<p>曲项向天歌。</p>
<p>白毛浮绿水，</p>
<p>红掌拨清波。</p>
</body>五、字体样式标签
<body>
<!-- 默认 -->
可甜可咸 <br />
<!-- 加粗标签 -->
<strong>可甜可咸</strong><br />
<b>可甜可咸</b><br />
<!-- 斜体标签 -->
<em>可甜可咸</em><br />
<i>可甜可咸</i><br />
<!-- 上标签：sup，下标签:sub -->
X<sup>2</sup>+Y<sub>2</sub>=1
</body>六、注释和特殊符号
<body>
<!-- ctrl+/快捷注释键 -->
<!-- 有些内容不能直接再页面上直接显示，这时需要转义字符 -->
<!-- 3<b>1 -->
3<b>1<br />
<!-- 空格 -->
美丽 误会<br />
<!-- 引号 -->
"hahaha"<br />
<!-- 版权符号 -->
©归作者所有<br />
</body>七、图像标签
<body>
<!-- img：图像标签，是一个单标签
src:后面跟路径
width与height：一般只设置一个属性，另一个属性会做出相应的放大或缩小
alt:当图片显示不出来时，会显示alt中的文字
title:指向图片时出现文字
-->
<img src="img/Snipaste_2022-07-11_14-51-11.png" width="200px
alt="这是一辆图片" title="帅气的跑车" "/>
</body>八、超链接
<body>
<!--
a:超链接标签
href:不仅可以填写网址，也可以填写图像的地址
target:设置是否在新页面打开，默认在当前，_blank：新页面
-->
<a href="www.baidu.com" target="_blank">百度</a><br />
<a href="07图像标签.html">图像标签</a>
<!-- 点击图片跳转 -->
<a href="www.baidu.com">
<img src="img/Snipaste_2022-07-11_14-51-11.png" alt="100px">
</a>
</body>九、锚链接
<body>
<!-- 顶部跳转书写：“#id”,跳转的对象，不需要写href，只需要写id，供跳转的对象使用 -->
<a href="#123">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a href="#">我是顶部</a><br />
<a id="123">扣税的哈佛拉萨大家发生的</a>
</body>十、行内元素与块元素
| 块元素 | 说明 |
|---|---|
| div | 块元素 |
| p | 表示段落 |
| h1-h6 | 1-6级标题 |
| br | 表示换行 |
| ol | 无序列表 |
| ul | 有序列表 |
| 行内元素 | 说明 |
| a | 超链接 |
| span | 内联标签 |
| strong | 加粗，强调 |
| b | 加粗，不强调 |
| em | 斜体，强调 |
| i | 斜体 |
| img | 图片标签 |
| input | 输入框 |
| select | 下拉列表 |
十一、无序列表、有序列表、定义列表
//无序列表
<!--
disc:实心圆
circle:空心圆
square:实心方形
none:没有任何图标
-->
<ul type="disc">
<li>无序列表第1项</li>
<li>无序列表第2项</li>
<li>无序列表第3项</li>
<li>无序列表第4项</li>
<li>无序列表第5项</li>
</ul>
//有序列表
<!-- type:符号类型，start：设置开始位置 -->
<ol type="1" start="2">
<li>有序列表第1项</li>
<li>有序列表第2项</li>
<li>有序列表第3项</li>
<li>有序列表第4项</li>
<li>有序列表第5项</li>
</ol>
//定义列表
<body>
<dl>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>黄瓜</dd>
<dd>西红柿</dd>
<dt>水果</dt>
<dd>葡萄</dd>
<dd>苹果</dd>
<dd>哈密瓜</dd>
</dl>
</body>十二：表格
<body>
<!--
table:标签：表格标签
cellspacing：边框的粗细
align:设置表格里的内容对其方式
-->
<table border="1px" cellpadding="20px" cellspacing="0" width="500px" height="300px",align="center">
<!-- th:具有加粗的效果
td：正常显示
-->
<tr align="right">
<th>01</th>
<th>02</th>
<th>03</th>
</tr>
</table>
</body>十三、表格的合并
<body>
<table border="1px" cellpadding="20px" cellspacing="0">
<tr>
<!-- colspan:向右合并 -->
<th colspan="2">01</th>
<th>02</th>
<th>03</th>
</tr>
<tr>
<!-- rowspan:向下合并 -->
<td rowspan="2">4</td>
<td colspan="2">5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
十四、表单
<body>
<form action="">
姓名：<input type="text"/><br />
密码：<input type="password"><br />
性别：<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked"/>女
<input type="radio" name="sex"/>中性<br />
爱好：<input type="checkbox"/>蓝球
<input type="checkbox" checked="checked"/>足球
<input type="checkbox"/>棒球
<input type="checkbox"/>羽毛球<br />
照片：<input type="file"/><br />
生日:<select>
<option>1999</option>
<option>2000</option>
<option>2011</option>
<option>2018</option>
</select>年
<select>
<option>2</option>
<option>4</option>
<option>10</option>
<option>12</option>
</select>月
<select>
<option>4</option>
<option>12</option>
<option>23</option>
<option>30</option>
</select>日
<br />
描述:<textarea cols="30" rows="10">请输入你的自我介绍</textarea>
<input type="reset" value="重新输入"/>
<input type="submit" value="登录"/>
<input type="image" src="../img/Snipaste_2022-07-11_14-51-11.png"/>
<input type="button" value="点我一下" onclick="alert('小东西')"/>
</form>
</body>
521
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
