本文介绍了HTML的基本结构，如声明、头部、主体、标题标签、水平线、换行、文本标签、超链接、图片、列表、表格、表单等，以及CSS样式选择器、盒子模型、浮动、定位等概念，为初学者提供了网页开发的基础知识。
html
网页制作编写工具：hbuilderx
二、网页标签：
html：网页的声明
head：网页的头部
title：网页的名称
body：网页的主体部分
三、网页标签
3.1标题标签
<h1>我是标题</h1>
<h1>我是标题</h2>
<h1>我是标题</h3>
<h1>我是标题</h4>
<h1>我是标题</h5>
<h1>我是标题</h6>
3.2水平线标签
<hr/>
3.3换行标签
<br/>
3.4段落标签
<p></p >
3.5文本标签
<em></em> 倾斜
<strong></strong>加粗
<span><span>正常
3.6超链接
政策"真金白银"加力稳就业
href="”链接的目标网址路径
href="https://www.baidu.com/”站外链接
href="index4.html"站内链接
href="#"空链接
target="_blank"新开一个窗口
3.7 图片标签
< img src="alt=""width="1000" />
src : 图片的路径
alt :图片的名称
width:宽度
height:高度
一般来说，网页的图片只需要设置宽度即可，高度会随宽度进行等比缩放
图片的类别：jpg(jpeg),png(透明背景),gif(动画),webp,bmp
3.8列表标签
无序列表
<ul><li></li><li></li></ul>
ctrl+k格式化代码
有序列表
<ol><li></li><li></li></ol>
11.7
定义列表
<dl>
一级表项<dt></dt>
二级表项<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
3.9 表格标签
table 表格
tr 行
td 单元格
border:表格的属性
cellpadding: 内填充，值越大，内容距离单元格越远
cellspacing : 外边距，单元格距离表格边框的距离，一般设为0
colspan="2” 合并列
rowspan="2合并行
align="center"居中
3.10 表单标签
rowspan="2合并行
align="center"居中
11.8
网页中引入css的三种方式
1.1内部样式
<style>
color: red;
</style>
在head之间，在title之下，定义的
1.2 外部样式引入外部的样式
<link rel="stylesheet" href="css/index.css"/>
1.3 行内样式直接插入到标签之间的
<p style="color: yellow;" >
三种方式的优先级行内样式>(外部样式,内部样式，取决于哪个后执行)
二、css样式选择器
2.1标签选择器
p span h1
2.2类选择器
定义的名称为title的类样式
<head>
<meta charset="utf-8">
<title>css</title>
<style>
.title{
color: darkturquoise;}
</style>
</head>
<body>
<h1 style="title">图谋不轨</h1>
<p style="color: royalblue;"是</p >
<span class="title">自己</span>
</body>
2.3id选择器
#info{
color: azure;
}
</style>
</head>
<body>
<h1 id="info">图谋不轨</h1>
</html>
先择器优先级:D选择器>类选择器>标签选择器
2.4其他选择器
后代选择器:title span fcolor: red;
CSS样式
3.1字体样式
font-size: 20px;字体大小为20个像素
font-family:"微软雅黑”; 字体类型为微软雅黑字体
font-weight: bold; 字体加粗 normal 去除加粗效果
font-style: italic|normal; 字体为斜体字 倾斜|正常
32文本样式
color: cadetblue; 文本的颜色值
cne-height: 50px; 段落文本行高
text-align:left center rightr 文本的对齐方式，左，中，右
text-decoration:underline; 文本装饰: 下划线
text-decoration:one:去掉下划线
11.9
11.9.2023
- 盒子
11.9.2023
四、盒子模型
里面可以装内容的各种标签容器都可以称作为盒子。
width:300px; 宽度
height: 300px；高度
border: 1px solid red; 盒子的边框线，1个像素 实线 红色
标签的分类:
1、块级元素
<P>,div,ul,li,h1~h6
特征: 独占一行，可以自定义宽度和高度
2、行内元素
<span>,em,strong,a
特征: 不独占一行，不可以自定义宽度和高度，根据内容而定
3、行内块元素
Img,input
特征：不独占一行，可以自定义宽带 高度
块级元素与行内元素的转换
块级元素转为行内元素: display: inline;
行内元素转为块级元素: display: block;
标签的嵌套规则:
1、块级元素可以嵌套任意的元素,p标签除外，p标签只能嵌套行内元素及行内块元素
2、行内元素只可以嵌套行内元素及行内块元素，不可以嵌套块级元素
快速生成列表的快捷键: ul>li*8 ＋tab
四．超链接样式
Link 原始链接
hover划过
六、颜色值的表示形式
6.1 单词
red
6.2 十六进制
#ff0000
二进制 01十进制
十六进制 012 3 4 5 678 9 A B C D E F
6.3 RGB
color: rgb(red,green, blue); 取值: 0-255
空格符号
11.10
盒子模型
七、外边距
margin 在网页里面 盒子距离盒子的距离叫做外边距
left 左
top 上
right 右
bottom 下
*{
margin:0; 所有网页标签的外边距统统清楚
}
*是通配符，匹配所有的网页标签
上 下 左 右
:margin: 50px 30px 20px 0;
margin: 20px 30px;
上下 左右
margin:20px 50px 100px;
上 左右 下
顺时针
八、内边距
内容距离盒子的距离，通俗点来说就是填充。
填充可以清楚，也可以自定义
padding
left 左
top 上
right 右
bottom 下
上 下 左 右
padding: 50px 30px 20px 0;
padding: 20px 30px;
上下 左右
margin:20px 50px 100px;
上 左右 下
顺时针
九、边框
border
border-left: 1px solid #ffo000
border-top: 1px solid #ffo000:
border-right: 1px solid #ffo000:
border-bottom: 1px solid #ffo000
solid 实线
十、背景颜色和背景图片
10.1背景颜色
background-color：颜色：
10.2背景图片
background-image：uil（img/） 背景图片
background-repeat: no-repeat; 背景不重复
background-position:135px 120px; 背景图片的位置
background-size: 25px;背景图片的大小
十一、浮动
float: left; 把元素设置为浮动元素，向左浮动。
特征：加上浮动后后，元素就脱离了标准文档流。
clear: both; 在此元素的两侧清除浮动元素
一个盒子要 在其父级容器中居中显示，则使用margin:0 auto;
十二、定位
12.1 相对定位
position: relative;
left:50px; 从左往右位移50像素
相对定位的元素没有脱离标准文档流，虽然位移走了，但之前的文档位置还存在。
12.2 绝对定位
position: absolute;
添加了绝对定位的元素会脱离标准文档流。
绝对定位的元素的偏移，如果父级盒子为定位元素，则会参考父级盒子的位置做偏移。
如果父级盒子不是定位元素，则会参考body做偏移。
opacity: 0.7; 透明度，取值为0-1之间
cursor: pointer; 鼠标变为小手
12.3 固定定位
position: fixed;
脱离了标准文档流
text-indent:10px; 一般用于p标记中，用于首行缩进
块级元素在父级盒子中居中显示一般可以使用margin:0 auto;
行内元素或行内块元素在父级盒子中居中显示一般设置text-align:center；即可。
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
