html常用标签

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">
<\title>常用标签
</head>
<\body>
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="图片的地址">
<\table width="100" height="200"></table>

语法规范

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

注释

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

常用HTML实体

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

2 HTML常用标签

主体结构

• <\html>
• <\head>
• <\body>

HEAD标签

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

格式排版标签

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

文本标签

• <\em> 强调 表现为斜体
• <\strong> 强调 表现为粗体
• <\mark> H5新增 表示被选择
• <\sup> 上标
• <\sub> 下标
• <\ins> 添加的内容
• <\del> 删除的内容
• <\ruby> / 加拼音 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