第一章 HTML标签
1.1 HTML的基本语法
- HTML 标签是由尖括号包围的关键词，例如
<html>。 - HTML 标签通常是成对出现的，例如
<html>和</html>，我们称为双标签。 - 有些特殊的标签必须是单个标签（极少情况），例如
<br/>和<hr/>，我们称为单标签。
1.2 HTML的骨架结构
<!DOCTYPE html>声明为 HTML5 文档，不区分大小写<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为 utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落
1.3 <meta> 标签始终位于< head >元素中
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务编码的设置字符编码设置
字符编码设置
<meta charset="UTF-8">
IE的设置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
显示的设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
便于搜索引擎优化的
<meta name="title" content="HTML,CSS,Javascript">
页面的描述 便于搜索引擎优化的
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
关键字的指定便于搜索引擎优化的
<meta name="keywords" content="HTML, CSS, XML" />
页面作者
<meta name="author" content="相遇是春风十里">
页面缓存的设置
<meta http-equiv="Cache-Control" content="max-age=10080">
1.4 注释标签<!-- -->
<!-- 我是一个注释 -->
1.5 标题标签<h1></h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
1.6 段落标签<p></p>
<p>我是一个段落</p>
<p>我是另一个段落</p>
我是一个段落
我是另一个段落
1.7 强制换行标签<br/>
内容1 <br/>内容2
内容1
内容2
1.8 水平线标签 <hr/>
<hr/>
1.9 加粗标签<b></b>与<strong></strong>
放大缩小标签<big></big>和<small></small>
<b>加粗内容</b> <big>放大内容</big> <small>缩小内容</small>
加粗内容 放大内容 缩小内容
1.10 倾斜标签<i></i>与<em></em>
<i>倾斜内容</i>
<em>强调倾斜</em>
倾斜内容
强调倾斜
1.11 删除线标签<s></s>与<del></del>
<s>内容删除线</s>
<del>强调内容删除线</del>
内容删除线
强调内容删除线
1.12 文本下划线标签<u></u>
<u>文本内容下划线</u>
文本内容下划线
1.13 上标和下标<sup></sup>``<sub></sub>
我是<sup>上标</sup>
我是<sub>下标</sub>
我是上标
我是下标
1.14 div
没有具体的含义，用来划分页面区域，独占一行。
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
第一个div
第二个div
第三个div
1.15 span
<span>标签用来布局，一行上可以多个<span>
<h3>这里是一段<span>老长的文字</span>了</h3>
标签用来布局，一行上可以多个
这里是一段老长的文字了
1.16 链接<a href=""></a>
<a href="https://www.runoob.com">这是一个链接</a>
1.17 图像<img src="" />
<img src="图像URL" alt="" title="" ale="" width="" height="">
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 图片不显示（加载失败）后的提示信息 |
| title | 文本 | 鼠标悬停在图片上显示的提示信息 |
| width | 像素 | 设置图片的宽度 |
| height | 像素 | 设置图片的高度 |
| border | 像素 | 设置图片的边框粗细 |
1.18 超链接
可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
1.19 列表
1.19.1 无序列表<ul>< li> </li></ul>
（<ul> </ul>中只能嵌套<li> </li>，<li>与 </li>之间相当于一个容器，可以容纳所有元素。）
<ul type="disc">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
- 列表1
- 列表2
- 列表3
- 列表4
1.19.2 有序列表<ol><li> </li> </ol>
（<ol> </ol>中只能嵌套<li> </li>，<li>与 </li>之间相当于一个容器，可以容纳所有元素。）
type=“1”(默认)
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
- 列表1
- 列表2
- 列表3
- 列表4
<ol type="1">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
- 列表1
- 列表2
- 列表3
- 列表4
1.19.3 自定义列表<dl><dt>衣服</dt><dd>男装</dd></dl>
1.
<dl></dl>里面只能包含<dt>和<dd>。
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
<dl>
<dt>衣服</dt>
<dd>男装</dd>
<dd>女装</dd>
</dl>
<dl>
<dt>鞋子</dt>
<dd>男鞋</dd>
<dd>女鞋</dd>
</dl>
-
衣服
- 男装
- 女装
-
鞋子
- 男鞋
- 女鞋
1.20 文本样式标签<font face="" size="" color="">内容</font>
<font face="" size="" color="">内容</font>
文本的字体，大小，颜色
1.21 nav标签
只是用来表示该区域是导航链接，默认并没有什么显示效果。
<nav class="menu">
<a class="active" href="index.html">首页</a>
<a href="baseInfo.html">基本信息</a>
<a href="ideal.html">理想大学</a>
<a href="photo.html">个人风采</a>
<a href="guestbook.html">留言</a>
</nav>
第二章 表格
2.1 创建表格<table></table>，行<tr></tr>，单元格<td></td>
<table> <!-- 创建表格 -->
<tr> <!-- 创建行 -->
<td>第1个单元格</td> <!-- 创建单元格 -->
<td>第2个单元格</td>
</tr>
<tr>
<td>第3个单元格</td>
<td>第4个单元格</td>
</tr>
</table>
| 第1个单元格 | 第2个单元格 |
| 第3个单元格 | 第4个单元格 |
注意：
<table>标签里只能写<tr>标签，<tr>标签里面只能放<td>，<td>则是可以放其他标签
2.2 表头单元格<th></th>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>北京</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>上海</td>
</tr>
</table>
| 姓名 | 性别 | 地址 |
|---|---|---|
| 小王 | 女 | 北京 |
| 小明 | 男 | 上海 |
2.3.1 border(外边框)
<table border="1"> 控制表格外边框大小，内边框不变
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
| 1 | 2 |
| 3 | 4 |
<table border="100"> 控制表格外边框大小，内边框不变(黑灰色的这些宽度就叫外边框，内边框是指里面数字与边框的距离)
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
| 1 | 2 |
| 3 | 4 |
2.3.2 width（宽度）
- 在表格中width="500"和width="500px"是一个效果，px是像素单位
<table width="500px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
| 1 | 2 |
| 3 | 4 |
- 宽度还可以使用百分百进行设定，以父元素的大小来进行调整宽度
<table width="50%">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
| 1 | 2 |
| 3 | 4 |
2.3.3 height（高度）
高度使用百分比的前提是父元素要先设置一个高度
<table border="1" height="500px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
| 1 | 2 |
| 3 | 4 |
2.3.4 align(水平对齐)
<table border="1" width="500px" align="right">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
| 属性值 | 描述 |
|---|---|
| left | 表格居左 |
| center | 居中 |
| right | 居右 |
2.3.5 bordercolor(边框颜色)
<table width="500px" height="200px" border="1" bordercolor="red">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
2.3.6 bgcolor(背景颜色)
<table width="500px" height="200px" border="1" bordercolor="red" bgcolor="yellow">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
2.3.7 cellspacing （单元格与单元格之间的间距）
<table width="500px" height="200px" border="1" bordercolor="red" cellspacing="10">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table> </table>
2.3.8 cellpadding（单元格与内容之间的间距）
<table width="500px" height="200px" border="1" bordercolor="red" cellspacing="0" cellpadding="20">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
2.3.9 background（背景图片）
<table width="500px" height="200px" border="1" bordercolor="red" background="123.webp">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
2.4 行（tr）的属性
2.4.1 bgcolor （背景颜色）
<tr bgcolor="red">
<td></td>
<td></td>
</tr>
2.4.2 height（高度）
<tr bgcolor="red" height="200px">
<td></td>
<td></td>
</tr>
2.4.3 align（文本水平对齐）
<tr bgcolor="red" align="left">
<td>1</td>
<td>2</td>
</tr>
left，center，right
2.4.4 valign（文本垂直对齐）
<tr bgcolor="red" valign="top">
<td>1</td>
<td>2</td>
</tr>
top，middle，bottom
2.4.5 background（背景图片）
<tr background="123.webp">
<td>1</td>
<td>2</td>
</tr>
2.5 列（td）的属性
width（宽度）
height （高度）
bgcolor（单元格颜色）
background（背景图片）
align（水平文本对齐）
valign（垂直文本对齐）
2.6 合并单元格
2.6.1 colspan（合并列)
指的是将“横向的N个单元格”合并
<table border="1" width="300px" height="300px">
<tr align="left">
<td colspan="2">A</td>
</tr>
<tr align="left">
<td>C</td>
<td>D</td>
</tr>
<tr align="left">
<td>E</td>
<td>F</td>
</tr>
</table>
2.6.2 rowspan(合并行)
指的是将“纵向的N个单元格”合并
<table border="1" width="300px" height="300px">
<tr align="center" >
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr align="center">
<td>D</td>
</tr>
<tr align="center">
<td>E</td>
<td>F</td>
</tr>
</table>
第三章 表单
表单：收集用户的填写信息，填写的信息作为请求参数与服务器端进行交互。例如：注册和登录
form表单：
- 表单是一个包含表单元素的区域。
- 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
- 表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。我们可以使用 标签来创建表单:
<form 相关属性>
...
input 元素
...
</form>
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。IE只能识别_charset属性，其他浏览器只能识别accept-charset属性 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。它可以是一个 URL地址(提交给程式)或一个电子邮件地址. |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。指明用来把表单提交给服务器时(当method值为”post”)的互联网媒体形式.这个特性的缺省值/默认值是”application/x-www-form-urlencoded” |
| method | 规定在提交表单时所用的 HTTP 方法有post和get两种（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。指定提交的结果文档显示的位置 |
3.1 input
<input/> 单标签
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 输入框 |
| placeholder | 提示信息 | |
| password | 密码框 | |
| radio | 单选框 | |
| maxlength | 输入的字符最大的个数 | |
| size | 输入框长度 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图片按钮 | |
| date | 定义 date 控件（包括年、月、日，不包括时间）。 | |
| datetime | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 | |
| datetime-local | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 | |
| file | 当定义文件域时，页面中将出现一个“选择文件”按钮和提示信息文本，用户可以通过单击按钮然后直接选择文件的方式，将文件提交给后台服务器。 | |
| image | 定义图像作为提交按钮。图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。 | |
| time | 定义用于输入时间的控件（不带时区）。 | |
| url | Url类型的< input />标记是一种用于输入URL地址的文本框，跟email属性值类似。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器;如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。 | |
3.2 text（文本输入框）
- name属性必需设置，否则在提交表单时，用户输入的数据不会被发送到服务器
3.3 placeholder（提示信息）
- name属性必需设置，否则在提交表单时，用户输入的数据不会被发送到服务器
3.4 password（密码框）
效果：
3.5 radio（单选框）
性别：<input type="radio" name="sex" value='1' checked>男<input type="radio" name="sex" value='0'>女
3.6 checkbox（复选框)
您的兴趣爱好：
<input type="checkbox" name="interest" value="1" checked>篮球
<input type="checkbox" name="interest" value="2">足球
<input type="checkbox" name="interest" value="3">跑步
<input type="checkbox" name="interest" value="4">跳舞
3.7 file（文件上传）
<input type="file">
效果：
3.8 普通按钮button
<input type="button" value="按钮">
3.9 提交按钮submit
<input type="submit" value="提交">
3.10 重置按钮reset
<input type="reset" value="重置">
3.11 图片按钮
<input type="image" src="123.webp">
3.12 button按钮
<button></button> 单纯的标签按钮
3.13 label
<label for="text1">姓名:</label>
<input type="text" id="text1"/>
| 属性 | 描述 |
|---|---|
| for | 关联表单中的 id 值，以便将它们捆绑起来。 |
id属性用于关联<label>元素
3.14 select（下拉框）
3.15 textarea（文本域）
<textarea name="" id="" cols="30" rows="10"></textarea>
扫一扫
3934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
