HTML基础

HTML-超文本标记语言

定义

HTML（hyper text markup language）：超文本标记语言，网页除了可以编写文本还可以编写多媒体，代码全由各种标记组成

标记（标签）的语法：

<标记名 属性=”值” 属性=”值”….>
提示：网页中的标记一般都是成对出现的，有开始<标记名 属性=”值” 属性=”值”….>，有结尾</标记名>，中间是被修饰的内容

网页中有特殊的标记,该种标记一般都是功能性标记，如换行，插入图像，语法：<标记名 属性=”值” 属性=”值”…./>,称为自封闭标记

普通修饰性标记：<标记名 属性=”值” 属性=”值”….>被修饰的内容</标记名>
功能性标记：<标记名 属性=”值” 属性=”值”…./>

网页的基本架构：开发中所有网页都是基于架构基础上进行开发

补充：计算机中网页文件的后缀名：.html或.htm

网页中常用的标记：

1.标题标记：用于将被修饰的内容显示为标题级别（没有被标记修饰的文本都是正文级别）
特点：字体加粗，字体大小改变（网页中字体有默认大小，一般都是14或16像素）,占用一行级别
标记名:h1~h6，数字越大字体越小

常用属性：align:设置标题文本水平对齐方式，值left,  center(居中),  right

2.换行标记：用于在出现该标记的地方进行换行（网页中不识别文本编辑的换行和空格）
标记名:

3.(插入)图像标记:用于在网页中插入图像
标记名:,该标记存在必须设置的属性（没有该属性该标记没有意义）
完整语法："<"img src=”图像地址” />

常用属性：src(必写属性)：指向图像地址
			width：设置图像宽度，值为数字+单位，单位一般都是像素值（px）
			height：设置图像高度，值为数字+单位，单位一般都是像素值（px）
			提示：如果没有设置图像宽高，那么以图像本身 的像素显示
			alt：设置图像提示文本

4.段落标记：将被修饰的文本显示为一个段落（存在段前间距）
标记名：p
常用属性：align,值left center right
提示：如果网页中需要显示大量文本，那么一般会使用段落标记修饰，提高用户体验度
5.列表标记：分为无序列表和有序列表，必须结合li列表项标记进行编辑
标记名：ul（无序）和ol（有序）

常用属性：type：设置列表符号或序号，无序列表默认是实心圆（disc），有序列表默认是数字1

6.超链接标记：用于将被修饰的内容绑定超链接效果（鼠标放在文本上会出现小手）
特点：被修饰的文本会出现下划线，字体在为点击时是蓝色
标记名:a,必写属性：href=”链接地址”
完整语法：“<”a href=”连接地址”>超链接标识文本

常用属性：target：设置超链接内容显示方式，默认是在当前窗口打开，值为_blank表示在新窗口打开

7.滚动标记：用于将被修饰的内容进行滚动
特点：默认内容从右往左滚动，不往返
标记名：marquee

Behavior：滚动方式
Scrollamount：滚动速度
Scrolldelay:延迟时间
Direction：滚动方向
Width:滚动区域宽度
Height：滚动区域高度
….
8.表格标记：必须结合tr行标记和td单元格标记进行定义
标记名：table

常用属性：
width：表格宽度
height：表格高度
Border：表格边框，值为数字，常用1，一般在实际开发中不会使用该属性
align：设置表格本身的水平对齐方式
cellspacing:设置单元格之间的间距
cellpadding:设置单元格中内容与单元格本身之间的距离

行和列标记常用属性：
	width：设置某行或列在表格中的宽度
	height：设置某行或列在表格中的高度
	align：设置某行或某列的文本在当前行或当前列中的水平对齐方式

表格中合并单元格操作：跨行（垂直合并）和跨列（水平合并）
操作步骤：
1.先找到用于跨行跨列的第一个单元格（从上往下，从左往右），在其中定义跨行和跨列属性
2.计算跨行的行数和跨列的列数（合并后单元格所占行数和列数），将计算得到的数字赋值给属性
语法：colspan=”合并后单元格所占列数” rowspan=”合并后单元格所占行数”，两个属性可以单独使用也可以一起使用
3.删除被跨（占用）单元格

9、表单标记：用于向后台发送数据的标记，通过表单中的组件完成数据的收集，通过表单本身的属性完成数据的发送设置
提示：表单本身没有任何实际意义，只有在表单中定义各种组件，表单才能完成数据收集和发送
标记名：form,必写属性action：指明数据发送地址，可选属性method：指明数据发送方式，值有get或post， 默认是get方式
完整语法：

//各种组件

补充：get和post的区别，get方式发送数据时在地址栏上数据可见，post方式发送数据在地址栏上不可见，get方式发送数据较post方式效率更高速度更快，所以在实际开发中，如果发送的数据不涉及安全性问题，那么一般选择get方式，如果涉及安全性问题那么选择post

表单常用组件：
输入组件标记：用于接收用户输入或选择
标记名：，必写属性type
完整语法：
常用属性：name:定义该组件标识的名称（在开发后台项目时页面的组件必须带有该属性，属性值必须有实际 意义）
maxlength：定义输入的最大长度
checked：定义单选按钮或复选框的默认选择，值为”checked”

	html5新增属性：
		required：是否必需填写，值”required”,在html5标准中所有布尔类型值都可以省略
		和以下代码意义一样
		
		placeholder：定义输入文本或密码框中提示文本
		
输入组件类型：
	text:表示输入框
	password:表示密码框，默认输入数据不可见
	radio：表示单选按钮，如果多个单选按钮表示的是一组选择，那么这多个单选按钮的name必须一致
	checkbox：表示复选框，一般都是设置同名属性，保证后台获取数组值
	提示：单选框和复选框的值，一般都是通过在组件中设置value属性来定义
	file:表示文件上传控件
	button：普通按钮，没有任何意义的按钮，必须同时定义value属性来表示按钮的文本，该按钮一般都必					须通过JavaScript来给按钮定义功能
	submit：提交按钮，默认带有提交功能，有默认按钮文本，一般应该带上value属性定义按钮文本
	
	了解类型：html5新增的表单输入控件类型，新增的所有控件类型都是为手机端准备的，PC端一般都不会				使用,所有的类型都具有对应的功能
Email：邮箱验证功能
Color：颜色选择框
Date：日期输入选择框
Datetime
Number
…….

下拉列表控件：让用户在下拉框中选择数据,必须结合下拉列表项标记option使用
标记名：select
常用属性：
name：定义发送到后台的标识名称
列表项属性：
value：定义发送到后台的数据

		selected：定义加载时下拉列表默认显示项，不使用该属性默认显示第一项

文本域控件：用于显示大段文本
标记名：textarea
常用属性：
Cols:设置列数
Rows：设置行数

特殊标记和特殊符号：
特殊标记：
普通按钮文本
提交按钮文本
或:字体加粗标记
或：字体倾斜
：下划线标记
^{：上标
_：下标}

特殊符号：
  —>表示空格