11.9 javaweb学习 day2 基础标签&样式
图片标签：![]()
1.src:指定图像的url（绝对路径/相对路径）
绝对路径：1.绝对磁盘路径 2.绝对网络路径
相对路径（推荐）：1. ./:当前目录，./可省略 2. ../：上一级目录
2.width:宽度
像素px：300px
%：23%
3.height:高度
标题标签:
-
由大到小
1.color:red 字体颜色
2.font-size:13px; 字体大小
3. text-align: center; 文字位置
4.margin-top: 20px; 文字离上面多远
视频标签：
1.src:规定视频的url
2.controls:显示播放控件
3.width:播放器的宽
4.height:播放器的高
音频标签：
1.scr：规定音频的url
2.controls：显示播放控件
换行标签：
段落标签：
文本加粗标签：/
水平分割线：
标题样式
CSS的引入方式
1.行内样式：写在标签的style属性中（不推荐）
标题
对单生效 2.内嵌样式：写在style标签中（可以写在任何位置，但一般写在head标签中） 3.外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）颜色的表示方式：
1.关键字：red，green......
2.rgb表示法：rgb（0,0,0）
3.十六进制表示法：#000000（两位一表示，每两位都一样可以简写#000）
CSS选择器：用来选取需要设置样式的元素
1.元素选择器：
元素名称{
color:red;
}
h1{
color:red;
}
hello
2.id选择器：(不能重复)
id属性值{
color:red;
}
hh{
color:red;
}
hello
3.类选择器：
.class属性值{
color:red;
}
.hh{
color:red;
}
hello
**优先级： ID选择器>类选择器>元素选择器**超链接
标签
属性：
href：指定资源访问的url
target：指定在何处打开资源链接
_self:默认值，在当前页面打开
_blant:在空白页面打开
页面布局
盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content），内边距区域（padding 上右下左），边框区域（border），外边距区域（margin）
布局标签：
div:
1.一行只显示一个（独占一行）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
span:是 HTML 中的一个内联元素，它常用于在文本流中对特定的一小段文本进行样式设置、添加脚本行为或进行其他操作，而不会像块级元素那样独占一行。
1.一行可以显示多个
2.宽度高度都默认由内容撑开
3.不可以设置宽高
/* 图片样式 */
img {
/* 将图片设置为块级元素，这样它可以独占一行，并且可以像块级元素一样设置外边距、内边距等样式 */
display: block;
/* 设置图片在垂直方向上距离上下元素的外边距为 20 像素，并且在水平方向上自动居中，用于调整图片在页面中的位置 */
margin: 20px auto;
/* 设置图片的最大宽度为其所在容器宽度的 100%，这样图片会根据容器的宽度自适应缩放，不会超出容器宽度，起到了响应式布局的效果，能保证图片在不同尺寸的容器中合理显示 */
max-width: 100%;
}
/* 段落样式 */
p {
color: #666;
font-size: 16px;
line-height: 1.5;
text-indent: 2em;
}
/* 链接样式 */
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* 列表样式 */
ul {
list-style-type: square;
padding-left: 20px;
}
ol {
list-style-type: decimal;
padding-left: 20px;
}
li {
margin-bottom: 10px;
}
/* 视频样式 */
video {
display: block;
margin: 0 auto 20px;
width: 60%;
height: auto;
}
/* 音频样式 */
audio {
display: block;
margin: 0 auto 20px;
}
/* 容器 div 样式 */
div {
background-color: #f5f5f5;
padding: 20px;
margin-bottom: 20px;
}
/* 类选择器示例 */
.highlight {
background-color: yellow;
}
/* ID 选择器示例 */
#special {
font-weight: bold;
}
石铁大>称霸中国
石家庄铁道大学有着丰富的历史和卓越的成就。它在铁路建设相关领域培养了大量专业人才，为国家的基础设施建设做出了重要贡献。
这里是加粗的文本，用于强调重要信息。
这也是加粗的文本，语义上强调重要性。
- 石家庄铁道大学学科优势：土木工程
- 石家庄铁道大学学科优势：交通工程
- 石家庄铁道大学学科优势：机械工程
- 学校发展历程重要事件一
- 学校发展历程重要事件二
- 学校发展历程重要事件三
这是在 div 容器内的段落内容。
这里是被 span 元素包裹且应用类选择器样式的文本。
浙公网安备 33010602011771号