网页制作基础学习——HTML+CSS常用代码
HTML(HyperText Markup Language),即超文本标记语言,是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
·
Hello大家好,我是北辰!很高心您能来阅读!
HTML
HTML超文本语言(Hyget Text Language)
1993 HTML1.0
2013 HTML5.0
HTML5的优势:
1.化繁为简
2.跨平台
3.跨浏览器
4.功能强大,新增特性
HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<title>网页标题</title>
</head>
<body>
我的第一个网页
</body>
</html>
<!DOCTYPE html>文档类型声明
<html lang="en">语言类型声明
<head><head>头部
<body><body>主体
1. 标题标签
标题标签:用于定义网页的标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
h1最大 h6最小
特点:
1)会将文字自动加粗及放大
2)独占一行,属于块级标签
2. 段落标签
<p></p>
特点:
1)对字段对照网页大小进行自适应分段
2)属于块级标签独占一行
3. 换行标签
<br/>
用于手动将页面内容换行
4. 水平线标签
<hr/>
在界面中添加水平线
5. 字体样式标签
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
6. 注释标签
<!--注释-->
7. 字符实体
空格
> 大于>
< 小于<
" 引号
© 版权符号
8. 图像标签
<umg src="路径(绝对路径/相对路径)" title="鼠标悬停文本" alt="替代图片文本" width="宽" height="高" />
9. 超链接标签
<a href="连接地址" taret=""></a>
taret属性常用值
_self:在当前窗口打开目标页面
_blank:在新窗口打开目标页面
<a href="https://www.qunar.com/" target="name">去哪旅行网</a> //target于iframe标签中的name属性相匹配
<a href="https://www.ctrip.com/" target="name">携程</a>
<iframe src="https://www.csdn.net/" name="name" height="500px" width="500px">//打开后默认打开CSDN网页
</iframe>
9.1 锚链接
<a href="#miaosha">京东秒杀</a>
<p id="miaosha" style="height: 200px;border: 1px solid red;">京东秒杀</p>
1.添加锚记,给元素添加id属性,注意id是唯一的
2.添加锚记,超链接的href属性值为#+id属性值-->
10. 列表
10.1无序列表
<ul>无序列表
<li></li> 列表项
<li></li> 独占一行,块级元素
<li></li>
</ul>
10.2 有序列表
<ol>有序列表
<li></li> 列表项
<li></li> 独占一行,块级元素
<li></li>
</ol>
10.3 定义列表
<dl>dl标签定义列表
<dt></dt>dt标签定义项目
<dd></dd>dd标签定义内容
<dd></dd>
<dt></dt>
</dl>
11.表格
<table> table标签定义表格
<tr> tr标签定义行
<td></td> td标签定义单元格
</tr>
</table>
tr行
td列
th标题
caption标题标签
<table border="1"> table标签定义表格,边框为1
<tr> tr标签定义行
<th></th>自动加粗
<th></th>
<th></th>
</tr>
</table>
<table border="1"> table标签定义表格,边框为1
<tr> tr标签定义行
<td rowspan="2"></td> //rowspan跨两行
<td></td>
</tr>
</table>
<table width="宽度" border="边框粗细" cellspacing="单元格间距" cellpadding="单元格填充">
<tr style=“行内样式” align="对齐方式:left、center、right">
<th colspan="跨列">表头,默认加粗和居中</th>
<th rowspan="跨行"></th> </tr>
<tr> --- 行
<td>列</td>
</tr>
</table>
12. 视频
<video src="视频路径" controls="controls"></video>
width 视频宽度 值为:px
height 视频长度 值为:px
src 视频播放路径 值为:URL
controls 显示控件:播放/暂停 值为:controls
autoplay 视频就绪后立马播放 值为:autoplay
loop 循环播放 值为:loop
12.1 视频兼容性
视频播放兼容性
<video controls loop>
<source src="video/video.wemb" type="video/wemb"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
自上而下
第一个执行,其他不执行
13. div
页面头部 header
页面中部 section
页面底部 footer
文章内容 article
侧边栏 aside
导航栏 nav
14. iframe 内联框架
语法 :
<iframe src="路径" width="宽度" height="高度" name="名称" frameborder></iframe>
frameborder框架边框
内联框架和超链接标签的使用
<p><a href="https://www.ctrip.com/" target="myframe">猛击这里查看携程官网</a></p>
<p><a href="https://www.qunar.com/" target="myframe">猛击这里查看去哪官网</a></p>
<iframe id="myframe" name="myframe" width="500" height="500"></iframe>
15.form表单标签
<form action="路径" method="提交方式" ></form>
action 指定路径
method 指定数据提交方式
提交方式:get post
post:
1.不改变浏览器地址栏状态
2.安全性高
3.常用于保存,修改,删除
get:
1.会改变地址栏状态
2.安全性低
3.常用于查询
16.input标签
<input type="text" name="" value=""/>
type name value必须有
value是往后台发送的值
type元素类型
name元素名称
value初始值
maxlength最大字符数或最长长度
checked 是否被选中(默认选中)
size初始宽度
注:
1.form表单和input标签成对出现
2.type和name元素必须写
16.1 type常用值
text 单行输入框,默认20个字符
password 密码框,加密输入为*
radio 单选按钮
checkbox 复选框/多选框
button 点击按钮
sublimt 提交按钮
reset 重置按钮
file 文本上传按钮 methods="post" 文件提交方式必须是post
email 邮箱文本框
url 地址文本框
range 范围内数值文本框(滑块)
search 搜索文本框
number 数字类型
16.2 selected和checked
seleced用于单选,checked用于多选,
selected是选择很多项,但是只取当前的项,即最后一个选中的
checked是选中很多项,都选中。
17.列表框 下拉菜单(重点)
<form>
<select name="city">
<option value="0" selected="selected">--请选择--</option> //selected默认选择
<option value="福州">福州</option>
<option value="福清">福清</option>
<option value="莆田">莆田</option>
<option value="晋江">晋江</option>
</select>
</form>
数据库中接收的是value的值
selected为默认选中
注意:
1.select option是成对出现的
2.option中必须有value属性
18.文本域
textarea
<textarea name="te" id="te" rol="宽度,按英文字符计算,1英文=2中文" rows="rol="宽度,按英文字符计算,1英文=2中文">
</textarea>
19.标注
单击标注文本内容,浏览器自动将焦点转移到相关表单元素上
如:
<label for="boy">
<input type="radio" id="boy" name="sex">
</label>
<label for="gril">
<input type="radio" id="gril" name="sex">
</label>
注意:label标签for属性的值需要与input标签中的id属性的值相匹配
hidden隐藏域:用于隐藏信息,给程序员看
readony 只读不写
disabled禁用
(readony,disabled为Boolean不需要属性值)
placeholder定义提示信息,用户输入后自动消失(字体颜色为灰色)
required不可为空
pattern使用正则表达式验证表单
正则表达式:
^以......开始
$以......结束
^1[3456789]\d{9}$
1:第一位
3456789:第二位
\d从0~9之间
{9}匹配前一项9次
CSS
CSS版本3.0
CSS层叠样式表
两部分组成:选择器,属性
HTML引入css3种方式,就近原则
三种引入方式:行内样式>内部样式>外联样式表
语法:
<标签名 style="属性1:属性值1;属性2:属性值2;">
内容
</标签名>
1.selector选择器
选择器:
标签选择器
类选择器 可以有多个 以#开头
ID选择器 唯一 以.开头
ID选择器>类选择器>标签选择器
不遵循就近原则
1.1 标签选择器
标签选择器语法:
标签{
属性名:属性值1;
属性名:属性值2;
}
1.2 ID选择器
类选择器语法:
#ID{
属性名:属性值1;
属性名:属性值2;
}
1.3 类选择器
.类{
属性名:属性值1;
属性名:属性值2;
}
2.内部样式表
写在页面 标签的 中
<style>
选择器{属性1:属性值;属性2:属性值2}
</style>
优点:
1.同一页面,一处定义,多处使用
2.代码整洁,便于修改
3.外部样式表
将css代码保存在扩展名为css的文件中
链接式 导入式
链接式:
<link rel="stylesheet" href="css文件路径" type="文件类型">
导入名:
<style>
@import url("style.css");//文件路径,在style第一行
</style>
链接式与导入式的区别:
链接式常用
语法 <link> @import
提供者 HTML CSS
样式权重 高 低
加载顺序 与页面同时加载 页面加载完后加载
从上至下执行顺序称为标准文档流
4.高级选择器(层次选择器)
4.1后代选择器
body p{color:red}
body元素下所有的P元素内的内容为红色
空格链接,匹配body元素内所有的p元素
4.2子选择器
body>p{color:red}
body元素下面的子元素p中的内容为红色
使用>链接,匹配body中第一代p元素
4.3相邻同胞选择器
.active+li{
background:yellow;
}
与类选择器相邻(类选择器下一个)的标签背景颜色为黄色
注意:
使用+链接,紧与active后的li元素
4.4通用兄弟选择器
.active~li{
background:yellow;
}
类选择器下面的li元素内的内容背景色全为黄色
注意:
使用~链接 匹配active元素后的所有li元素
5.结构伪类选择器
:first-child 用于父元素的第一个子元素设置样式
:last-child 用于父元素的最后一个子元素设置样式
:nth-child(n) 用于父元素的第n个子元素设置样式
:first-of-type 用于选择父元素下相同类型子元素的第一个
:last-of-type 用于选择父元素下相同类型子元素的最后一个
:nth-of-type(n)选择器:用于选择父元素下相同类型子元素的第n个
6.属性选择器
E[attr]:选择匹配具有属性的attr的E元素
E[attr=val]:选择匹配具有属性的attr的E元素,并且属性值为val(val区分大小写)
E[attr^=val]:选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
E[attr$=val]:选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
E[attr*=val]:选择匹配元素E,且E元素定义了属性attr,其属性值包含了val
6.字体样式
font-family:设置字体类型
font-size:设置字体大小
font-style:设置字体风格
font-weight:设置字体粗细
font:用于字体综合设置
可以同时指定多个字体
p{font-family:Arial,"Times New Roman","微软雅黑","黑体","宋体"}
1.多个字符之间用英文字符隔开
2.英文字体位于中文字体之前
3.中文字体需要添加英文符号
4.英文字体中包含空格,#,¥等符号,须添加英文引号
5.当浏览器不支持第一个字体时,会尝试下一个,知道匹配到支持的字体为止。如果都不支持,则使用默认的字体
7.文本样式
color 设置字体颜色
text-align 设置字体文本水平对齐的方式
text-indent 设置文本首行缩进
line-height 设置文本行高
text-decoration 设置文本装饰
vertival-align 设置文本垂直对齐方式
text-shadow 设置文本阴影效果
8.列表样式
list-style-type:列表项标记的类型
list-style-image:使用图片替换列表项的标记
list-style-position:设置在何处放置列表项的标记
list-style:设置所有的列表属性
list-style-type常用来去除无序列表的小圆点
list-style-type:none;
9.背景属性
background-color 背景颜色
background-image 背景图片
background-repeat 规定如何重复图片
background-position 背景位置
background-size 背景尺寸
background-image:linear-gradient(方向,颜色,颜色)
9.1 background-repeat
background-repeat 规定如何重复图片
repeat 默认
repeat-x 背景图像在水平方向重复
repeat-y 背景图像在垂直方向重复
no-repeat 背景图像仅显示一次
9.2 background
background 复合属性,可以将背景相关的样式都定义在符合属性中
background:背景图像 背景定位 背景重复方式
9.3 渐变
语法:
background-image:linear-gradient(direction,color-stopl,color-stop2,......);
direction 渐变方向
color-stopl,color-stop2 渐变颜色
10.div 盒子模型
盒子组成主要内容:
内容:content
边框:border
外边距:margin
内边距:padding
10.1 边框:
语法:
border:宽度 样式 颜色
线条:
solid 实现
dashed 虚线
dotted 点线
double 双实线
可单独设置一边样式:
border-方向-style:
如:border-left-style:
border-style:dotted dashed
dotted(上下都为点线) dashed(左右都为虚线)
方向为顺时针 上->右->下->左
当3个值时:左边=右边
边框宽度 border-width
边框颜色 border-color
颜色可设置为形式:1)英文
2)rgb
3)十六进制
border-color单独使用不起作用,必须先使用border-style设置边框样式
10.2 外边距
网页有多个盒子组成,若想拉开距离,就要设置外边距
margin可以单独改变元素的上右下左边距,也可以一次性改变所有边距
如:
margin-top:
margin-right
margin-bottom
margin-left
margin:
10.2.1自动居中
margin:0 auto
box-sizing:border-box
可以将设置了内填充后父级自动变大的效果去除(取消放大)
10.2.2outline
outline不占像素,作用相当于border,但border占像素(用来测试边框)
清除网页自带样式
margin:0
padding:0
10.3 内边距
调整边框与内容的距离
padding可以单独改变元素的上右下左边距,也可以一次性改变所有边距
如:
padding-top:
padding-right
padding-bottom
padding-left
padding:
10.4圆角边框
border-radius可以单独改变元素的圆角边距,也可以一次性改变所有圆角边距,顺序上右下左
当1个值时:对应全部
当2个值时:左上和右下第一个值,右上和左下为第二个值
当3个值时:第一个值是左上角,第二个值是右上和坐下,第三个值是右下
当4个值时,第一个是左上,第二个是右上,第三个是左下,第四个是右下
语法:
border-radius:length{}
border-radius实现圆形效果时:
1.设置圆角的半径为50%
2.设置圆形半径为元素宽度的一半
border-radius:100px;
border-radius:50%;
10.5盒子阴影
语法
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:必须的,水平位置,运行负值(x)
v-shadow:必须的,垂直位置,运行负值(y)
blur:可选 模糊距离
spread:可选 阴影大小
color:可选 阴影颜色
inset:可选 从外层阴影改变内测阴影
11.浮动
在网页中都是标准文档流自上而下开发模式,浮动脱离标准文档流
11.1display
display:
block:将元素显示块级,带有换行符
none:隐藏
inline:将元素显示为行级,无换行符
inline-block:行内块元素
display:block 转换为块级元素
display:none 隐藏
display:inline 转换为行内元素
display:inline-block 排列在同一行,支持宽度和高度
11.2 浮动
选择器:{
float:属性值;
}
属性值:
left 左
right 右
none 默认值,元素不浮动
11.3 清除浮动
选择器:{
clear:属性值;
}
属性值:
left:在左侧不允许浮动元素
right:在右侧不允许浮动
both:在左右两侧均不允许浮动
none:默认值,运行浮动出现在左右两侧
11.4 overflow
选择器:{
overflow:属性值;
}
属性值:
visible:默认值,超出盒子自身的内容不会被修剪,会出现在元素框外
hidden:超出盒子自身的内容会被修剪,并且内容不可见
scroll:超出盒子自身的内容会被修剪,但是浏览器会显示滚动条以便查看其它内容
auto:如果超出盒子自身的内容会被修剪,则浏览器会显示滚动条以便查看其它内容
11.5 inlink-block和浮动的区别
inline-block的优缺点如下:
1.可以让元素在一行,支持宽高度,代码实现起来既方便又便于理解,并且属性的元素在标准文档流中,无须清除浮动
2.位置方向不可控制,会使排列在一行的元素中间有空格
浮动的优缺点如下:
1.可以让元素在一行,支持高度和宽度,可以决定排列方向
2.设置浮动后元素脱离标准文档流,会对周围元素产生影响,必须清除浮动
12. 定位
语法:
选择器{
position:属性值;
}
属性值:
static 默认值
relative 相对定位
absolute 绝对定位
fixed 固定定位
12.1 相对位置
特性:
1.相对自己的初始位置定位,元素仍处于文档流中
2.元素位置发生偏移后,它原来的位置会被保留下来
3.层级提高,可以把标准文档流中的元素及浮动元素盖在下面
通用场景:
通常配合绝对定位使用,为添加了绝对定位的子元素定义一个拥有相对定位的父级元素
通常配合绝对定位使用,为 添加了绝对定位的子元素 定义一个拥有相对定位的 父级元素
12.2 绝对定位
特性:
1.基于已定位(非static类型)的父级元素进行定位
1)如果没有已定位的父级元素,则相对body根元素定位
2.元素位置发生偏移后(原来的位置不会被保留)
3.层级提高,可覆盖标准文档流中的元素及浮动元素
4.脱离文档流
12.3 固定定位
特性:
1.基于浏览浏览器窗口为基准进行定位
2.元素不会随滚动条移动
非常感谢你阅读到这里,如果这篇文章对你有帮助,希望能留下你的点赞!
更多推荐
已为社区贡献1条内容
所有评论(0)