0


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

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. 字符实体

&nbsp; 空格
> 大于>
< 小于<
" 引号
&copy; 版权符号

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.元素不会随滚动条移动

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

标签: html css 学习

本文转载自: https://blog.csdn.net/weixin_57999659/article/details/128839626
版权归原作者 北辰要努力 所有, 如有侵权,请联系我们删除。

“网页制作基础学习——HTML+CSS常用代码”的评论:

还没有评论