html常用标签

1、无语义标签

<div></div>
<span></span>

2、常用语义标签

<hn></hn> 标题
<p></p> 段落
<pre></pre> 原文本
<br /> 换行
<hr /> 分割线

3、文本标签

<i></i> 斜体字
<em></em> 斜体字，表示强调
<b></b> 粗体字
<strong></strong> 粗体字，表示强调(语气更强) 
<del></del> 删除的文本
<ins></ins> 插入的文本
<sub></sub> 下标字
<sup></sup> 上标字
<ruby>
	拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增

4、其他标签

<section></section> 块
<small></small> 小号字体

v_test：熟悉常用标签

常用html标签详解：

<html lang="zh-cn">
<head>
<meta charset="UTF-8">
< itle>常用标签
</head>
<ody>
1.无语义标签
div:最常用的标签,没有之
span:最常用的纯文本标签
<div>
<span>

<!-- 2.常用语义标签 -->
<!-- 标题:h1~h6 -->
<!-- h1标签较经常出现,作为页面最大title形式出现,且一个页面一般只出现一次 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
正文
<!-- br:换行 | hr分割线 -->
<br>好<br>的<br>
<hr>呵<hr>呵<hr>


<!-- 3.文本标签 -->
<!-- i:很常用的标签,一般不作为斜体文本使用,作为字体图片使用,原因写法简单 -->
<i>斜体</i>
<em>以斜体方式强调</em>
<b>加粗</b>
<strong>以加粗方式强调</strong>
<!-- p:段落标签具有具体区域,成段出现,段落之间存在段落间距 -->
<p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<p>123    456		789</p>
<!-- 原样文本标签:会保留所有字符,原样显示 -->
<pre>123    456		789</pre>
<!-- 样式具有下划线 -->
<ins>插入的文本</ins>
<!-- 样式具有中划线 -->
<del>删除的文本</del>
<!-- eg -->
&yen;988 <del>98888</del>
<!-- 10的平方 -->
<span>10<sup>2</sup></span>
<!-- 水分子 -->
<span>H<sub>2</sub>O</span>
<!-- 右标:小号字体 -->
<span>你很帅<small>谁信</small></span>
<!-- pinyin -->
<ruby>
	牛掰<rt>niubai</rt>
</ruby>

完整补充：

HTML

1 HTML 基本语法

html标签

单标签 <img /> 、<img>
双标签 <html>

属性属于标签

<img src="图片的地址">
<	able width="100" height="200"></table>

语法规范

标签名不区分大小写建议小写
属性名不区分大小写建议小写

注释

<!-- 多行 -->
<!--
多行
-->

常用HTML实体

&n bsp; 空格
&l t; <
&g t; >
&a mp； &
&copy；版权
&yen；人民币

2 HTML常用标签

主体结构

<html>
<head>
<ody>

HEAD标签

< itle> 网站标题
<meta> 指定网页的元信息指定关键字指定描述指定字符集属性： charset、name、content
<style>
<link> 导入css或者指定网页图标属性 src、 type 、 rel
<script> 导入javascript

格式排版标签

<hn> 1~6 标题
<p>
段落
<pre> 原样输出
<r> 换行
<hr> 分隔
<div>

文本标签

<em> 强调表现为斜体
<strong> 强调表现为粗体
<mark> H5新增表示被选择
<sup> 上标
<sub> 下标
<ins> 添加的内容
<del> 删除的内容
< uby> / 加拼音 H5新增

4 CSS基本语法

使用CSS

link 引入外部的CSS文件
<style> 在html中写
使用html元素的style属性

格式

选择器 {
    CSS属性: 值;
    CSS属性: 值;
}

选择器 {属性:值;属性:值}

注释

/* */

CSS长度单位

px  像素
em  默认大小的倍数
百分比   默认大小参照
cm
mm
pt

CSS 颜色单位

colorName：  red/green/bue/purple/orange/yellow/pink/skyblue

rgb数字  rgb(34,45,23)  rgb(20%, 57%, 100%)

16进制   #abcdef   #f90   #ccc

5 CSS选择器

#标签名选择器
tagName {
    
}

# 类名
.className {
    
}

#ID选择器
#idName {
    
}


# 全局选择器
* {
    
    
}


# 组合 后代元素
选择器 选择器

# 组合 子元素
选择器>选择器

# 群组
选择器,选择器，选择器

# 多条件
p.item

6 选择器优先级

ID > CLASS > tagName > *

组合选择器 数数

7 CSS属性常用

字体

font-family
font-size
font-weight normal/bold
font-style normal/italic
font-variant normal/small-caps
font 复合属性
font:[weith | style | variant] size family

颜色

color

文本

word-spacing
letter-spacing
text-align: left / center /right
vertical-align: baseline / middle ....
line-height 行高
text-decoration ： none/overline/underline/line-through
text-indent: 2em
word-wrap: break-word
overflow-wrap word-wrap的别名 CSS3
white-space pre pre-wrap