html常用标签

1.html字符格式化标签

字符格式化标签，让字符显示出不同的效果

作用	标签
加粗
斜体
下划线
删除线

2.图片标签

img标签：引用图片
src属性：设置图片路径
alt属性：如果图片未能显示，则显示alt内容
width\height属性：用来设置图片的宽高，宽高一般设置一个就行，另一个会等比例缩放

3.链接标签

a标签
href:指向跳转的页面地址
target:指定新链接的打开方式，有两个值：

• _blank 在新窗口打开；
• _self 在当前窗口打开（默认）；

超链接：从一个页面跳转到另一个页面
锚链接：从一页面的一个位置跳转到另一个位置

制作锚链接：

1. 使用a标签设置锚链接
2. 在跳转到的标签上设置锚点

 另一种：

4.表格核心标签

• table制作表格外标签
• tr标签制作表格的行
• 嵌套td标签制作列

表格的属性

属性	意义
border	表格边框
width/height	表格宽高
cellspacing	单元格间隙
cellpadding	单元格与内容间隙
align	表格的位置,值为left/center/right
bgcolor	表格的背景颜色

valign=“middle”, 垂直居中

tr中一般也会使用bgcolor / height / align属性
td中一般也会使用width / height / bgcolor / align属性

colspan列合并

<td colspan=“3”>Dtd>
<td>Etd>
<td>Ftd>
(D合并了E F)

<td colspan=“3”>Dtd>
(删掉多余的两行)

rowspan行合并

<tr>
<td>Atd>
<td rowspan=“2”>Btd>
tr>
<tr>
<td>Ctd>
<td>Dtd>
tr>
(B合并了D)

<tr>
<td>Atd>
<td rowspan=“2”>Btd>
tr>
<tr>
<td>Ctd>
tr>
（删掉后面一行）

表格的其他标签

• caption，表格标题标签
• thead，表格头部标签
• th，表头标签
• tbody，表格主题标签
• tfoot，表格脚部标签

	<table>
        <caption>表格标题caption>
       <thead><tr><th>表头th>tr>thead>
       <tbody><tr><td>主体内容td>tr>tbody>
       <tfoot><tr><td>尾部td>tr>tfoot>
    table>

5.有序列表和无序列表

有序列表ol和li

	<ol>
        <li>有序1li>
        <li>有序2li>
    ol>

无序列表ul和li

        <ul>
            <li>无序1li>
            <li>无序2li>
        ul>

自定义列表dl dt dd

		<dl>
            <dt>水果dt>
                <dd>香蕉dd>
                <dd>苹果dd>
            <dt>蔬菜dt>
                <dd>白菜dd>
                <dd>萝卜dd>
       dl>

6.表单

• form标签：表单的外层
  method属性：指定表单提交方式
  method=get;(默认)；method=post;
  action属性：指定表单提交的位置

表单域的三种标签： input、select-option、textarea

文本框标签：input

type属性：

type="text"纯文本；

<input type="text" name="account" value="admin"/>

type="password"密码；

<input type="password" name="password" value="123"/>

type="radio"单选框；

性别<input type="radio" name="gender" value="female"/>女
   <input type="radio" name="gender" value="male"/>男

type="checkbox"复选框；

爱好：<input type="checkbox" name="hobby[]" value="eat"/>吃
     <input type="checkbox" name="hobby[]" value="drink"/>喝
     <input type="checkbox" name="hobby[]" value="play"/>玩

• name属性用来将单选框和多选款限定为一组；
• 复选框的name必须是数组形式，使用[]；

type="file"文件；

<input type="file" multiple/>

type="button"普通按钮;

<input type="button"/>

type="reset"重置表单按钮;

<input type="reset"/>

type="submit"提交按钮;

<input type="submit" value="名称"/>

type="hidden隐藏域，不在页面显示，但会提交数据

 <input type="hidden" value="102" name="rid"/>

input标签的常用属性

属性	作用
name	为表单域起名
value	表单域的值
placeholder	设置输入框的默认显示内容
maxlength	文本框最大输入数量
readonly	只读
disable	数据不会提交出去
checked	是否默认选中，应用于单选框和复选框

value和placeholder的区别：

• value字体颜色深，光标定位到文本框时，光标在最后，需要先删除原来的值；
• placeholder字体颜色浅，光标在最前面，可以直接输入内容，value优先级大于placeholder

下拉菜单

由select和option两个标签嵌套组成

	 地址<select name="addr">
            <option value="bj">北京option>
            <option value="sh">上海option>
            <option value="sz">深圳option>
        select>

多行文本框

<textarea name="sign" col="20" row="10">textarea>

row和col可以设置行数和列数

	<form action="#" method="get">
        账号：<input type="text" name="account" value="admin" placeholder="请输入用户名" maxlength="10"disabled/><br/>
        密码：<input type="password" name="password" value="123" placeholder="请输入密码" readonly disabled/><br/>
        性别：<input type="radio" name="gender" value="female">女
        <input type="radio" name="gender" value="male">男<br/>
        爱好：<input type="checkbox" name="hobby[]" value="eat">吃
        <input type="checkbox" name="hobby[]" value="drink" checked>喝
        <input type="checkbox" name="hobby[]" value="play">玩<br/>
        <input type="file" multiple><br/>
        地址<select name="addr">
            <option value="bj">北京option>
            <option value="sh">上海option>
            <option value="sz">深圳option>
        select>
        <textarea name="sign">textarea>
        <input type="submit" value="提交按钮" disabled/>
        <input type="hidden" value="102" name="rid"/>
    form>

H5新增表单属性

新增属性：

属性	作用	值
required	必填	-
pattern	正则表达式	pattern=“\w{6,12}”

新增type属性值

属性	作用
email	邮箱
number	数值
url	url地址
search	搜索域
range	滑动条
color	颜色选择器

        <input type="email" required pattern="\w{2,}@\w(2,).(com|net)" />
        <input type="number" value="3" min="0" max="100" step="5"/>
        <input type="url"/>
        <input type="search"/>
        <input type="range" value="10" min="0" max="100" step="20"/>
        <input type="color" />

日期选择器：

属性	作用	备注
type=“date”	年-月日
type=“time”	时：分	24小时制
type=“datetime-local”	年-月日 时：分
type=“month”	年-月	只能选择月
type=“week”	年-周

		<input type="date"/>
        <input type="time"/>
        <input type="datetime-local"/>
        <input type="month"/>
        <input type="week"/>