HTML

html

【超文本标记语言】 类似于快递上的地址，快递公司根据不同的地址发送目的地
1.普通文本与超文本
普通文本
纯字符
超文本
字符，图片，超链接，视频，音频

  
hello world
  
段落
  video src="a.mp4">
  百度一下

2.浏览器由上而下解析html文件，会将标签自动进行转换，变成浏览器页面元素显示

开发环境
编辑器
    vscode、sublime
浏览器
	firefox、chrome、IE
服务器

3、B/S架构【浏览器/服务器模式】

   B Browser浏览器
   S Server服务器

4、html网页

1.编写hello world
2. 结构

doctype 	声明部分 
		html      Html的根元素，用来包含html文档的所有元素
		head    不会显示到浏览器视口中
		title		显示在浏览器选项卡的标题
		meta    用于设置元信息，配置
					charset=utf-8 	
					编码
						编辑器 UTF-8
					解码
						浏览   
                        程序员  编写 
                        浏览器  解析
				body
					网页主体

3.基本语法
1) 注释 ctrl + /

2) 元素组成
开始标签、内容(文本或者子标签)、结束标签

hello world

hello world

3) 属性
在开始标签中可以添加属性

属性名不区分大小写

1. 核心属性【绝大多数标签都可以应用的属性】
id 文档内部的唯一标识
class 类

one

two

three

title 描述
style 样式，取值为css规则
css规则,键值对，键值之间通过冒号分割，规则之间通过分号分割

2. 特有属性【某些标签特有的】
a
href
target
img
alt
src
4) 元素分类
1.块级元素
作用：作为页面框架，或者容器。是页面的主体
特性：
1) 独占一行空间
2) 默认宽度为100%，默认高度由子元素或者内容决定
3) 可以为其指定宽高 style=“width:;height:;”

div 	无意义的块元素
					h1~h3	标题
						font-size
						font-weight
						margin
					p 		段落
						margin
					html
					body
						margin
					ul、li 	无序列表，列表项	
						ul
							margin
							padding
							list-style
						li
					ol、li  	有序列表，列表项
						ol
							margin
							padding
							list-style
					dl、dt、dd 	有序列表
						dl
							margin
						dd
							margin

				H5新增的块元素（语义化标签）
					header(头)
					nav
					article（主体）
					section (部分)
					footer（脚）
                    video
                    audio

2. 行内元素
   作用：点缀网页，填充内容
   特性：
   1) 与其他行内元素共享一行空间
   2) 默认宽高由内容决定
   3) 不能为其指定宽和高
   4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素
   span 无意义的行内元素
   a 超级链接
   默认样式
   color
   text-decoration
   cursor
   默认事件（js - dom） 点击事件
   href
   url
   相对路径
   绝对路径
   锚点
   target
   _self 当前页打开
   _blank 新建选项卡打开
   img
   src 图片地址
   url http://
   相对路径
   绝对路径 file://从根目录开始
   alt 图片找不到的时候显示的文本

   3. 功能元素 （行内元素）
      1) 表格
      table
      【属性】border、width、、、、
      caption 表格标题
      thead 表头部分
      tr
      th/td
      tbody 表格主体部分【不可以省略】
      tr
      td/th
      【属性】colspan、rowspan、width、align
      td/th中可以放任意子元素
      tfoot 表底部分
      tr
      td
      【注意】：每一行中的列数应该是相等
      2) 表单（前后台交互）
      用户 -> 表单 -> 后台 -> 数据库
      注册页面
      登录页面
      搜索框

	input
	select
	textarea

enctype 编码方式

			1. enctype='application/x-www-form-urlencoded'
								浏览器就会将参数转换为【查询字符串 qs】格式
								username=tom&password=123321&
			2. multipart/form-data
								当有附件在表单中的时候，enctype务必设置为这种格式
					input
						name: 			作为参数中的key
						value: 			作为参数中的value,在按钮中务必指定value值
						type:
							text 		单行文本框
							password 	密码框
							submit 		提交按钮
							radio 		单选按钮
							checkbox 	复选按钮
							file 		附件选择器
						checked 		单值属性	默认选择
						placeholder     提示语
					select
						option
							
							山西
					textarea
						多行文本域
						placeholder 提示语
					第三方库
						日期插件
						地址选择器地址
						附件上传
						富文本
            3) H5新增
                标签
                    progress 进度条
                    output 表示用户动作产生的结果
                    datalist 表示其他控件可用的值
                属性
                    type
                        date    日期
                        datetime-local 	日期时间控件
                        time 	时间控件
                        number 	数字控件（只能输入数字）
                        range 	范围控件（通过控制条可以调整取值）
                        search 	搜索控件
                        tel 	电话控件
                        url 	地址控件
                        color 	颜色控件
                        email  	email控件