html是一套规则，浏览器认识的规则
学习HTML语言
开发后台程序
写HTML文件
从数据库获取数据，然后替换到html中对应的位子（web框架）
HTML文件的测试方法
找到文件使用浏览器打开
pycharm直接打开测试
HTML文件说明
下面是一个基础的html文件：
这个文件里面有几个内容：
<!DOCTYPE html> 这个标签告诉浏览器，这是html规则的文件，使用html规则解释
<html>…<html/>这种格式称为标签，叫html标签
除了html标签，文件里还有head标签以及body标签
head标签解说
head标签中meta标签
meta标签的charset属性指定这个html文件是使用UTF-8编码规则
head标签中的title标签
title标签指定html文件打开后，浏览器显示的标签名字
上面3个标签有一个不同的地方，head和title标签都是属于主动闭合标签，meta是自闭和标签
<meta>这样的标签叫自闭和标签
<head>…<head/>这样的标签叫主动闭合标签
meta标签的几个属性
http-equiv="Refresh" Content="3" 默认3秒刷新一次页面
这个例子是3秒后自动跳转的Url属性指定的网页
name属性中的keywords和description选项
keywords：做搜索引擎的关键字
description:网站的介绍
http-equiv="X_UA-Compatible" content="IE=IE9;IE=IE8;"
以IE8，IE9模式打开网页
总结一下meta标签的功能：编码 跳转 刷新 关键字 描述 IE兼容
<link>标签
可以给页面加图标：<link rel="shortcut icon" href="">
body标签解说
显示空格和一些特殊字符
p标签和br标签
p标签的意思就是段落
这个在浏览器中是这样的
一共有4个段落，对应文件中的4个p标签，从图中看出每个段落之间有间距
br标签是干什么的呢？
改一下html文件
在p标签里面添加了br标签，注意br标签是自闭和标签，看看什么效果
还是4个段落，但是第一个段落里面有两行，这两行之间没有间距，这就是br标签的功能，换行
h标签
先看下html文件：
h标签是手动闭合标签，用来制作标题，h1最大，h6最小，看看效果：
span标签
span是手动闭合标签
看看输出的内容：
看到我要输出的内容以横着依次排列的方式输出了
看到这里，我要说明一下了，我们所用的标签分两种，一种叫块级标签，一种叫行内标签（内联标签）
p标签 h标签是块级标签
span标签是行内标签
div标签
div标签没有格式，是块级标签，称他为白板
表现为：
body标签中的input标签说明-1
input type='text' - name属性 value='name' 默认值
input type='password' - name属性 value='name' 默认值
input type='submit' - 提交表单 value='提交'
input type='button' - 按钮 value='按钮'
单选框，复选框，文件上传，重置按钮
input type='radio' - 单选框 value,name属性，name相同则互斥 checked='checked'默认选中
input type='checkbox' - 复选框 value name属性，name相同不互斥
input type='file' - 默认不能上传文件，依赖于form的属性：enctype="multipart/form-data"
input type='reset' - 重置
多行文本，下拉菜单
<textarea name="meno">dfdfdfafadf</textarea> - name属性，中间写默认值，多行数据
<select></select> - name属性，内部optoin标签，value，提交到后台，size（显示多个），mutiple多选
a标签
跳转
<a href="" target="_blank"></a>
target属性：_blank在新的页面打开指定的Url
a标签不能提交到数据库
锚点
在div标签中使用id='i1'，然后在a标签中 使用href=""，这样就可以通过点击“#i1”对应的a标签访问相关联的内容
注意 id不能重复。
img标签
效果图：
点击图片或文字都可以跳转到指定的网站
列表标签
对应三种表现形式
表格标签
效果：
但是，这种写法不是标准写法，标准写法如下：
使用thead标签做表头，tbody标签做内容
label标签
用于点击文字，关联的标签获取光标：
fieldset标签
了解一下就可以了
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61291.shtml
