html基础
HTML 简介
HTML 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个笔记</title>
</head>
<body>
<h1>我的第一个小标题</h1>
<p>我的第一个p段落。</p>
</body>
</html>
实例解析
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
（一）标签的分类有两种：
1.行内元素：可以和其他元素标签一行显示
只能嵌套其他行内元素和普通的文字
不能设置width,height 宽高
2.块元素：前后换行，不与其他元素一行显示
可以嵌套其他行内元素和块元素的普通文本
可以设置width,height 宽高
在标签上都可以添加一个align属性，对齐方式： left right center
（二）img 图像标签
src 是必须属性 图像路径分两种
1.绝对地址：网络地址
2.相对地址：本地地址
可添加|设置：
1.width 宽度
2.height 高度
3.border 边框
4.title 当鼠标悬停在内容上的时候，显示的提示字
5.alt 如果图片无法正常加载，显示的提示字
如:<img src="img/工作狂.jpg" title="程序猿" alt="淦" height="500px" width="500px">
......
（三）常用标签
1.background 一般用来设置背景图片
如:<body background="img/图片文件地址|绝对地址"></body>
2.bgcolor 设置背景颜色，颜色的设置有三种形式：一种为16进制，一种为英文形式，最后一种是rgb形式
如:
<body bgcolor="#000"></body>
<body bgcolor="black"></body>
<body bgcolor="0,0,0"></body>
背景颜色和图片可以同时使用，而往往，背景图片会优先运行。图片覆盖不到的地方，会执行颜色代码。
如：
body{
background:url(图片的绝对地址|相对地址) #000no-repeat;
}
3.br 换行
4.hr 水平线
5.p 段落标签
6.a herf="" 超链接
7.table 表格，也有多种属性，主要有rowspan跨行、colspan跨列，一般也需要设置好宽高，这里就不演示了
8.tr 行
9.th 标题栏
10.td 单元格
11.ul 无序列表：可以给type属性：circle square desc默认，分别是不同的行头符号形状
12.ol 有序列表：可以给type属性：a A 1 i I等，分别设置不同的行头序列号
13.li 列表项标记，是ul与ol的直接子元素，li标签中可以定义任意元素，也可以使有序和无序的列表互相嵌套
......
内容没有个数限制
块元素，只能嵌套其他行内和文本
span 便于为元素提供样式（用来选中文本）
div 块元素
h1~h6 标题标签
根据权重的不同，字体大小依次减小、 加粗
表单：
form 表单
作用：收集用户信息
定义form标签定义表单 form
form标签上常用的属性：
1.action 数据提交的地址
2.name 表单名称
3.method 请求方式 get/post之间的区别：
get : 显示在地址栏中 ?后以键值对形式拼接
大小受限制 不安全 效率较高 浏览器默认（百度）
post : 相对安全 大小没限制 请求体重
4.enctype
如果表单中存在文件上传，需要更改 multipart/form-data，否则默认即可
表单域|表单标签：
只要想要提交数据的表单元素，需要必须存在name属性
input type属性不同的值决定表单标签不同的功能
text 普通文本框
password 密码框
radio 单选框
单选效果：这些单选框设置为一组，name属性值相同为一组
checkbox 多选框
一个功能的多选择设置为一组 name属性值相同
file 文件上传
submit 提交按钮 value属性的值修改submit按钮的显示
button 普通按钮 常结合js一起使用
reset 重置按钮，恢复默认值
fieldset 选区
select 下拉框
option 下拉列表选项
textarea 多行文本域
label 定义
常用的几个属性：
name：一般表单元素
id：唯一的 常结合js使用
class：可重读 可以给多个值 结合css
表单元素的常用属性：
name 给个名字
value 默认值
placeholder 提示字
checked 单选|多选--默认选择
disabled 禁用 不能修改不能提交
readonly 只读 只是不能修改，可以提交
举个栗子：
<fieldset>
<legend><h2>相亲信息表</h2></legend>
<hr>
<form action="" method="get" enctype="multipart/form-data">
<p>
<span style="color:pink">姓名：</span><input type="text" name="username" value="zhangsan" disabled>
</p>
<p>
<span style="color:pink">银行卡密码：</span><input type="password" name="userpwd" readonly>
</p>
<p>
<span style="color:pink">性别：</span>
<input type="radio" name="gender" value="man" checked="checked">男
<input type="radio" id="woman" name="gender" value="woman"><label for="woman">女</label>
</p>
<p>
<span style="color:blue;">兴趣爱好：</span>
<input type="checkbox" type="redio" id="1" name="hobby" value="1"><label for="1">吃饭</label>
<input type="checkbox" name="hobby" value="2">睡觉
<input type="checkbox" name="hobby" value="3" checked>敲代码
</p>
<p>
<span style="color:blue;">生活照：</span><input type="file" name="photo">
</p>
<p align="center">
<input type="hidden" name="隐藏标签" value="隐藏标签的值">
</p>
<p>
理想型：
<select name="wife" id="">
<option value="1">温柔型</option>
<option value="2" selected>娇蛮型</option>
<option value="3">可爱型</option>
<option value="4">娇小型</option>
</select>
</p>
<p>
交友宣言：<textarea name="info" if="" cols="30" rows="10" placeholder="宁可错杀一千，不可错失一个">我是...</textarea>
</p>
<input type="submit" value="submit">
<input type="button" value="button" onclick="alert('点我做撒？')">
<input type="reset" value="reset">
</form>
</fieldset>