目录
HTML属性
成对标签:<标签名字 属性1 属性2 属性3 ……>内容</标签名字>
单标签:<标签名字 属性1 属性2 属性3 ……>内容
基本结构
<!DOCTYPE>
<html lang="en"> <!--lang表示页面的语言 英文:en 中文:zh-->
<head>
<meta charset="UTF-8"> <!-网页编码方式为utf-8 -->
<title>标题</title>
</head>
<body>
</body>
</html>
头部内的标签
<base> 定义了页面链接标签的默认链接地址。
<link> 定义了一个文档和外部资源之间的关系。
<meta> 定义了HTML文档中的元数据。
<script> 定义了客户端的脚本文件。
<style> 定义了HTML文档的样式文件。
水平线
<hr/>
align 对齐方式(水平线)
size粗细(水平线)
width 宽度(水平线)
color 颜色(水平线)
标题标签
<h1 align=””>这是一级标题</h1> <!-align可为:left right center -->
<h6>这是六级标题</h6>
文本标签
水平线:<hr> 换行:<br>
<b>粗体文本</b> <strong>粗体(语义化强调)</strong>
<i>斜体文本</i> <em>斜体(语义化强调)</em>
<sub>下标</sub> <sup>上标</sup>
<del>加删除线</del> <ins>加下划线</ins>
<abbr>首字母缩写语</abbr>
<blockquote>大面积的文本引用</blockquote> <q>小面积的文本引用</q>
<address>用于修饰文字信息</address> <cite>用于修饰文字信息</cite>
<code>计算机代码</code>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<bdo>文字方向</bdo>
段落标签
<p>
这是一个段落</p>
链接标签
<a href = "链接页面地址" target=”链接打开的方式”>链接对象</a>
. .
属性 | 值 |
---|---|
href | URL |
target | _blank(在新的窗口打开链接) |
_parent(在当前框架的上一层打开链接) | |
_self(在当前窗口打开链接,默认方式) | |
_top(在顶层框架中打开链接) | |
framename(用于AJAX) |
图像标签
<img src="图像的URL" >
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图片的地址 |
alt | 文本 | 图片显示不出来时的提示文字 |
title | 文本 | 鼠标移动到图片上的提示文字 |
width | 像素(XHTML不支持页面百分比) | 设置图片的宽度 |
height | 像素(XHTML不支持页面百分比) | 设置图片的高度 |
border | 数字 | 设置图片边框的宽度 |
vspace | 像素 | 设置图片顶部和底部的空白(垂直边距) |
hspace | 像素 | 设置图片左侧和右侧的空白(水平边距) |
align | left | 将图片对齐到左边 |
right | 将图片对齐到右边 | |
top | 将图片的顶端和文本的第一行文字对齐,其他文字位于图片下方 | |
middle | 将图片的水平中线和文本的第一行文字对齐,其他文字位于图片下方 | |
bottom | 将图片的底部和文本的第一行文字对齐,其他文字位于图片的下方 |
无序列表
<ul>
<li>列表项</li>
</ul>
属性取值 | 显示效果 |
---|---|
disc(默认值) | 实心圆(●) |
circle | 空心圆(○) |
square | 实心正方形(■) |
有序列表
<ol>
<li>列表项</li>
</ol>
有序列表type属性取值表:
属性取值 | 显示效果 |
---|---|
1(默认值) | 数字(1、2、3……) |
a | 小写英文字母(a、b、c……) |
A | 大写英文字母(A、B、C……) |
i | 小写罗马数字(i、ii、iii……) |
I | 大写罗马数字(I、II、III……) |
分组标签(多数情况下需要配合CSS样式):
<div>具体内容</div>
/*占用面积为一行
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。
*/
<span>具体内容</span>
表格标签
<table> <tr> <td>三个标签缺一不可
<table>
<caption>表格的标题</capption>
<tr>
<th>表头一</th>
<th>表头二</th> <!-表头是th,文字会自动加粗 -->
<th>表头三</th>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
<td>单元格三</td>
</tr>
</table>
< table >内属性
边框(没有border说明无边框):border="1px"
单元格内容与单元格边框之间的空白间距(默认为1px):cellpadding="px"
单元格与单元格边框之间的空白间距(默认为2px):cellspacing="px"
< td >内属性
属性名 | 含义 | 属性值 |
---|---|---|
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置单元格内容的水平对齐方式 | left(左对齐)、enter(居中对齐)、right(右对齐) |
valign | 设置单元格内容的垂直对齐方式 | baseline(基线对齐)、top(上对齐)、middle(居中对齐)、bottom(下对齐) |
表格语义化
<thead> <tbody> <tfoot>
作用:使网页内容更好地被搜索引擎理解
<thead></thead>标签:定义表格的头部,位于<table></table>标签中,一般包含网页的logo和导航等头部信息
<tfoot></tfoot>标签:定义表格的页脚,位于<table></table>标签中
<thead></thea>之后一般包含网页底部的企业信息等
<tbody></tbody>标签:用于定义表格的主体,位于<table></table>标签中。<tfoot></tfoot>标签之后,一般包含网页中除头部和底部以外的其他内容
合并行与列:
合并行 <td>标签的rowspan=” ”
合并列 <td>标签的clospan=” ”
表单
表单元素
表单元素 | 含义 |
---|---|
< input> | 表单输入框(可定义多种表单项) |
< textarea> | 定义多行文本框 |
< select> | 定义一个下拉列表(必须包含列表项) |
< label> | 定义表单辅助项 |
表单域:用来容纳表单控件和提示信息
< form>
<form>
标签中的所有内容都会被提交给服务器
< form>标签属性:
action:指定接收并处理表达数据的服务器的URL地址
method:定义表单数据的提交方式,有get和post,get保密性差,提交的数据会显示在浏览器的地址栏中,且有数据量的限制;post的保密性好,而且无数据量的限制
enctype:定义表单数据的提交内容形式,常用的有application/x-www-form-urlencoded(默认) 和 multipart/form-data两种方式。提交内容可以是网页中的文本,也可以是图片或视频等非文本的内容。
target:定义提交地址的打开方式,跟< a>标签 中的target属性一样
< input>标签的type属性:
表单元素 | 含义 |
---|---|
text | 单行文本框 |
password | 密码文本框,框中的字符会被用星号或实心圆加密显示 |
radio | 单选框 |
checkbox | 复选框 |
button | 按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
hidden | 隐藏域 |
image | 图像形式的按钮 |
file | 文件上传按钮 |
radio和checkbox中,name属性用来实现单选或者多选属性
button,submit,reset中,value用来给定按钮上文本的内容
<form> <!--单击button会弹出“hello”-->
<input type=”button” value=”普通按钮” onClick=”alert(‘hello’)”>
</form>
<form action=”data.php”> <!--单击提交按钮,会把value=“男”提交给data.php这个后台服务器-->
<input type=”hidden” name=”gender” value=”男”>
<input type=”submit” value=”提交按钮”>
</form>
Image
用来设置图像格式的按钮,src属性引入图像地址,目的是submit的默认样式
file
用来设置文件上传的按钮,标签的method属性必须设置成post,enctype属性必须设置成multipart/form-data
< input>标签的其他属性:
属性 | 属性值 | 含义 |
---|---|---|
name | 自定义 | 元素的名称 |
value | 自定义 | 元素的值 |
maxlength | 正整数 | 元素允许输入的最多字符数 |
disabled | disabled | 第一次加载页面时禁用该元素(显示为灰色) |
readonly | readonly | 元素内容为只读(不能修改编辑) |
checked | checked | 定义选择元素默认被选中的项 |
disabled、readonly属性
disabled属性规定输入内容是禁用的,被禁用的元素是不可用和不可单击的。readonly属性规定输入内容为只读(不能修改,但是能获取当前只读的内容)。
checked属性与<input type="checkbox">
或<input type="radio">
配合使用。
< textarea>标签
多行文本框
< select>标签
<select>
标签配合<option>
标签使用
< select>标签属性
multiple属性支持“Ctrl+鼠标左键”进行多选操作
selected属性是设置在<option>
标签上的
<select>
标签中使用<optgroup>
标签进行分组项操作,把相关的选项组合在一起。<optgroup>
标签的label属性来设置分组项的标题。
< label>标签
用来辅助表单元素,可以更好的提高用户体验,当鼠标单击到文字上也能选中单选框
性别:<input type=”radio” name =“gender” id=”man”>
<label for=”man”>男</label>
<input type=”radio” name=”gender” id=”woman”>
<label for=”woman”>女</label>