HTML常用标签与CSS属性_html是标签,css是属性-优快云博客

本文详细介绍了HTML的基础标签，如标题、段落、图像、链接等，并深入探讨了CSS的选择器、字体属性、布局和定位，包括浮动、相对、绝对和固定定位。还涉及了表格、表单和列表的创建，以及CSS的溢出处理和盒子模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML（超文本标记语言）

html与xhtml区别

在html中标签名可以大（小）写xhtml只能小写
在html中标签可以不闭合，xhtml必须闭合
在html中嵌套可以先开始先结束，xhtml必须符合规则
xhtml是html的严格版

标签、属性、元素

标签

<name></name>

属性

id="uname"
id叫属性名 uname叫属性值

元素

<name id="uname">张三</name>
元素:开始标签+结束标签+属性+标签中的内容

h1~h6标题标签

	<h1>第一观察</h1>
    <h2>第一观察</h2>
    <h3>第一观察</h3>
    <h4>第一观察</h4>
    <h5>第一观察</h5>
    <h6>第一观察</h6>

：h1最大，h6最小

hr标签

hr是单标签,因为他只有开始没有结束
在hr标签中后面的/可以加可以不加
表示一条分割线

<hr>
<h1 class="haha">我是一个h1标签</h1>
<hr />

p标签

是男标签（块级元素）
独占一行

br标签

换行的作用

文本格式化标签

<!-- b标签 加粗的 bold -->
    <b>b标签版</b>
    <hr>
    <!-- strong 加粗 -->
    <strong>strong标签版</strong>
    <hr>
    <!-- i标签 斜体标签 -->
    <i>i标签版</i>
    <hr>
    <!-- em标签 斜体标签 -->
    <em>em标签版</em>
    <hr>
    <!-- u标签 表示带下划线 -->
    <u>u标签版</u>
    <hr>
    <!-- s标签 表示中划线 -->
    <s>s标签版</s>
    <hr>
    <!-- del标签 表示被删除 -->
    <del>del标签版</del>
    <hr>
    <!-- ins标签,也是带下划线 -->
    <ins>ins标签版</ins>

div标签

容器

span标签

女标签（行内元素）
不独占一行
当一个男标签和一个女标签在一起的时候,也是两行男标签的优先级别＞女标签

img标签

人妖标签（行内块元素）
人妖标签可以和女标签共处一行
人妖标签不可以和男标签共处一行

 <img src="./img/001.jpg" alt="你的图片炸了">

src中写图片的路径地址
alt表示当你图片的路径出问题的时候,也就是说图片找不到的时候显示alt中的内容
src中写线上地址有网络可以加载

a标签

a标签是一个女标签（行内元素）
女标签不能设置宽高
超链接标签点一下会跳转到新的页面

	 <a href="http://www.baidu.com">百度一下 默认版</a>
     <!-- 默认的是 在当前选项卡跳转 -->
     <a href="http://www.baidu.com" target="_self">百度一下 _self版</a>
     <!-- _self版也是在本地跳转 -->
     <a href="http://www.baidu.com" target="_blank">百度一下 _blank版</a>
     <!-- _blank版是打开一个新的选项卡 -->
     <a href="#">这是一个空链接</a>
     <!-- #是一个锚点链接 -->

href属性代表我们要链接的资源属性值为他的地址

target属性：（target有目标的意思）

     1）_self 在当前选项卡跳转
     2）_blank 打开一个新的选项卡

列表

自定义列表 dl+dt+dd
有序列表 ol+li
无序列表 ul+li

表格

 <table border="1" cellspacing="0" width="1200px" height="500px" align="center">
        <tr align="center">
            <td colspan="2">时间</td>
            <!-- <td></td> -->
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
        </tr>
        <tr align="center">
            <td rowspan="6">上午</td>
            <td colspan="6">大课间</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
            <td>数学</td>
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td>2</td>
            <td>数学</td>
            <td>体育</td>
            <td>数学</td>
            <td>数学</td>
            <td>语文</td>
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td colspan="6">眼保健操</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td>3</td>
            <td>体育</td>
            <td>语文</td>
            <td>体育</td>
            <td>语文</td>
            <td>美术</td>
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td>4</td>
            <td>英语</td>
            <td>语文</td>
            <td>托管</td>
            <td>体育</td>
            <td>体育</td>
        </tr>
        <tr align="center">
            <td rowspan="5">下午</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="4">午会</td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td>1</td>
            <td>音乐</td>
            <td>养成教育</td>
            <td>语文</td>
            <td>班队会</td>
            <td>思品</td>
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td colspan="6">眼保健操</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td>2</td>
            <td>科学</td>
            <td>美术</td>
            <td>音乐</td>
            <td>书法</td>
            <td rowspan="2">社团活动</td>
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <td>3</td>
            <td></td>
            <td>英语</td>
            <td>思品</td>
            <td>托管</td>
            <!-- <td></td> -->
        </tr>
    </table>

