目录
一.HTML介绍
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
注意：
HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的
1.HTML文档结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html>声明为HTML5文档。
- <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
- <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
- <title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）
- <body>、</body>之间的文本是可见的网页主体内容。
2.HTML标签格式，严格封闭
- HTML标签是由尖括号包围的关键字，如<html>, <div>等
- HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
- 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
- 标签里面可以有若干属性，也可以不带属性。
二.HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
三.HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> **和** </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTMl标签要封闭,全封闭,自封闭.
HTML文件不识别多个空格或多个换行符,都识别成一个空格.
注释:
<!-- 注释内容 -->
1.基本的 HTML 标签 - 四个实例
1.1 HTML标题:
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
实例:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>1.2 HTML段落:
HTML 段落是通过 <p> 标签进行定义的。
实例:
<p>This is a paragraph</p>
<p>This is another paragraph</p>1.3 HTMl标签: 内联标签
HTML 链接是通过 <a> 标签进行定义的超链接标签。
实例:
注释：a标签 没有写href属性,只显示普通文本.
有属性没有值:有href 但无地址有特殊效果,文字有颜色下划线,点击会刷新页面.
有属性有值:在 href 属性中指定链接的地址,直接跳转到href属性指定页网址.
target属性: 1.target="_black"在新的标签页打开
2.target="_self" 默认在本标签页跳转打开
1.4 HTML图像:内联标签
HTML 图像是通过 标签进行定义的。
实例:
注释：图像的名称和尺寸是以属性的形式提供的。
scr属性='图片的路径'
alt属性='图片加载失败的提示信息'
title属性='鼠标悬浮提示信息'
2.基本的body标签
<h1></h1>,<h2></h2>,<h3></h3> # 标题标签 h1-h6,h1最大
<b></b> # 字体加粗
<i></i> # 斜体
<u></u> # 下划线
<a></a> # 删除
<br> # 换行
<hr> # 单独一条水平线3.特殊符号
最常用的:
 ； # 空格
