HTML是什么？
htyper text markup language 即超文本标记语言。
超文本：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言：标记（标签）构成的语言.
网页 == HTML文档，由浏览器解析，用来展示的
静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成的
html文档树形结构图：
什么是标签
- 是由一对尖括号包裹的单词构成 例如：
<html>所有标签中的单词不可能以数字开头。 - 标签不区分大小写。
<html>和<HTML>。 推荐使用小写。 - 标签分为两部分: 开始标签
<a>和结束标签</a>. 两个标签之间的部分 我们叫做标签体. - 有些标签功能比较简单。使用一个标签即可。这种标签叫做自闭和标签。例如:
<br/> <hr/> <input /> <img /> - 标签可以嵌套。但是不能交叉嵌套。
<a><b></a></b>
标签的属性
- 通常是以键值对形式出现的。 例如
name="alex"。 - 属性只能出现在开始标签或自闭和标签中。
- 属性名字全部小写。属性值必须使用双引号或单引号包裹 例如 name=“alex”
- 如果属性值和属性名完全一样。直接写属性名即可。例如 readonly
<!DOCTYPE html标签
- 标准模式
head标签
<meta>
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
-
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="html基础，html总结"> <meta name="description" content="这是一个初学者对html的总结。"> -
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非meta标签
<title>loriyuhv</title>
<link herf="www.loriyuhv.tech">
<link rel="stylesheet" href="css.css">
<script src="echarts.min.js"></script>
body标签
一 基本标签（块级标签和内联标签）
<hn>：n的取值范围是1~6；从大到小，用来表示标题
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div><span>
coding
<body>
<!--标题-->
<h1>我爱我的家乡</h1>
<!--段落标签-->
<p>
我的家乡坐落在江西宜春奉新南边的一座小镇。
小镇往南十余里，就是我的老家南堡了。有山
有水有人家。
</p>
<!--加粗-->
<b>我爱我的国家——中国。</b>
<!--斜体-->
<em>我想成为一名工程师。</em>
<!--下角标-->
x<sub>2</sub>
<!--上角标-->
y<sup>2</sup>
<!--换行-->
<br>
<p>你一定可以的。</p>
<!--水平线-->
<hr>
</body>
块级标签：<p> <h1> <table> <ol> <ul> <form> <div>
内联标签：<a> <input> <img> <sub> <sup> <textarea> <span>
block（块）元素的特点
- 总是在新行上开始；
- 宽度缺省是它的容器的100%，除非设定一个宽度。
- 它可以容纳内联元素和其他块元素
inline元素的特点
- 和其他元素都在一行上；
- 宽度就是它的文字或图片的宽度，不可改变
- 内联元素只能容纳文本或者其他内联元素
特殊字符
< >；"；©®
二 图形标签 <img>
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
coding
<body>
<img src="resource/document/data/html文档树形结构图.png"
alt="html文档树形结构图"
title="html文档树形结构图"
width="800px"
>
</body>
三 超链接标签(锚标签)<a>
href:要连接的资源路径 格式如下: href="http://www.baidu.com"
target:
_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签. html5不可用
用于跳转 href : #id.（锚）
coding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03超链接标签</title>
<style>
#div1{
height:600px;
background-color: mediumpurple
}
#div2{
height:600px;
background-color: mediumaquamarine
}
#div3{
height:600px;
background-color: aqua
}
</style>
</head>
<body>
<a href="#div3">第三章</a>
<div id="div1">第一章</div>
<div id="div2">第二章</div>
<div id="div3">第三章</div>
</body>
</html>
四 列表标签
<ul>: 无序列表
<li>: 列表中的每一项
<ol>: 有序列表
<li>:列表中的每一项.
<dl>：定义列表
<dt> 列表标题
<dd> 列表项
coding
<body>
<!--无序列表-->
<b>HTML初识</b>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
<!--有序列表-->
<b>计划</b>
<ol>
<li>早起</li>
<li>散步</li>
<li>阅读</li>
</ol>
<!--自定义列表-->
<dl>
<dt><b>我的家乡</b></dt>
<dd>第一章</dd>
<dd>第二章</dd>
<dd>第三章</dd>
</dl>
<div>
<b>爱好</b>
<ul>
<li>篮球<label><input type="checkbox" name="hobby" value="1"></label></li>
<li>足球<label><input type="checkbox" name="hobby" value="2"></label></li>
<li>羽毛球<label><input type="checkbox" name="hobby" value="3"></label></li>
</ul>
</div>
</body>
五 表格标签 <table>
<table>
<tr>: 定义表格行
<th>: 定义表头
<td>: 定义表格单元
border: 表格边框
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不常用): 为表格进行分区.
coding
<body>
<table border="3" cellpadding="10"
cellspacing="5" width="300px"
>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>20197360</td>
<td>刘嘉俊</td>
<td>20</td>
</tr>
</table>
</body>
六 表单标签 <form>
-
表单属性
- HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
- action: 表单提交到哪。 一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
- method: 表单的提交方式 post/get 默认取值就是get。 get/post是常见的两种请求方式.
- get
- 提交的键值对放在地址栏url后面。
- 安全性相对较差。
- 对提交内容的长度有限制。
- post
- 提交的键值对不在地址栏。
- 安全性相对较高。
- 对提交内容的长度理论上无限制。
- get
-
表单元素
<input> 标签属性和对应值
-
type
- text 文本输入框
- password 密码输入框
- radio 单选框
- checkbox 复选框
- submit 提交按钮
- button 触发按钮（需要配合js使用）button和submit的区别？
- file 提交文件：form表单需要加上属性enctype=“multipart/form-data”
-
name
表单提交项的键。注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
-
value
表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入关联的值 -
checked
radio 和 checkbox 默认被选中
-
readonly
只读. text 和 password
-
disabled
对所用input都好使.
上传文件注意两点
1: 请求方式必须是post。
2: enctype=“multipart/form-data"
def index(request): print request.POST print request.GET print request.FILES for item in request.FILES: fileObj = request.FILES.get(item) f = open(fileObj.name, 'wb') iter_file = fileObj.chunks() for line in iter_file: f.write(line) f.close() return HttpResponse('ok')
coding
<body> <!-- 注意：name属性是给服务器看的！ {"username": "loriyuhv", "password": "12345"} --> <form action="127.0.0.1:8090/index" method="get"> <!-- 文本输入框--> <p>姓名：<label><input type="text" name="username"></label></p> <!-- 密码输入框--> <p>密码：<label><input type="password" name="password"></label></p> <!-- 提交按钮--> <p><label><input type="submit" value="press"></label></p> <!-- 触发器(需要配合js使用.)--> <p><label><input type="button" value="target"></label></p> <!--复选框 多选框--> <p><b>爱好</b></p> <li>篮球<label><input type="checkbox" name="hobby" value="1"></label></li> <li>足球<label><input type="checkbox" name="hobby" value="2"></label></li> <li>羽毛球<label><input type="checkbox" name="hobby" value="3"></label></li> <!-- 单选框 注意：name属性是给服务器看的！ --> <p>性别：男<label><input type="radio" name="sex"></label></p> <p>性别：女<label><input type="radio" name="sex"></label></p> <!--上传文件--> <p><label><input type="file"></label></p> <!--重置按钮--> <p><label><input type="reset" value="重置"></label></p> <label for="name">姓名</label> <input type="text" id="name"> </form> </body><select> 下拉选项标签属性
name:表单提交项的键. size：选项个数 multiple：multiple <option> 下拉选中的每一项 属性： value:表单提交项的值. selected: selected下拉选默认被选中 <optgroup>为每一项加上分组coding
<label> 出生地： <select name="city" multiple size="3"> <optgroup label="江西省"> <option value="nanchang">南昌</option> <option value="jiujiang">九江</option> <option value="ganzhou">赣州</option> </optgroup> <optgroup label="浙江省"> <option value="hangzhou">杭州</option> <option value="ningbo">宁波</option> <option value="yiwu">义乌</option> </optgroup> <option value="beijing">北京</option> <option value="changsha">长沙</option> </select> <br/> <p><textarea rows="10" cols="100">自我简介</textarea></p> </label><textarea> 文本域
name: 表单提交项的键. cols: 文本域默认有多少列 rows: 文本域默认有多少行coding
<label> <textarea rows="10" cols="100">自我简介</textarea> </label><label>
coding
<br> <label for="name">姓名</label> <input type="text" id="name">coding
<fieldset> <legend>登录吧</legend> <label><input type="text"></label> </fieldset> -
参考文章
2142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
