HTML+CSS day02

木子李ii

已于 2022-06-29 17:01:01 修改

阅读量113

点赞数

分类专栏： html+css 文章标签： css html

于 2022-06-28 16:02:45 首次发布

本文链接：https://blog.csdn.net/qq_53906045/article/details/125483357

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习目标：

HTML+CSS day02

html特殊字符
html列表
超链接
表格
语义化
css样式表
css语法

学习内容：

1.html特殊字符

代码	效果	描述
&lt	<	小于号或显示标记
&gt	>	大于号或显示标记
&amp	&	可用于显示其他特殊字符
&reg	®	已注册
&copy	©	版权
&trade	™	商标
&nbsp/&ensp		不断行的空白
&yen	￥	大洋

html只能识别一个空格，所以要用转义字符表示
&ensp比&nbsp的空格大

2.html列表

无序列表 ：<ul><li></li></ul>
应用场景：导航新闻列表商品列表
快捷键：ul>li*n 再按enter
有序列表：<ol><li></li></ol>
应用场景：排行榜有序的轮播点
自定义列表:<dl><dt><dd></dd></dt></dl>
dt:项目名称
dd:对项目名称的解释说明
复制上一行代码快捷键：shift+alt+下键

3.超链接

<a href="" target="" title=""> </a>
href:跳转的路径
特殊值：#表示空链接，阻止a标签跳转
target:跳转方式
_self（默认）:在当前窗口跳转
_blank:在新窗口打开
title:鼠标悬停给的提示信息

特殊用法-锚点链接

跳转同一页面的指定位置
给区块设定不同的id，在href里利用#+id名实现同一页面指定位置跳转

<a href="#box1">鞋包</a>
    <a href="#box2">服饰</a>
    <a href="#box3">电器</a>
    <div id="box1" style="width: 1000px;height:600px;background:red;">鞋包</div>
    <div id="box2" style="width: 1000px;height:600px;background:green;">服饰</div>
    <div id="box3" style="width: 1000px;height:600px;background:yellow;"">电器</div>

跳转到不同页面的目标位置
与跳转到同一页面指定位置不同的是将区块单独写入一个html，最后在href中写入跳转的页面+#+id名实现不同页面目标位置的跳转

4.html表格

代码	描述
table	定义表格
tr	定义表格中的行
td	定义行中的标准单元格
th	定义行中的表头单元格
thead	定义表格的表头
tbody	定义标签表格主体（正文）
tfoot	定义表格的页脚（脚注或表注）
caption	定义表格标题

th中的内容会加粗居中
td中的内容会水平居左
在不设置单元格宽度的情况下，内容越多，所占空间越大，没有内容的情况下，单元格的宽度会平均分配
同一列单元格，设置宽度高度取不同行列中设置的宽高最大值
table标签的属性：
border:边框
width:宽
height:高
cellspacing:单元格与单元格之间的距离
cellpadding:控制内容到边框之间的距离
常见table上的css属性:
1.border-collapse:
separate(默认值:边框独立
collapse:相邻边被合并成一条边框
2.border-spacing 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
只给一个值：横向和纵向的间距一样
给两个值：第一个代表横向，第二个代表纵向

单元格属性

跨行用rowspan，跨列用cospan，不管是跨列还是跨行操作的都是单元格

5.语义化

根据页面内容的结构，选择合适的标签，如：标题用h1-h6，段落用p标签等。说白了就是合理的标签做合理的事情。
好处：
1.没有CSS时，页面能呈现出更好的内容结构
2.语义化使代码具有可读性，便于团队开发和维护
3.语义化有利用用户体验
4.有利于SEO（搜索引擎）优化

6.CSS样式表

行内样式表/内联样式表
通过style属性，将样式写在标签上
eg:<div style="width: 200px;height: 200px;background: aqua;"></div>
内部样式表
所有的样式都写在style标签里，style标签要放在head中，title标签的下边
eg:<style>div{width:200px; height:200px;}</style>
外链样式表
通过link标签引入外部的css文件
eg:<link rel="stylesheet" href="css/1.css">
rel="stylesheet":让css文件和html文件产生关联
href="css/1.css":引入外部css文件路径