网页设计基本标签和属性解释

谦｀

已于 2023-12-11 00:51:51 修改

阅读量1.1k

点赞数 18

文章标签： html5 css

于 2023-12-11 00:49:33 首次发布

本文链接：https://blog.csdn.net/qq_74107511/article/details/134917445

版权

HTML

头部标签：

DOCTYPE:

是（文档类型）的缩写，他是网页必备的组成部分，避免浏览器怪异模式。

<!DOCTYPE html>

`head`

标签

`body`

标签

`title`

标签：网页名称，title的增加有利于SEO优化

`meta`

单标签

<meat charset="utf-8">

基本标签：

标题`h1-h6`

一级到六级标题

在标签中增加属性：align="left|center|right"表示标题左中右

段落<p align="right">段落标签</p>

换行：`<br>`

水平线`<hr>`

四个属性<hr color="red" width="300px" size="20px" align="right"> 默认居中

标签之图片img：

<img src="" alt="" width(宽度)="" height(高度)="" title(鼠标悬停给提示)="" > 一般只规定宽度，不规定高度

图片路径

绝对路径：完整路径

相对路径：

子级关系：/ 父级关系：../ 同级关系： ./

网络路径:具体的网络地址

超文本链接a：

<a href="https://www.baidu.com">内容</a>

文本标签：em/b/i/strong/del/span

标签描述

<em>	定义着重文字
<b>		定义粗体文本
<i>		定义斜体
<strong>	定义加重语气
<del>	定义删除字
<span>	元素没有特点

列表标签ol/li：

有序列表：
能够嵌套

<ol type="1/a/A/i/l">
	<li>第一行</li>
	<li>第二行</li>
</ol>

无序列表ul/li：

能够嵌套

<ul type="disc实心圆/circle空心圆/square小方块/none不显示 ">//默认为实心圆
    <li>第一个无序列表</li>
    <li>第二个</li>
</ul>

快捷键：ul>li*3

表格table/tr/td：

标签：

行：
单元格(列):
表格属性：
border: 设置表格的边框
width：设置表格的宽度,表格整个宽度
height：设置表格的高度,表格整个高度
table>tr*2>td*2
<table border="1" width="400px" height="400px">
</table>
快捷键：table>tr*2>td*3{单元格}
表格单元格合并：
水平合并：colspan
垂直合并：rowspan
<table>
   <tr>
       如果合并单元格1和2：
   <td colspan="2">单元格1和单元格2</td>
   <--<td>单元格2</td> >
   <td>单元格3</td>
   </tr>
</table>
水平合并保留左边删除右边
垂直合并保留上，删除下

Form表单：

表单是由容器和控件组成，一个表单一般应该包含用户填写信息的输入框、按钮等，这些输入框，按钮叫做控件，表单就是容器，他能容纳各种各样的控件

属性：

action: 服务器地址，填url

name：表单名称

method中Get和Post的区别：

1、数据提交方式，get把提交的数据url可以看到，post看不到
2、get一般用于提交少量数据，Post用来提交大量数据

表单元素：表单标签、表单域、表单按钮

text、password、submit。三种最常用的表单元素，分别为文本、密码、提交按钮

<form>
    账号：<input type="text">文本域
    密码：<input type="password">
    确定<input type="submit" value="登录">按钮
</form>

块元素与行内元素（内联元素）

内联元素和块元素的区别：

块元素会在页面中独占一行，内联不独占一行，只占自身大小
可以设置width，height属性，内联不能
一般块级元素可以包含行内元素和其他块级元素
内联只包含内联，不能包含块级元素！

常见块级元素：

div、form、h1·h6、hr、p、table、ul等

常见内联（行内）元素：

a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）：

button、img、input

div标签：容器元素

H5新标签：

<header></header>头部
<nav></nav>导航
<section></section>定义文档中的节，比如章节，页眉，页脚
<aside></aside>侧边栏
<footer></footer>脚部
<article></article>代表一个独立的、完整的相关内容块，例如一片论坛帖子，一篇文章，一个用户的评论！

CSS：

层叠样式表:

又叫级联样式表，简称样式表，使网页变得美观一致

语法：在头部添加

    <style>
        h3{
            color:blue;
            font-size:30px;
        }
    </style>

三种引入样式的方法：

内联（行内）样式、内部样式、外部样式（引入css文件）

外部样式需要在头部引入

<link rel="stylesheet" type="text/css" href="xxx.css"

选择器*/元素/.：

全局选择器：

可以与任何元素匹配，优先级最低，一般做样式初始化

	*{
	margin: 0;
	padding: 0;
	}

元素选择器：

	p{
	font-size: 14px;
	}

类选择器：ccc是class的值

	.ccc{
		color:red;
	}
	一种写法
	<p class="classone size">
        这个class可以有两个值
	</p>

ID选择器：

