Hexo
0%

html_下各类标签含义

发表于 更新于 分类于 ，

html_下各类标签含义：

<center></center>   居中标签
<head></head>      浏览器头
<body></body>     浏览器
<title></title>      head下的title标签  就是浏览器头名称
<p></p>     段落标签
<br>    换行标签
<hr>      分割线标签
<u></u>  下划线标签
<sub></sub>  下标
<sup></sup>  上标

<h2><strong>加粗标签</strong></h2>

<b></b>      加粗显示
<strong></strong>     突出文本，强调内容

倾斜标签
<em></em>
<i></i>

删除线标签
<s></s>
<del></del>

color='<颜色>'       颜色
width='<宽度>'          宽度

align='left'      靠左边
align='right'      靠右边

<      左尖角号
>      右尖角号

\        空格占位符   受字体影响
\         空格占位符   宽度是一个中文宽度，不受字体影响
\©        符号 ©，版权
™                商标™
®                 商标®

<div></div>    划分区域
<span><\span>    更没有实际意义，主要用于文本独立装饰的是否，内容多宽，就占用多宽的空间距离

无序列表标签
    1、ul里面只能放li标签，li里面可以放其他标签
    2、默认的是黑色的实心圆
    3、type   disc(默认的实心圆)   circle(空心圆)    square(正方形圆)  none(不显示圆)
<ul>
    <li>内容</li>
    <li>内容</li>
</ul>


有序列表标签
<ol>标签只能用来存放\<li>标签，数字是自动生成的)
1、li标签里面可以随意放任何标签，但是在ol标签里面只能放li标签
2、数字是自动生成的 
3、ol标签拥有属性
    type属性:共5个
    取值范围: 1、a、A、i、I
    start:取值只能是一个数字
<ol>
    <li>1.把冰箱打开</li>
    <li>2.大象装进去</li>
    <li>3.冰箱关上</li>
</ol>

自定义列表

<dl>
    <dt>我是图片</dt>
    <dd>我是文字</dd>
</dl>

img标签属性

src  链接
alt 是当图片实效，无法显示之后出现的文字
title  图片的名字
width  宽度
height   高度

超链接标签

超链接<a></a> 标签
target="_self"     默认值是:_self  在前页面打开超链接
target="_blank"    新窗口打开超链接
超链接可以包裹图片或者文字等等

<h5>例如：</h5>

<pre data-language=HTML><code class="language-markup line-numbers"><a href="">
    <img src="" alt="">
</a>

<h1>单元格</h1>
</code></pre>

<pre data-language=HTML><code class="language-markup line-numbers"><table>  <!-- 创建表格 -->
    <tr>     <!-- tr表示行 -->
        <td>1</td>     <!-- td表示单元格 -->
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<!--
table 表格属性
1、宽度 width
2、高度 height
3、 边框 border
4、边框颜色 bordercolor
5、背景颜色  bgcolor
6、水平对齐  align="left或者right 或者center"
7、cellspacing = "单元格与单元格之间的间距"
8、cellpadding= "单元格与内容之间的空隙"
百分比是相当于父元素的百分比，而非屏幕的百分比
-->

<!--
行 tr 属性
1、高度 height
2、背景颜色  bgcolor
3、文字水平对齐  align="left或者right 或者center"
4、文字锤子对其  valign=""top或者middle或者bottom
-->
<!--
td 下夸行合并 colspan="2"
td 下夸列合并  rowspan="2"
-->
</code></pre>

<img src="https://s2.loli.net/2022/06/08/mgGdypov1PTbnkJ.png" alt="单元表格" />

<pre data-language=HTML><code class="language-markup line-numbers">表单标签form 和input


<form action="向何处发送表单数据" method="post或者get">
    <input type="text">
    <!--
    A、 属性 type 定义输入框的类型
        a、文本框 type="text"   密码框  type="password"
        b、提交框 type="submit"  和  <button>提交按钮</button>> 一样
        c、按钮框 type="button"  单纯的按钮
        d、重置框 type="reset" 清空的效果
    B、属性 placeholder 描述输入字段预期值的剪短提示信息。兼容到IE8以上
    C、属性 name 必须设置，否则在提交表单时，用户输入其中的数据不会被发送到服务器
    D、属性 value
    -->
</form>
</code></pre>

css样式表引入

<!--第一种引入样式    加载页面的同时，加载css-->
<link rel="stylesheet" type="text/css" href="css/html前端_18-css外部样式.css">
<!--stylesheet 样式      type属性 为css          href为路径-->
<!--第二种导入方式    #  特性是在页面加载完之后，才会加载css-->
<style>
    @import url(css/html前端_18-css外部样式.css);
</style>
</code></pre>

选择器添加属性

/*class类选择器*/
div.idm{background-color: sienna;}    /*其中div是标签，idm是class类*/
div.idm#xiao{color: red;}      /*其中div是标签，idm是class类 #xiao 是id值*/
</code></pre>

通配符

margin    外边距
padding   内边距

*{margin:0;padding:0;}    /* 设置所有元素外边距为0，内边距为0*/
</code></pre>

组群选择器

<!--组群选择器用逗号隔开-->
<style>
    div,p,h1{
        color: red;
    }
</style>
</code></pre>

后代选择器

<!-- 特性  是先匹配所有的p标签，然后在匹配div标签
后代选择器
例如： 选择div下的p标签-->
<style>
    div p {
        color: red;
    }
</style>

伪类选择器

<!--
伪类选择器
语法：
    a:link{属性: 属性值;}   超链接的初始状态;
    a:visited{属性: 属性值;}    超链接被访问后的状态;
    a:hover{属性: 属性值;}    鼠标悬停，即鼠标划过超链接时的状态;
    a:active{属性: 属性值;}    超链接被激活时的状态，即鼠标按下时超链接的状态
link--visited--hover--active

说明：
A：当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
    a:link > a:visited > a:hover > a:active ,错误的顺序有时会使超链接的样式实效；
B：为了简化代码，可以把伪类选择器中相同的声明提出来放在a选择符中；
    例如： a{color:red;} a:hover{color:green}  表示超链接的初始和访问过后的状态一样；鼠标划过的状态和点击时的状态一样
-->
<img src="https://s2.loli.net/2022/06/08/iNHdzGOKsuIBfvS.png" alt="选择器的权重" />
</code></pre>

选择器的权重