网页制作基础学习——HTML+CSS常用代码

Hello大家好,我是北辰!很高心您能来阅读!

HTML

HTML超文本语言(Hyget Text Language)

1993 HTML1.0

2013 HTML5.0

HTML5的优势:

1.化繁为简

2.跨平台

3.跨浏览器

4.功能强大,新增特性

HTML基本结构


  
   
   网页标题
  
  
   我的第一个网页
  
 
 
文档类型声明
语言类型声明
 头部
 主体

1. 标题标签

标题标签:用于定义网页的标题

h1最大 h6最小 特点: 1)会将文字自动加粗及放大 2)独占一行,属于块级标签

2. 段落标签

特点: 1)对字段对照网页大小进行自适应分段 2)属于块级标签独占一行

3. 换行标签


用于手动将页面内容换行

4. 水平线标签


在界面中添加水平线

5. 字体样式标签

加粗
加粗
倾斜
倾斜

6. 注释标签

7. 字符实体

  空格
> 大于>
< 小于<
" 引号
© 版权符号

8. 图像标签

9. 超链接标签


taret属性常用值
_self:在当前窗口打开目标页面
_blank:在新窗口打开目标页面
去哪旅行网 //target于iframe标签中的name属性相匹配
携程
9.1 锚链接
京东秒杀

京东秒杀

1.添加锚记,给元素添加id属性,注意id是唯一的 2.添加锚记,超链接的href属性值为#+id属性值-->

10. 列表

10.1无序列表
    无序列表
  • 列表项
  • 独占一行,块级元素
10.2 有序列表
    有序列表
  1. 列表项
  2. 独占一行,块级元素
10.3 定义列表
dl标签定义列表
dt标签定义项目
dd标签定义内容

11.表格

 table标签定义表格
   tr标签定义行
      td标签定义单元格
  
tr行 td列 th标题 caption标题标签
 table标签定义表格,边框为1
   tr标签定义行
     自动加粗
     
 table标签定义表格,边框为1
   tr标签定义行
      //rowspan跨两行
     
 --- 行    
  
表头,默认加粗和居中

12. 视频



width 视频宽度 值为:px
height 视频长度 值为:px
src 视频播放路径 值为:URL
controls 显示控件:播放/暂停 值为:controls
autoplay 视频就绪后立马播放 值为:autoplay
loop 循环播放 值为:loop
12.1 视频兼容性
视频播放兼容性

自上而下
第一个执行,其他不执行

13. div

页面头部 header
页面中部 section
页面底部 footer
文章内容 article
侧边栏 aside
导航栏 nav

14. iframe 内联框架

语法 :

frameborder框架边框

内联框架和超链接标签的使用

猛击这里查看携程官网

猛击这里查看去哪官网

15.form表单标签

action 指定路径 method 指定数据提交方式 提交方式:get post post: 1.不改变浏览器地址栏状态 2.安全性高 3.常用于保存,修改,删除 get: 1.会改变地址栏状态 2.安全性低 3.常用于查询

16.input标签


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.列表框 下拉菜单(重点)

数据库中接收的是value的值 selected为默认选中 注意: 1.select option是成对出现的 2.option中必须有value属性

18.文本域

textarea

19.标注

单击标注文本内容,浏览器自动将焦点转移到相关表单元素上
如:


注意: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.内部样式表

写在页面 标签的 中

优点:

1.同一页面,一处定义,多处使用

2.代码整洁,便于修改

3.外部样式表

将css代码保存在扩展名为css的文件中
链接式 导入式

链接式:

导入名:


链接式与导入式的区别:
链接式常用
语法                  @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.元素不会随滚动条移动

非常感谢你阅读到这里,如果这篇文章对你有帮助,希望能留下你的点赞!

你可能感兴趣的:(前端,html,css,学习,前端)