HTML标签

目录

一、常用标签

二、选择器

三、文本属性

---

一、常用标签

1、文本标题（h1-h6）
<h1>一级标题</h1>   ······    <h6>六级标题</h6>
有自己的文本大小，并且独占一行，有默认行距

2、段落文本（p）
<p>段落文本内容</p>
段落与段落之间有段间距

3、换行（br）
<br>或<br/>
强制换行

4、水平线（hr）
<hr>或<hr/>
属性：
color=====颜色（red,green·····）
width=====宽度（···px）
align=====对齐方式（left,center,right）
noshade===取消阴影（可以直接写）

5、字体加粗（推荐strong）
<strong>强调的内容</strong>
突出的文本
<b>加粗内容</b>
只是显示加粗

6、倾斜文本（推荐em）
<em>强调文本</em>
倾斜+强调
<i>倾斜文本</i>

7、带删除线的文本（推荐del）
<del>文本</del>
<s>文本</s>

8、<u>文本</u>  下划线
_文本  下标
^文本  上标

9、特殊符号
"<"===="&lt;"（左尖角号）
">"===="&gt;"（右尖角号）
" "===="&nbsp;"该空格占据宽度受【字体】影响
    "&emsp;"占据的宽度正好是1个中文宽度，不受字体影响
"©"===="&copy;"（版权）
"™"===="&trade;"（商标）

10、div标签
<div>文本</div>
用来划分页面的区域，独占一行，无具体含义

11、span标签
<span>文本</span>
主要用于文本独立修饰的时候，内容有多宽就占用多宽的空间距离，无具体含义

12、列表
1)无序列表
<ul type="">
       <li>文本</li>
      <li>文本</li>
</ul>
属性：
type:disc(实心圆)，circle(空心圆)，square(方块)，none(不显示)

2）有序列表
<ol type="" start="">
     <li>文本</li>
     <li>文本</li>
</ol>
属性：
type:1,a,A,i,I
start:只能是一个数字，表示从第几个开始

3）自定义列表
<dl>
     <dt>可以是文字或者图片</dt>
     <dd>相关文字</dd>
</dl>

13、图片标签
<img src="" title="" alt="" width="" height="">
属性：
src：图片路径（../返回上一级）
title:鼠标悬停图片上去的提示信息
alt:图片加载失败的提示信息
width:宽度（···px）
heigh:高度（···px）只有一个的话保持纵横比

14、超链接标签
<a href="" title="" target="">文本或图片</a>
属性：
href:跳转路径
title:鼠标悬停上去的提示信息
target:_self(不新建标签页，默认值)，_blank(新窗口打开)   规定在何处打开文档

15、table表格
<table border="" width="" height="" align="">
    <tr height="">
        <td>文本1</td>
        <td>文本2</td>
    </tr>
    <tr>
        <td>文本3</td>
        <td>文本4</td>
    </tr>
</table>
tr表示行，td表示单元格

table属性:
border:外边框线宽度，只能为数字
width:表格宽度（···px,···%（相对于父元素的百分比））
height:表格高度（···px,···%（相对于父元素的百分比））
align:水平对齐方式（left,center,right）
bordercolor:外边框颜色
bgcolor:背景颜色
cellspacing:单元格与单元格之间的间距 (数字)
cellpadding:单元格与内容之间的空隙 (数字)

tr属性：
height:行高
bgcolor:行的背景颜色
align:整行文本水平对齐（left,center,right）
valign:整行文本垂直对齐（top,middle,bottom）

单元格td属性：
width:宽度（影响整列宽度）
height:高度（影响整行高度）
bgcolor:背景颜色
align:文本水平对齐（left,center,right）
valign:文本垂直对齐（top,middle,bottom）
colspan:横向占几格
rowspan:纵向占几格

16、表单标签
<form action="" method="">
    用户信息：<input type="text" placeholder="请输入用户名" name="">
    <br>
    密码：<input type="password"  placeholder="请输入密码" name="">
    <br>
    <input type="submit" value="登录">或<button type="submit">登录</button>   
</form>

form属性:
action:提交地址
method:post(看不到提交信息)，get(看的到)

input属性：
type:输入的文本属性（text:文本，password:密码，submit:提交按钮，reset:清空按钮，
button:校验输入内容是否符合标准，placeholder:提示框内容）
value:自定义内容的按钮
name:向后台提供信息，可以自己写

17、CSS—外部样式表
1）<link rel="stylesheet" type="text/css" href="路径" />
2）<style>
    @import url(路径);
</style>

18、CSS—行内样式表
<h1 style="color:red; width:200px;">11111</h1>

二、选择器

1、class选择器
.class名{属性：属性值;}
如：<div class="a"></div>
.a{width:200px; background:green;}

2、id选择器
#id名{属性：属性值;}
如：<div id="box"></div>
#box{width:300px; height:300px;}
起名要起英文名，不能用关键字：（所有标签和属性都是关键字）
id只能有一个名字，一个名字也只能用一个id（唯一性）

3、通配符/通配选择器
*{属性：属性值;}
如：*{margin:0; padding:0;}表示清除所有元素的默认边距和默认值
“*”指所有元素

4、群组选择器
选择符1， 选择符2， 选择符3.....{属性：属性值;}
如：#top1, div, h1{width:960px;}
margin:0 auto;实现盒子的水平居中

5、包含/后代选择器
选择符1 选择符2{属性：属性值;}
如：结构：<ul class="list">
    <li></li>
    <li></li>
</ul>
.list li{background:red;}

6、伪类选择器
a:link{属性：属性值;}超链接的初始状态；
a:visited{属性：属性值;}超链接被访问后的状态；
a:hover{属性：属性值;}鼠标悬停，即鼠标滑过超链接时的状态；
a:active{属性：属性值;}鼠标按下时超链接的状态；
顺序从上往下写

三、文本属性

 1、字体大小
font-size
单位是px，浏览器默认是16px，设计图常用字号是12px

2、字体
font-family
多个字体中间用逗号链接，先解析第1个字体，如果没有解析第2个字体，以此类推
当字体是中文字体、英文字体中有空格时，需加双引号

3、颜色
color
color:red；color:#ff0；color:rgb(255,0,0);

4、加粗
font-weight
bolder(更粗的)/bold(加粗)/normal(常规)
100-500不加粗     600-900加粗

5、倾斜
font-style
italic(倾斜)/oblique(倾斜，强调)/normal(正常)

6、文本水平对齐
text-align
left(水平靠左)   right(水平靠右)   center(水平居中)
justify(水平两端对齐，但只对多行起作用)

7、行高
line-height
line-height=height，可实现单行文本垂直居中

8、首行缩进
text-indent
可以取负值，属性只对第一行起作用

9、字间距和词间距
letter-spacing
控制文字和文字之间的间距
word-spacing
在英文中控制单词和单词之间的间距

10、文本修饰
text-decoration
none(没有)   underline(下划线)   overline(上划线)   line-through(删除线)

11、文字简写
font
font是font-style font-weight font-size / line-height font-family的简写
font:italic 800 30px/80px "宋体"；顺序不能改变，必须同时指定font-size和font-family
属性时才起作用

12、检索大小写
text-transform
capitalize(首字母大写)   lowercase(全为小写)   uppercase(全为大写)   none(常规)