id属性在style中是通过#来索引的，id是唯一的，不能重复

	<h2 id="mytitle">你好</h2>
	在css中:
	#mytitle{
		属性内容！
	}

合并选择器：

作用：提取共同的样式，减少重复的代码

    <style>
        p,h3{
            font-size:30px;
            color:red;
        }
    </style>

选择器的优先级：

css中，权重用数字衡量

元素选择器权重为：1

class权重为：10

id权重为：100

内联（行内）样式权重为：1000

同级别下按照代码执行顺序，后执行的生效！

字体属性：

规定文本的颜色：color

	div{color:red;}
	div{color:#ff0000;}
	div{color:rgb(255,0,0);}
	div{color:rgba(255,0,0,5);}

字体大小`font-size`:

最小字体为12px

文本的粗细`font-weight`:

值 bold,bolder,lighter,100-900定义由细到粗400等于默认，700等于bold

文本的样式`font-style`：

normal默认值/italic定义斜体字

字体类型：`font-family:`

"微软雅黑"

背景属性：

background-color :设置背景颜色

background-image ：设置背景图片

background-image: url(" 图片位置")

设置如何平铺背景图像：background-repeat

repeat ：默认值
repeat-x ：只向竖屏方向平铺
repeat-y ：只向垂直方向平铺
no-repeat ：不平铺

background-position : 设置背景图片显示位置

默认值：0% 0%
left top左上角
left center 左中
left bottom左下
right top 右上角

right center 右中
right bottom右下
center top 中上
center center中中
center bottom 中下
x% y% 第一个水平位置，第二个垂直位置，左上角是0% 0%，右下角是100% 100%，如果只指定了一个值，其他值默认50%。
xpos ypos 单位是像素

background-repeat：设置背景图片如何填充

background-sizie : 设置背景图片大小属性

length：

设置图片的宽度和高度，第一个宽度值，第二个高度，如果只设置一个，第二个值auto

percentage：

计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只设置一个，第二个值auto

cover：

保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小，切割图片使用率最高。

contain：

保持图片纵横比并将图片缩放成完全覆盖背景区域的最大大小，不切割图片

文本属性:

文本放置位置：

text-align：
left :文本居左排序，默认值
right:把文本排列到右边
center:把文本排列到中间

为文本添加下划线、上划线、删除线！

text-decoration:
underline：定义下划线
overline：定义上划线
line-through：定义删除线

控制文本大小写

text-transform：
captialize：定义每个单词开头大写
uppercase：全部字母大写
lowercase：全部字母小写

文本块中首行缩进

text-indent:
参数为：负数到整数px

表格属性：

border: 1px solid red;

第一个参数表格线的粗细，第二个参数是线的类型，第三个参数是线的颜色！

border-collapse:

设置表格的边框是否被折叠成一个单一的边框隔开。

collapse折叠效果

width和height：

表格宽度和高度
属性为数字+px

text-align：

设置水平对齐方式

td{text-align:right}一般给td加left、center、right

vertical-align:

垂直对齐方式
top居上
center居中
bott0m居下

padding:给td加，也就是内边距！！！

可以不用上面的文字对齐方式，非常方便

padding : 15px;

表格颜色:

th元素的文本和背景颜色

background-color:#颜色；背景颜色设置
color：#颜色；设置表格内字体颜色

关系选择器

后代选择器

	E F{}选择所有被E元素包含的F元素，中间用空格隔开

子代选择器

E>F{}//选择所有作为E元素的直接子元素F，对更深一层元素不起作用

相邻兄弟选择器

	E+F{}//选择紧跟E元素后的F元素，用加好表示

通用兄弟选择器

	E~F{}//选择E元素之后的所有兄弟元素F，作用于多元素

CSS盒子模型（Box Modle）

padding：内边距

如果是一个值，那么久上下左右都是那么大
如果是两个值，第一个值是上下，第二个值是左右边框距离

margin:外边距

border:边框

在外边距里面，在内边距外边，
第一个值是边框的粗细，第二个值是边框线的类型，第三个值是颜色
border: 5px solid blue;

还可以用

padding-left/right/top/bottom

这种设置，分别设置边距的上下左右。

外边距margin、边框：border、内边距：padding、实际内容：content

弹性盒子模型：

主要针对于一个大盒子内的很多小盒子如何摆放
弹性盒子模型由弹性容器和弹性子元素组成。
弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
默认弹性盒子里的内容是横向摆放
display: flex;//开启弹性盒子

<head>
<title>我的第一个网页！</title>
<meta>
<style>
    .container{
        width: 500px;
        height: 500px;
        background-color: #555;
        display: flex;/*开启弹性盒子*/
    }

    .box1{
        width:100px;
        height:100px;
        background-color:black;
    }
    .box2{
        width:100px;
        height:100px;
        background-color:blue;
    }
    .box3{
        width:100px;
        height:100px;
        background-color:aqua;
    }
</style>

</head>
<body>
    <div class = "container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    </div>

</body>