AllinToyou

这个屌丝很懒，什么也没留下！

热门标签

网页制作基础学习——HTML+CSS常用代码_网页设计模板html代码

作者：AllinToyou | 2024-04-05 09:34:55

踩

网页设计模板html代码

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

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

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】