学习笔记整理（2021.1.4-1.15）

1.什么是html？**

HyperText Markup Language（超文本标记语言）的缩写。

超文本：即超越普通文本，能够在文本内插入图片、音频、视频、超链接等。
标记语言：编译语言：cjava

		hello.java->hello.class->解析
		system.out.print(1+1);//2
		特点：
			需要编译运行
			本身具有逻辑能力和行为能力
	脚本语言
		特点：
			javascript
			console.log(1+1);//2
			被解析器解析运行
			本身具有逻辑能力和行为能力
	标记语言：
		html
		xml
		特点：
			
1+1
->1+1
			本身不具有逻辑能力和行为能力
			只能被读取（浏览器）

	本地submit/vscode编写代码-》部署到服务器端
		html

2.html特点

1.从上到下依次解析
2.容错性-宽松性
3.大小写不敏感
	

	

3.文档结构

创建html文档：
	.html
	.htm
	为后缀名的文件

	node.txt->.txt:.html
	node->node.html.txt

默认文档结构：
	快捷键生成：
		html:4t
		html:5

doctype声明：
html:
	根元素
	最大父元素

	head
		meta：
			设置字符编码
			html5中：meta：设置手机端属性
		title：
			设置标签页名称
		引入第三方文件
	body:
		在浏览器上想要展示的内容

4.元素

1.元素的组成
	开始标签 元素内容 结束标签
	<标签名称>  hello 

	有一部分标签没有结束标签：
		单标签/空元素

	标签不能交叉嵌套

2.元素的分类
	块级元素：
		div
		特点：
			独占一行空间
			不与其他元素共享一行空间
			宽度占满整个父级元素
			高度由子级元素撑起

	行内元素：
		span
		特点：
			可以和其他元素共享一行空间
			宽高由子级元素撑起,不能直接设置宽高
			不能直接设置上下的内外边距

5.属性

1.属性的设置
	写在开始标签内部
	属性名和属性值之间使用等号连接
	多对属性之间使用空格连接
2.属性的分类
	1》按照公有性分类
		公有属性：
			所有标签都能设置的属性
			id：元素的唯一标识
			class：按类表示元素
				多个属性值之间使用空格隔开
			style:设置行内样式
				按照css语法设置
			title：设置提示

		私有属性
			为当前标签设置
	2》按照属性特性分类
		基本属性：
			属性值使用字符串类型
				""
				''
		布尔值属性
			属性值只有true和false
			readonly='readonly';//true
			readonly='true'
			readonly=true
			readonly

			key=value:
			键值对
			key='key'
			key='true'
			key=true
			key

6.语法

1.空白
	在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白

	pre标签：段落标签，保留用户所输入的格式
2.字符实体
	使用&开头
	使用;结尾
	中间写实体名称

	 ->空格
	<-> <
	>-> >
	"
	©
	®
	×

3.注释
	注释的作用：
		用来提升代码的可读性，便于代码的维护和管理
	注释的表现形式：
		
		被注释掉的内容不会被浏览器所解析

7.标签

布局：
	   div+span
	   html中的无意义元素

      body：
	    8px的外边距
      p：段落标签16px
      pre：段落标签，保留用户所输入的格式
      div:块
      span：行
      img：图片
	  alt：替换图片的内容
	  src：引入图片地址
	  width：设置图片宽度px
	  height：设置图片高度px
	  特殊的行内元素（替代元素）display：inline-block
	  ./
	  ../
	  ../../

	   http://www.baidu.com
强调元素：
	  em
	  i
	  strong
	  b
	  del
	  u
	  ...
	  img:
	  width:
		  px
	  height
	  src
		  d:/.../1.png

	  alt
br:换行标签
hr：水平线
	size:设置水平线高度
	width:水平线的宽度
	align:水平线的位置
		left
		center
		right
     sub
     sup

h1-h6:
	标题标签
a:标签
	超链接
	href:设置链接地址
		1》url
		2》锚点
			通过id属性设置锚点位置
			#id属性值
		3》邮箱地址
			mailto:邮箱地址
	target:设置页面的打开方式
		_blank:打开新页面
		_self:在当前页面中打开
		_top:在顶级框架中打开
		_parent:在父框架中打开

table:
	表格
	子元素：
	   caption:设置表格标题
	   thead：设置表格头部
	   tbody：设置表格体部
	   tfoot：设置表格脚部
		 tr：一行
		    	td/th：一个单元格
		    	                   //width
					                 colspan='3'
					                 rowspan='3'
		colgroup:
				     写在所有tr之上
			           col:标识列
				    span:number
	私有属性：
			align：
			border:
			cellpadding
			cellspacing
			width
			bgcolor
		td/th:
			colspan
			rowspan

列表标签：
ul:无序列表
li：子标签

	ol:有序列表
		私有属性：
			start:number
			reversed:布尔属性
		子标签：li
		默认序号从1开始
	dl：标题列表
		dt:标题标签
		dd：列表项

form：		    
	input：表单组件
		客户端和服务器端发生数据交互时，需要使用表单
	私有属性：
		action：设置表单提交地址
		target：
		         _self
			     _blank
		method：设置表单提交的方式
			post：
				1.将数据封装在请求体中
				2.安全性较高
				3.提交重量级数据
			get：默认
				1.将数据拼接到浏览器地址栏上
				2.安全性较低
				3.提交轻量级数据
		enctype:
			设置表单提交的编码格式
	子组件：
		input:
			私有属性：
				type:
					text:单行文本框
					password：密码框
					submit:提交按钮
					reset：重置按钮
					image：图片按钮
					radio：单选框
					checkbox：多选框
					button：普通按钮
					hidden：隐藏域
					file：文件上传按钮
				value:
					1.写在按钮上，代表修改按钮名称
					2.写在输入框上，代表输入框的默认值
					3.写在单选/多选框上，代表交互数据的value


				name:
					设置前后台交互数据的key值
				src:
					type=image
				alt:
				width
				height:
				checked：布尔值，默认选中
					针对单选框和多选框
				size:设置文本框的宽度
					默认宽度20
				maxlength:文本框的最大输入字符长度
				readonly：只读，布尔属性
				disabled:布尔属性，禁用组件

				autofocus:自动聚焦，布尔属性
				placeholder：提示用户输入
				required：布尔属性，必填项

		label:
			关联文件和组件

		fildset:
			legend:设置区域标题

		button：
			按钮
			type:
				submit
				reset
				button
			如果button写在form标签内，type默认为submit
			如果button写在form标签外，type默认为button

		select：
			下拉框
			私有属性：
				size：设置每次展示的项数
				multiple：布尔属性，是否可以多选
				disabled：
				name
			子组件：
				option：选项
					disabled：
					selected：布尔属性，默认选中项

				optgroup：
					分组option
						label属性：设置分组标题
		textarea：
			多行文本输入框
			cols
			rows
			wrap：
				off
				hard
				soft