前端第一节
常用标签一
1.1标题标签
有h1,h2…h6数字越大，字体越小，并且这些标签是可以自动换行的，被称为块元素；
那些没有自动换行的元素如果想要将文字换行就使用br标签,并且br为单标签，使用的时候只需要写
即可，不需要写出对应的br标签
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-urIMxHF9-1643983434735)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204162717009.png)]
###1.2段落标签
p标签，用来写一些我们页面要展示的文字，会自动换行
<p>我是段落1</p>
<p>我是段落2</p>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PpbTZt01-1643983434737)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204163437375.png)]
###1.3水平线标签
hr标签，可以设置颜色，粗细，长度，以及放置在页面中的位置
<hr color="red" size="2" width="100px" align="left">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rwuKss9z-1643983434737)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204163959144.png)]
1.4列表
列表分为有序列表和无序列表，分别是ul，ol
无序列表
文字前面不会有数字或者字母进行排序辨认
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YZcha9ui-1643983434737)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204164729184.png)]
<ul>
<li>古力娜扎</li>
<li>迪丽热巴</li>
<li>马尔扎哈</li>
</ul>
有序列表
文字前自动生成序号，序号也可以更改成别的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZmJFvy8M-1643983434737)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204164847938.png)]
<ol >
<li>古力娜扎</li>
<li>迪丽热巴</li>
<li>马尔扎哈</li>
</ol>
利用type属性即可将序号改成别的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HaQvKwz-1643983434737)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204165036802.png)]
<ol type="A">
<li>古力娜扎</li>
<li>迪丽热巴</li>
<li>马尔扎哈</li>
</ol>
1.5div
一个块级元素，以后我们做项目会一直使用
可以通过style设置长宽高，还可以通过align设置位置
<div style="height: 100px; width:1000px; "align="center"; >我是div</div>
<div>我也是div</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unZwFVqO-1643983434738)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204170802387.png)]
1.6span
属于行内标签，不会自动换行
<span>我是span</span>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MybXVijP-1643983434739)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204171041341.png)]
1.7格式化标签
可以随意调整文字的样子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OpijThg4-1643983434739)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204171935538.png)]
<font color="red" size="5" face="楷体">我是font</font>
i倾斜标签
u下划线标签
b加粗标签
del中划线标签
sup上标
sub下标
pre可以直接按照我们看到的样子显示标签内的内容
##常用标签二
2.1 a标签
作为跳转链接
a标签可以实现页面的跳转，也可以通target设置是显示到当前页面还是新建一个页面，默认是不新建页面的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qK8Pq7p3-1643983434740)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204174317743.png)]
<a href="www.baidu.com" target="_blank">百度</a>
作为锚点
使用a标签中的name属性标记a标签，然后可以通过name属性定位到此标签
div中也有标记的属性id，使用id也可以定位到此标签
<a name="top">我是a标签</a>
2.2img图片
页面显示图片都是由img标签所展示，img中最重要的是src属性，这个属性是用来记录图片的地址
alt：当图片破损或不存在时，显示文本的内容
title：当鼠标悬停在图片上时显示的文字
width：图片的宽度
height：图片的高度
border：图片边框
<img src="img/1.png" width="400" height="400" border="2" title="新西兰" alt="这是一张风景图">
2.3表格
table表格，其中tr表示行，td表示单元格，th为表头
设置table的属性有width设置表格的宽度，border设置边框，align设置对齐方式
tr属性有align设置行的内容对齐方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kxwmuYB0-1643983434741)(C:\Users\cxy\AppData\Roaming\Typora\typora-user-images\image-20220204220034808.png)]
<table width="400px" align="center" border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr bgcolor="red">
<th>1</th>
<th>张三</th>
<th>18</th>
</tr>
</table>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr bgcolor="red">
<th>1</th>
<th>张三</th>
<th>18</th>
</tr>
</table>
|