表格的标签 table
行标签 tr
th 表头 td 每一个表格
cellspace 是单元格之间的间隙
align 有位置的意思 center 居中
rowspan就表示跨行后面的数字表示跨几行
colspan表示跨列后面的数字表示跨几列

表单

form是表单标签，其中有以下属性

     1）action表示收集完数据后，将数据提交的服务器地址
     2）method表示以什么样的方式提交给服务器 GET的话就是GET请求
    3） name="表单名称"

<form action="http://www.baidu.com" method="GET">
        <ul>
            <li> <label for="phone">手机号:</label> <input type="text" id="phone" placeholder="输入手机号"></li>
            <!-- type类型为text 表示一个普通的文本框 -->
            <li><label for="password">创建密码:</label><input type="password" name="" id="password"></li>
            <!-- type类型为password 表示一个密码框 -->
            <li> <label for="uname">姓名:</label><input type="text" name="" id="uname"></li>
            <li><label for="idNum">身份证号:</label><input type="number" name="" id="idNum"></li>
            <li>
                <label for="sex">性别</label>
                <input type="radio" name="sex" id="" checked>男
                <input type="radio" name="sex" id="" >女
            </li>
            <li>
                <label for="">生日</label>
                <select name="" id="">
                    <option value="1990">1990</option>
                    <option value="1991">1991</option>
                    <option value="1992">1992</option>
                    <option value="1993">1993</option>
                    <option value="1994">1994</option>
                    <option value="1995">1995</option>
                    <option value="1996">1996</option>
                    <option value="1997">1997</option>
                    <option value="1998">1998</option>
                    <option value="1999">1999</option>
                    <option value="2000">2000</option>
                </select>年
                <select name="" id="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>月
                <select name="" id="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>日
            </li>
            <li>
                <label for="">我现在</label>
                <input type="radio" name="now" checked>在工作
                <input type="radio" name="now">在上学
                <input type="radio" name="now">其他
            </li>
            <li>
                <label for="">居住地</label>
                <select name="" id="">
                    <option value="henansheng">河南省</option>
                    <option value="hebeisheng">河北省</option>
                </select>
            </li>
            <li>
                <label for="">爱好</label>
                <input type="checkbox">打篮球
                <input type="checkbox">打网球
                <input type="checkbox">上网
                <input type="checkbox">跳舞
            </li>
            <li>
                <label for="">自我介绍</label>
                <textarea cols="30" rows="10"></textarea>
            </li>
            <input type="button" value="提交">
        </ul>

    </form>

label标签他会绑定input 帮助我们获取焦点

input标签中的属性：

         1）type 类型
            type类型为text 表示一个普通的文本框
            type类型为password 表示一个密码框
            type类型为number 表示一个数字输入框
            type类型为radio表示单选
            type类型为checkbox表示多选
            checked表示默认选中
         2）placeholder 提示语

textarea标签表示文本区域

CSS（层叠样式表）

选择器

常用的选择器

*{} 通配符选择器
标签选择器（直接标签名{} 前面什么都不要加）
类选择器（切记前面是.）
id选择器（#id名{} id名是属性id的属性值）

关系选择器

后代选择器（选中当前这个标签包裹住所有我们选中类名的标签）

 .father .son{
        color: skyblue;
    }

儿子选择器（中间用>连接）

.father1>.son1{
        color: skyblue;
    }

兄弟选择器（选中的是某个元素后面紧挨着的那个元素）

div+p{
        color: skyblue;
    }

联合选择器

 /* 并集选择器 联合选择器 */
        .box1,.box2{
            color: violet;
        } 
         div,p,span{
            color: red;
        } 
         div,.box2{
            color: red;
        } 
         .box1,span,ul li{
            color: turquoise;
        }

属性选择器

[id]当为这样的时候，表示有id属性即可
[id][class]表示id和class属性都必须有
[id],[class]这样表示 id和class有一个即可
[id=“box1”] 表示选中id这个属性属性值为box1的元素
id^=box 表示id属性值以box开头的 (正则表达式)
id$=“1” 表示id属性值是以1结尾的元素
id*="o"表示id属性值中有o的元素
使用class一次性起了多个名字使用~=可以使用其中一个名字

链接伪类选择器

:link{} 普通状态下的没有被点击的时候的样子
:visited{} 表示点击后的样式
:hover表示我们鼠标移上去时候的颜色
:active表示点击按压后的颜色
:target表示当我们跳转到锚点后锚点的样式

位置伪类选择器

:nth-child()同级别的第几个，不管你是什么样的标签，只选中第几个孩子
:nth-of-type()同类型的第几个，你需要考虑是同一种标签

input伪类选择器

:focus 表示聚焦后的状态
:disabled表示输入框禁用
:enabled 可输入时候的样式

伪元素选择器

::after就是挂在到我们元素身后的一个伪元素
::before 就是挂到我们选中的元素之前

字体属性

字体大小的设置 font-size
字体样式 font-style
设置字体粗细 font-weight
设置字体的格式 font-family
设置字体颜色 color

文本设置