>； # 大于号
<； # 小于号
...4.标签分类
- 块级标签(行外标签|块级元素): 独占一行,可以包含内联标签和块级标签.
div标签: 用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其富裕不同的表现.
# 块级标签：div， p, h1-h6, hr, form- 内联标签(行内标签|内联元素): 不独占一行,只能包括其他的内联标签.
span标签: 用来定义内联元素,并无实际的意义. 主要通过CSS样式为其富裕不同的表现.
# 内联标签: b, i, u, s, a, img, select, input, span, textarea
p标签,p标签内部不能包含块级标签和p标签5.列表标签
5.1 无序列表
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
5.2 有序列表
type属性： start是从数字几开始
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
5.3 标题列表（就像大纲一样，有一个层级效果）
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
# 无序列表
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
# 列表标签中 type属性控制显示样式; satrt属性控制开始位置
# 有序列表
<ol type="I" start="2">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题3</dt>
</dl>
</body>
</html>6. table标签
table 是html中的表格，由tr、td、th元素组成。
tr 元素定义表格行，th元素定义表头，td元素定义表格单元
常用属性:
border: 表格边框
cellpadding: 内边距 (内边框和内容的距离)
cellspacing: 外边距 (内外边框的距离)
width: 像素 百分比. (最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列 (即合并单元格)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
# border: 边框属性
#cellspacing: 单元格间距(表格间距)，指单元格之间的间隙
#cellpadding：单元格边距(表格填充补白)， 单元格内文字和边框的间距
<table border="1" cellspacing="10" cellpadding="20">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tr>
<td colspan="2">张三</td>
<!-- <td>19</td>-->
<td rowspan="3">rap</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<!-- <td>篮球</td>-->
</tr>
<tr>
<td>王五</td>
<td>22</td>
<!-- <td>都喜欢</td>-->
</tr>
</table>
</body>
</html>在html文件<head>标签中添加样式:
<style>
table{/*为页面中所有的table标签添加样式*/
width: 900px;/*设置table宽度*/
margin: auto;/*让表格居中显示*/
border: black 1px solid;/*添加边框*/
border-spacing: 0px;去掉table/*标签及其子标签边框之间的白色空隙*/
border-collapse: collapse;/*去掉重合线*/
}
th{/*为页面中所有的th标签添加样式*/
border: black 1px solid;/*添加边框*/
}
td{/*为页面中所有的td标签添加样式*/
border: black 1px solid;/*添加边框*/
}
</style>7.input标签
type属性:
总结:
input输入框: 要想提交给后台,那么就必须写name属性.
input选择框: 必须写name属性和value属性.
input选择框,name值相同的算是一组选择框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!-- 用户名(普通文本输入框):<input type="text" name="username" readonly>-->
<!-- username: 用户输入的内容 --- get('username') = 用户输入的内容 -->
<!-- readonly: text和password设置只读 -->
用户名(普通文本输入框):<input type="text" name="username" disabled>
<!-- disabled: 标签不可用,input所有都适用 -->
<input type="hidden">
</div>
<div>
密码(密文输入框):<input type="password" name="pword">
</div>
<div>
性别(单选):
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</div>
<div>
爱好(多选框):
<input type="checkbox" name="hobby" value="1">吸烟 <!-- hobby: [1,2,3,4] 选择几个就存储几个 -->
<input type="checkbox" name="hobby" value="2" checked>喝酒 <!-- checked 默认选择 -->
<input type="checkbox" name="hobby" value="3" checked="checked">烫头
<input type="checkbox" name="hobby" value="4">保健
</div>
<div>
出生日期:
<input type="date">
</div>
<div>
<input type="submit"> <input type="submit" value="确认">
</div>
<div>
上传图片:<input type="file">
</div>
</body>
</html>
8.锚点
在body标签的下方设置锚点
方式1:
<a name="top">这是顶部</a>
方式2:
<div id="top">div顶部</div>跳转锚点,在文本内容的最下方 /body 的上面写: ( href="#值" )
<a href="#top">回到顶部</a> 9. select下拉框:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
</head>
<body>
<p>city:</p>
<!--添加multiple属性:表示以菜单的方式显示数据,多选,按Ctrl键进行选择-->
<select name="city" id="" multiple> <!--name 表示选择域的名称-->
<option value="1">北京</option>
<option value="2" selected>上海</option> <!--selected 默认选中-->
<option value="3">深圳</option>
<option value="4">西安</option>
</select>
<p>
<label for="username">用户名:</label>
<!--用户名:-->
<input type="text" id="username">
<label>
密码:<input type="password">
</label>
</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- name属性:文字域的名称; clos属性:文字域的列数; rows属性:文字域的行数 -->
<!-- warp属性: 用于设定显示和送出时的换行方式. 值为off时不自动换行; 值为hard时自动硬回车换行; 值为soft时自动软回车换行-->
</body>
</html>
属性说明：
- multiple：布尔属性，设置后为多选下拉框，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
10.label标签(标识一下标签的作用)
定义：<label> 标签为 input 元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签。
说明：
- label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同
<label for="username">用户名:</label>
<!-- 用户名: -->
<input type="text" id="username">
<label>
密码: <input type="password">
</label>11.textarea多行文本输入框
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>属性说明：
- name：名称
- rows：行数 #相当于文本框高度设置
- cols：列数 #相当于文本框长度设置
- disabled：禁用
- maxlength：显示字符数，例如：maxlength='10' 最多输入十个字符
12. form表单标签
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8002">
<div>
用户名:<input type="text" name="username">
</div>
<div>
密码:<input type="password" name="pwd">
</div>
<div>
性别:<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</div>
<input type="submit">
<input type="button" value="确定"> <!--自由添加需要的按钮 -->
<input type="reset"> <!--reset: 重置按钮-->
</form>
</body>
</html>
注意:
想通过form表单标签来提交用户输入的数据,必须在form表单里面写你的input标签,并且必须有个提交按钮。
按钮有两种：
1: input标签 type='submit';
2: botton按钮
1225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
