html常用标签

html中常用标签


1、文字标签和注释标签
文字标签：修改文字的样式
<font></font>
属性：
size：文字的大小 取值范围 1-7（超出7，默认还是7）
color：文字颜色
两种表示方式
英文单词 十六进制数
注释标签
<!-- -->


2、标题标签、水平线标签和特殊字符
标题标签
<h1></h1>
<h2></h2>
……
<h6><h6> 
从h1到h6，大小一次变小 同时会自动换行 
水平线标签
<hr/>
属性
size 水平线的粗细 范围1-7
color 颜色
特殊字符
< &lt
> &gt
空格 &nbsp 
双引号 &quot
……
（查表）
3、列表标签
<dl> </dl>:表示列表的范围
在dl里： <dt></dt>: 上层内容
<dd></dd>：下层内容
代码：
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd> 
</dl>
有序列表 
<ol type="(1默认 a i)">
<li></li>
<li></li>
<li></li>
</ol>
无序列表 特殊符号
<ul></ul>
属性：type :空心圆circle 实心圆 disc 实心方块 square 默认实心圆disc
在ul下 <li><li>
4、图像标签(重点)
<img src="图片的路径"/ >
属性： src 图片的路径
width 图片的宽度
heigth 图片的高度
alt 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容，有些浏览器不显示
5、路径介绍
一、绝对路径
不解释
二、相对路径
一个文件相对于另外一个文件的位置 
三种:
1、html文件和图片在一个路径下，可以直接写文件名称
2、在html文件中，使用的文件夹下的图片（下层）
3、上层  ../表示上层目录
6、  案例一：列表标签（商品列表）


7、超链接列表
链接资源
<a href="www.baidu.com">显示资源</a>
属性 target 
_blank 新窗口打开
_ self 当前页打开（默认）
当超链接不需要到任何的地址 在href里+ ‘#’

定位资源
定义一个位置
<a name="top">顶部</a>
回到这个位置
<a href="#top">回到顶部</a>
引入一个标签 pre 原样输出

写的什么样子 输入就是什么样子  
8、表格标签
对数据进行格式化，使数据更加清晰
<table></table> 表示表格的范围
属性：
border 表格线粗细
bordercolor 表格线的颜色
cellspacing 单元格之间的距离
width 宽度
height 高度
在table里面 <tr></tr> 表示行
属性 align: left center right 设置行显示方式（居左 居中 居右）
在 tr里面 <td></td>表示每行的单元格
属性 align: left center right 设置单元格显示方式（居左 居中 居右）

<th></th>也可以表示单元格 可以实现居中和加粗

<caption></caption>表格标题   你 

合并单元格
跨列 colspan
跨行 rowspan
9、表单标签(很重要的标签)
<from></from>: 定义一个表单的范围
属性：
action ：提交到地址，默认提交到当前页面
method ：表单提交方式 get post
面试题目：get 和 post区别
1、get请求地址栏会携带提交的数据，post不会携带
2、get请求安全级别低 post较高
3、get请求数据有大小限制，post没有
enctype：一般请求下不需要这个属性，做文件上传时需要设置这个属性
输入项：可以输入内容或者选择内容的部分
大部分的输入项使用 <input type="输入项的类型">
输入项里需要有一个name属性
普通文本输入项 <input type="text"/>
密码输入项 <input type="password"/>

单选输入项 <input type="radio"/>
要有属性name
必须要有一个value值
实现默认选中的属性
checked="checked"

复选输入项 <input type="checkedbox"/>
要有name
name 的属性必须要相同
必须要有一个value
实现默认选中的属性
checked="checked"

文件输入项<input type="file/">

下拉输入项（不在input标签里面）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
实现默认选中的属性
selected="selected"
文本域
<textarea cils="10" rows="10"></textarea>

隐藏项（不会显示在页面上，但是存在于html代码里面）
<input type="hidden"/>

提交按钮
<input type="submit"/>
<input type="submit" value="注册"/>
使用图片提交
<input type="image" src="图片路径"/>

重置按钮
<input type="reset"/>
普通按钮
<input type="button"/>
10、其他标签
b：<b>加粗</b>
s：<s>删除线</s>
u：<u>下划线</u>
i：<i>倾斜</i>
pre：<pre>原样输出<pre>
sub：_下标
sup： ^上标
div ：<div>自动换行</div>
span: <span></span>
11、html的头标签的使用
html两部分组成 head和body
在head里面的标签就是头标签

title标签：表示在标签上显示的内容

<meta/>标签：设置一些页面的相关内容
<meta http-equiv="refsg" content="3;url="www.baidu.com"/>

base 标签：设置超链接的基本设置
可以统一超链接的打开方式
<base target="_blank"/>在新页面打开超链接

link标签: 引入css文件