text-decoration: underline 下划线
text-decoration: overline 上划线
text-decoration: line-through 中划线

文本的位置

 	text-align: left 居左
 	text-align: center 居中
 	text-align: right 居右

设置文本首行缩进 text-indent
设置行高 line-height

设置文字间距 letter-spacing word-spacing

 	word-spacing表示的是单词之间的间距
 	letter-spacing表示的是文字之间的间距

设置文字透明

 color: rgba(255, 182, 193, 0.5);
            /* rgba最后一个参数表示的是 透明度 */
            /* 0.5表示半透明 0表示全透明 1表示不透明 */

设置文字突起 text-shadow

.box16{
            width: 800px;
            height: 200px;
            background-color: tomato;
            text-align: center;
            font-size: 90px;
            line-height: 200px;
            color: tomato;
            text-shadow: -1px -1px 2px #fff,1px 1px 2px #000;
            /* 文字突起 */
        }
        .box17{
            width: 800px;
            height: 200px;
            background-color: tomato;
            text-align: center;
            font-size: 90px;
            line-height: 200px;
            color: tomato;
            text-shadow: 1px 1px 2px #fff,-1px -1px 2px #000;
            /* 文字凹陷 */
        }

display变性

当属性值为inline的时候表示行内元素也就是女标签
当属性值为block得时候表示块级元素也就是男标签
当属性值为inline-block的时候就是人妖标签行内块元素

溢出处理

overflow属性（处理超出部分）

当属性值为hidden 表示超出部分隐藏
visible就是不隐藏看得见当我们什么都不写的时候默认的就是visible
当属性值为scroll的时候就表示卷起来就是出现滚动条

word-break属性

当属性值为normal是遵循浏览器的默认规则当我们什么都不写的时候就是normal
当属性值为keep-all的时候是报证单词的完整性
当属性值为break-all的时候报证优先填满一行填不满强行打断
当属性值为break-word的时候是报证单词的完整性

white-space属性

当属性值为nowrap的时候就算我这一行的内容超出了也不换行
overflow hidden可以和white-space搭配使用

盒子模型

内边距

 /* 内边距的属性名叫Padding 其参数有四种形式 */
            padding: 50px;
            /* 写一次参数 表示上下左右的内边距都是50px */
            padding: 50px 20px;
            /* 当为两个参数的时候 分别代表什么 50px是上下的内边距 20px是左右的内边距 */
            padding: 50px 20px 10px;
            /* 当有三个参数的时候 上 左右 下 */
            padding: 50px 40px 30px 20px;
            /* 当有四个参数的时候 上 右 下 左 */
            /* 第二种写法 */
            /* 你可以直接给某一个方向上添加内边距 */
            padding-top: 10px;
            /* 
                padding-bottom
                padding-left
                padding-right
            */

外边距

 /* margin就是外边距的属性名 属性值和padding一样 */
            margin: 50px 100px 20px 10px;
            /* 一个参数表示四个方向都是50px */
            /* 两个参数 50px表示的上下 100px表示的是左右 */
            /* 上 左右 下 */
            /* 上右下左 */

外边距就是与最近的相邻元素的距离
想让他哪边有外边距那你就给他写margin-方向就行

margin重叠问题

父子间

给父级加一个边框这种方法有时候不适用
给父级加 overflow:hidden
你可以给父级加一个上面的内边距但是会让盒子大一点点

背景图

背景图 background-image
背景图的大小 background-size

  background-size: 500px 500px; 
        /* 这表示宽500px 高500px */

background-size: cover;background-size: contain;

 	cover 是将盒子完全填满,但是图片不一定完全显示
     contain 就是将图片完全显示,但是盒子不一定填满
     因为他们两个都是对图片进行等比例缩放

background-repeat表示是否平铺

	no-repeat就表示不平铺 
    repeat-y就表示y轴方向平铺 X不平铺
    repeat-x就表示x轴方向平铺 Y不平铺

background-position就是背景的位置

浮动

浮动的作用让块级元素浮动起来可以并排显示一排填满换另一排

浮动属性 float

 	值为left的时候 是左浮动
     值为right的时候 是右浮动

浮动的影响

 	高度塌陷问题子元素一旦浮动 就半脱离标准文档流 导致父元素没有内容 所以高度塌陷了

解决方案

 1)加高法  直接给父元素加一个高 
 2)overflow:hidden; 本意是 处理超出部分 超出部分隐藏
 3)内墙法 这里需要用到一个属性 clear:both; 清除浮动
 4)伪元素法 这种方法用的也很多

层布局

相对定位（ relative）

当你只有一个相对定位的时候其坐标原点是其原来的位置
相对定位是不会脱离标准文档流的,他原本的位置还是被自己占着,别人是不能占用
不管一个盒子之前是什么性别相对定位后还是什么性别性别是不会改变的
一般情况下,我们一般都要通过使用left,top,right,bottom来设置偏移量 ,但是 position:relative这一行代码除了表示相对定位外还有其他含义
相对定位的应用场景,一般是用到对一个元素的位置进行微调