1.html字符格式化标签
字符格式化标签,让字符显示出不同的效果
作用 | 标签 |
---|---|
加粗 | <b> <strong> |
斜体 | <i> <em> |
下划线 | <u> <ins> |
删除线 | <del> <s> |
2.图片标签
img标签:引用图片
src属性:设置图片路径
alt属性:如果图片未能显示,则显示alt内容
width\height属性:用来设置图片的宽高,宽高一般设置一个就行,另一个会等比例缩放
3.链接标签
a标签 <a href=“” target=“” ></a>
href:指向跳转的页面地址
target:指定新链接的打开方式,有两个值:
- _blank 在新窗口打开;
- _self 在当前窗口打开(默认);
超链接:从一个页面跳转到另一个页面
锚链接:从一页面的一个位置跳转到另一个位置
制作锚链接:
- 使用a标签设置锚链接 <a href=“#info”></a>
- 在跳转到的标签上设置锚点 <p id=“info”></p>
另一种:
- <a href=“#info”></a>
- <a name=“#info”></a>
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”>D</td>
<td>E</td>
<td>F</td>
(D合并了E F)
<td colspan=“3”>D</td>
(删掉多余的两行)
rowspan行合并
<tr>
<td>A</td>
<td rowspan=“2”>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
(B合并了D)
<tr>
<td>A</td>
<td rowspan=“2”>B</td>
</tr>
<tr>
<td>C</td>
</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>有序1</li>
<li>有序2</li>
</ol>
无序列表ul和li
<ul>
<li>无序1</li>
<li>无序2</li>
</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属性值
属性 | 作用 |
---|---|
邮箱 | |
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"/>