所有标签共有的属性只有3个:id:一个唯一的标识,class:一个类的划分,style:加样式
1、文本标签 span
三个文本标签span,第一个加入样式给hello红色,然后是两个文本标签内容为demohtml
<span style="color: red;">hello</span>
<span>demohtml</span>
<span>demohtml</span>
在写代码过程中有换行,但是运行结果无换行,标签间有空格隔开
2、标题标签 h1~h6
使文本竖向放置,有放大加粗效果,放大加粗效果依次减小
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
3、div竖着布局的标签
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
<div>竖着布局的标签</div>
4、段落标签
自带段落间距
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
5、超链接标签 a
href 设置资源路径,可以是网络地址也可以是本地文件路径
target 设置打开窗口的方式 _self默认的,在本窗口打开 _blank在新窗口打开
<a href="https://www.baidu.com/" target="">点击跳转</a>
6、锚点标签
锚点标签,可以实现如拼多多左下角一键返回顶部效果,或返回想返回的地方
使用方法:在想返回到的地方加锚点,设置其name如aaa,一键返回顶部的地方设置href
里面是要跳转到地方"#+name",其中我还加入了样式,position用于设置定位模式,fixed 代表固定模式,right: 200px;bottom: 200px; 固定到距浏览器右为200px,距浏览器底为200px,不随浏览器的滚动而滚动。
style="position: fixed;right: 200px;bottom: 200px;
<a name="aaaa">锚点</a>
<a href="#aaaa" style="position: fixed;right: 200px;bottom: 200px;">跳转到h1</a>
<a href="#bbbb" style="position: fixed;right: 200px;bottom: 150px;">跳转到div</a>
<a href="#cccc" style="position: fixed;right: 200px;bottom: 100px;">跳转到p</a>
7、图片标签
src:引用的图片资源
路径:1、相对路径:访问资源与被访问资源的关系
兄弟关系 src="R-C.jpg" 直接访问
叔侄关系 src="img/R-C.jpg"
表兄弟关系 src="./img/R-C.jpg"
2、绝对路径:资源的绝对位置
alt: 当图片资源不能正常展示时,显示alt里面的内容
width="" 设置宽度 height="" 设置高度
<img src="img/R-C.jpg" alt="这是一个风景照片" style="object-fit: cover;width: 300px;height: 200px;">
style="object-fit: cover;width: 300px;height: 200px;" 为设置样式,object-fit: cover; 保持图片比例不变形,宽度为300px,高度为200px
8、列表标签
无序列表
<ul>
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
</ul>
有序列表
<ol>
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
</ol>
9、表格标签
<table>放表格的容器
<tr>行
<td>单元格 <th>加粗居中
border 表格有边框
width="500px"
height="400px"
cellpadding="10px" 单元格的填充度
cellspacing="0" 单元格之间的间距 0 表示挨在一起
thead tbody tfoot
rowspan 把列合并
colspan 把行合并
<table border="1" >
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr>
<td>1</td>
<td colspan="2">li</td>
<!-- 把行合并 大小为2 -->
<td>男</td>
</tr>
<tr>
<td rowspan="2">2</td>
<!-- 把列合并 大小为2 -->
<td>zhang</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td>zhao</td>
<td>20</td>
<td>女</td>
</tr>
</table>
运行效果如下:
10、框架标签 iframe嵌套其他页面
src:嵌套的资源
width:"800px"
height="400px"
frameborder='0' 去掉边框 把任意页面嵌入的更真实
<iframe src="https://www.bilibili.com/" width="800px" height="400px" frameborder="0" name="aaa"></iframe>
11、 音频 audio
controls 手动播放,让播放器显示出来
autoplay 自动播放
loop 循环播放
<audio src="img/bj.mp3" autoplay loop></audio>
12、视频
controls 手动播放,让播放器显示出来
autoplay 自动播放
loop 循环播放
<video src="img/test.mp4" width="200px" height="200px" controls></video>
13、收集用户信息的标签
<form>
<input type="text">单行文本框<br><br>
<input type="password">密码框<br><br>
<!-- 可实现单选框效果,需注意要把name设为一致才能做到 -->
<input type="radio" name="sex">男生<input type="radio" name="sex">女生 单选框<br><br>
<!-- 可实现多选框效果 -->
<input type="checkbox" >篮球 <input type="checkbox">足球 <input type="checkbox">乒乓球 复选框 <br><br>
<input type="file"> 文件选择器<br><br>
<input type="color"> 颜色拾取器<br><br>
<input type="date">日期<br><br>
<input type="datetime-local">日期时间<br><br>
<input type="week">周选择器<br><br>
<!-- min设置最小值 max设置最大值 value设置当前值 -->
<input type="range" min="0" max="100" value="90">滑块<br><br>
<!-- step步长 -->
<!-- step="5" 设置点击一次上下变动值为5 -->
<input type="number" min="0" max="100" value="10" step="5"> 数字<br><br>
<select>
<!-- 下拉框效果 -->
<option value="">数学</option>
<option value="">语文</option>
<option value="">英语</option>
</select><br><br>
<!-- 一个可以在浏览器手动调节大小的多行文本域
rows="10" 最多有10行 cols="50" 一行最多50个
-->
<textarea rows="10" cols="50"></textarea>多行文本域<br><br>
<input type="button" value="普通按钮">
<!-- 重置按钮,点击后刷新页面恢复数值 -->
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
</form>