HTML基础汇总笔记
目录
HEML文档基本结构
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="UTF-8">
<!-- <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Free Web tutorials on HTML and CSS">
<meta name="author" content="Hege Refsnes">
<meta http-equiv="refresh" content="30"> -->
</head>
<body>
</body>
</html>
一、基本标签
1. <body>
<body bgcolor="" background="" alink="" link="" text"" vlink="" topmargin="" leftmargin="">
- bgcolor 设置背景色
- background 设置背景图片
- text 规定文档中所有文本的颜色
- link 规定文档中所有链接的颜色
- alink 规定文档中所有活动链接(可以理解是用户最后一次点击的链接)的颜色
- vlink 规定文档中被访问过的链接颜色
2. <h><p><img><center>等常用标签
<h# align="left|center|right"></h#>
<center>居中标签</center>
<p>段落标签</p>
<img src="图片地址">
<a href="url" tilte="指向链接显示的文字" target="_parent|_blank|_self|_top" >
<!--url:
填“#书签名”，可跳转到页面相应位置进行阅读
建立方式:<a name="书签名">链接内容</a>
target为窗口打卡方式：
_parent：在上一级窗口打开，页面嵌套框架时使用
_blank：新窗口
_self：默认，自身
_top：忽略框架，在浏览器的整个窗口打开 -->
3. <hr> 水平分隔线
<hr width="" size="" color="" align="left|center|right" noshade>
4. <font><b><i><u>等文字标签
<font face="楷体" size="2" color="red">文字内容</font>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<del>删除线</del>
<sup>上标</sup>
<sub>下标</sub>
<pre>预格式化内容，显示格式不变<pre>
<br><!-- <br>换行 -->
二、列表标签
- 无序列表<ul>
<ul type="disc|circle|square">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<!-- type: disc 实心圆点; circle 空心圆点; square 实心方块 -->
- 有序列表<ol>
<ol type="1|a|A|i|I" start="3">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<!-- type: 1 阿拉伯数字; a 小写字母; A 大写字母; i 小写罗马数字 ; I 大写罗马数字 -->
<!-- start: 通过阿拉伯数字设置起始编号，如3，则为 从3、c、C、ⅲ、Ⅲ开始。 -->
- 列表项<li>
<ol type="A" start="1">
<li>列表项1</li>
<li type="1" value="5">列表项2</li>
<li>列表项3</li>
</ol>
<!-- <li> 标签的type，指定单个列表项的编号样式 -->
<!-- <li> 标签的value,指定单个列表项的编号值，并影响后续编号 -->
- 定义列表<dl>
<dl>
<dt>定义列表项A</dt>
<dd>定义列表项1</dd>
<dd>定义列表项2</dd>
<dt>定义列表项B</dt>
<dd>定义列表项3</dd>
</dl>
<!-- <dt>为上层项目标记
<dd>为下层项目标记 -->
三、表格标签
- 表格基本结构
<table border="1">
<caption>表格标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td colspan="3"><th>标签中文字默认居中，加粗</td>
</tr>
</table>
2.表格<table>
<table border="" with="" height="" align="left|center|right"
frame="设表格外边框" rules="设内部边框"
cellspacing="表格单元格间距(各单元格间距离)"
cellpadding="表格单元格边距(内容与单元格边框距离)"
bgcolor="背景色" background="背景图"
bordercolor="边框颜色" bordercolorlight="设置上边框颜色" bordercolordark="设置下边框颜色">
- frame属性表
| 属性 | 描述 |
|---|---|
| above | 显示上边框 |
| below | 显示下边框 |
| hsides | 显示上、下边框 |
| lhs | 显示左边框 |
| rhs | 显示右边框 |
| vsides | 显示左、右边框 |
| border | 显示上下左右边框 |
| void | 不显示边框 |
- rules属性表
| 属性 | 描述 |
|---|---|
| all | 显示所有内部边框 |
| none | 不显示内部边框 |
| cols | 仅显示列边框 |
| rows | 仅显示行边框 |
| groups | 显示介于行列间的边框 |
- 表格行<tr>
<tr align="left(默认)|center|right" valign="top|middle(默认)|bottom" bgcolor="行背景色" bordercolor="边框颜色" ></tr>
- 单元格<td>
<td width="" height="" align="水平对齐" valign="垂直对齐"
rowspan="单元格跨行数" colspan="单元格跨列数"
bgcolor="" background="" bordercolor=""></td>
四、表单
1.表单基本结构
<form name="表单名称" action="url" method="get">
<input name="" type="" size="" value="" maxlength="" check="">
</form>
- <input>标签
<!-- 隐藏框 -->
<input name="hidden" type="hidden" value="提交到服务器的值"><br>
<!-- 单行文本输入框 -->
<input name="text" type="text" readonly maxlength="最大输入字符数" size="最大可显示字符数" value="" ><br>
<input name="password" type="password" maxlength="最大输入字符数" size="最大可显示字符数"W><br>
<!-- 多行文本输入框 -->
<textarea name="textarea" rows="行数" cols="列数" wrap="换行相关：virtual|physical|off"></textarea><br>
<!-- 单选框 -->
<input name="radio" type="radio" value="提交到服务器的值" checked>选项<br>
<!-- 复选框 -->
<input name="checkbox" type="checkbox" value="提交到服务器的值" checked> 选项<br>
<!-- 下拉列表框 -->
<select name="select" size="设置显示在列表中的选项数目，默认1" multiple(设置可多选，按Ctrl选择)>
<option value="提交到服务器的值1" selected>选项1
<option value="提交到服务器的值2">选项2
</select><br>
<!-- 文件选择输入框,使用该框需要改成POST请求 -->
<input name="file" type="file"><br>
<!-- 图像按钮 -->
<input name="image" type="image" src="url"><br>
<!-- 提交按钮和重置按钮 -->
<input name="btn_submit" type="submit" value="提交按钮"><br>
<input name="btn_reset" type="reset" value="重置按钮"><br>