目录
HTML基础
1.一套规则：浏览器认识的规则
2.开发者：
学习html规则
开发后台程序：
- 写html文件（充当模板）
- 数据库获取数据，然后替换到html文件指定的位置
3.本地测试
- 找到文件路径，直接用浏览器打开
- pycharm
4.编写html文件
doctype<!DOCTYPE html>- 标签
<html lang="en"></html>，属性只能有一个 - 注释
<!--adsdasd-->
5.标签分类
- 自闭合标签，类似
<meta charset="UTF-8"> - 主动闭合标签，绝大多数
6.head标签
<head></head>：里面的标签除了title外不可见<meta>refresh刷新、跳转 keywords关键字 description描述 X-UA-Compatible兼容titlelinkicon cssstylecssscriptjs
7.body标签
- 特殊符号
空格>>号 p标签 段落（默认段落之间是有间隔的！）<br/>换行h1~h6标题标签（默认加大加粗）div标签 常用块级标签span标签 常用行内标签
8.块级标签与行内标签
- 标签分为：
- 块级标签（占一行，可设置属性）：H标签（默认加大加粗）,p标签（默认段落间隔），div标签（白板）
- 行内标签（内联）：span标签（白板，不带属性）
- 标签之间可以嵌套
- 标签存在的意义，属性，css操作，js操作
ps：chrome审查元素的使用
- 放大镜快速定位
- 查看styles样式
20个常用标签
form标签
<form action='http://sssss' method='GET' enctype='multi'>
# 只提交input标签内容，div不提交
# method="get"会将提交的数据拼接到url后面再提交，请求头
http://sssss?q=用户输入的值
http://sssss?q=用户输入的值&b=用户输入的内容
# method="post"会将提交的数据放在内容里提交，请求body
# get与post只是形式不同，无关安全
# 数据被打包成字典提交到后台 {'user': '用户','email': 'xx', 'pwd': 'xx' }
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
# submit能将表单数据提交，button默认无用
input等数据提交标签
-
输入框
input type='text' -> name属性为key，value="赵凡" （默认值） input type='password' -> name属性为key，value="赵凡" input type='submit' -> value='提交' 提交按钮，表单form input type='button' -> value='登录' 按钮 -
选择框
input type='radio' -> 单选框 提交value，checked="checked"默认选中，name属性为key（name相同则互斥） input type='checkbox' -> 复选框 提交value, checked="checked"，name属性为key（批量获取数据，列表） input type='file' -> 上传文件 依赖于form表单的属性 enctype="multipart/form-data"将文件一点点上传 input type='rest' -> 重置 -
多行文本框
<textarea>默认值</textarea> -> 非自闭合标签 有name属性为key -
下拉框
<select name="select1" id="s1"> -> name属性为key <option value="1">在线</option> <option value="2">下线</option> </select> -> 内嵌option标签 value => 提交数据的值 selected="selected" => 默认选中项 size => 设置大小 multiple => 设置多选 optgroup => 标签分组（label = 湖北省）
=以上为所有能将数据提交到后台的标签=
a标签
-
跳转网址 href="www.baidu.com"
-
锚 当前页面章节跳转 href='#某个标签的ID' HTML的ID不允许重复
a标签不属于块体
-
新窗口打开
target="_blank" -
a标签href不跳转 禁止跳转
当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法：
-
标签属性href，使其指向空或不返回任何内容。如：
<a href="javascript:void(0);" >点此无反应javascript:void(0)</a> <a href="javascript:;" >点此无反应javascript:</a> -
标签事件onclick，阻止其默认行为。如：
<a href="" onclick="return false;">return false;</a> <a href="#" onclick="return false;">return false;</a>注意：只有一个href="#"是不可以的。
-
img标签
属性src 路径
属性alt 图片未显示时显示的文本
属性title 图片名
ul,ol,dl列表
ul #前面为“·”
li
ol #前面为“1.”
li
dl #分层显示
dt #标题
dd #内容
table表格
table
thead 表头 默认加粗
tr 行
th 表头列
tbody 表内容
tr 行
td 列
属性colspan = '3' #占3列
属性rowspan = '2' #占2行
label标签 文本框
用于点击文本，使得关联id的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
fieldset标签 框起来并在框头显示文字
legend标签