HTML——Day20

HTML

一、概述

html:hypertext markup language 超文本标记语言

超：可以在记事本中嵌入图片，音频，视频，连接，css，js文件等资源

标记：也叫标签，表示html中内容都是以标记的形式展现的

• 单标记：只有开始标记，没有结束标记
• 双标记：由开始标记和结束标记组成
• 属性都是写在开始标记中

作用：制作静态页面

特点：
1、由浏览器解释运行
2、由标记组成
3、后缀是.html或者.htm

二、常用标签

2.1 form表单标签

作用：获取用户数据，并将数据提交到服务器

属性：
1、action：用于明确当前表单数据的提交路径
2、method：设置提交方式

get:默认提交方式，表单中提交的信息会拼接在请求的地址之后
post：表单中提交的信息不会拼接在请求的 地址之后，二十封装在请求中

input：输入域标签
熟悉感：
1、type

取值：
1、text：文本输入框
	placeholder：提示信息
	maxlength：最大字符数
2、password
	placeholder：提示信息
	maxlength：最大字符数
3、radio：单选框
	name：将多个单选框放在同一组中，以使他们产生互斥性
	checked：默认选中
	可以通过label标签的for属性与radio的id关联，达到点击文本相当于点击radio的效果
	例如：<input type="radio" name="sex" id="female"/><label for="female">女</label>
4、checkbox：复选框
	checked：默认选中
	可以通过label标签的for属性与checkbox 的id关联，达到点击文本相当于点击checkbox 的效果
	例如：<input type="checkbox" name="hobby" id="kg"/><label for=:"kg">考古</label>
5、button：普通按钮，没有给事件时没有默认的效果
6、reset：重置按钮，重置当前表单
7、submit：提交按钮
补：
value属性在按钮类上的作用是设置按钮上的问嗯，在其他类上的作用是设置提交到表单的值
name属性的作用是设置提交到服务器上的键，与value值产生键值对关系，从而可以通过Java代码通过键获取用户提交的值

2.2 img图片标签

属性：
1、src：引入图片资源
本地资源、网络资源
2、alt：图片没有正常加载时显示的提示性文本
3、title：鼠标悬浮在图片上的提示性文本
4、width、height：宽高、单独设置会自动等比例缩放

2.3 a超链接标签

作用：页面的跳转
属性：
1、href：明确目标位置

页面间的跳转
步骤：
1、在目标位置的标签内设置id属性
2、在跳转的起始位置的href中写上#id值
补：返回首页 href=”#“

2.4 ul、ol列表标签

ol：有序列表
ul：无序列表
li：列表项

注：列表的完整结构必须由ol/ul和li共同组成

属性：
1、start：在ol中，表示序号的起始值
2、type：
在ol中，表示序号的终类
在ul中，表示标识的种类，取值①circle ②disc ③square

列表的嵌套：
子列表必须在父列表的列表项中

2.5 table表格标签

table：表格
tr：表格行
td：行的单元格

属性：
1、border：表格的框
2、width/height：表格的宽高
3、cellspacing：单元格的间距
4、cellpadding单元格的内边距（单元格中的内容到所在单元格边框的距离），cellpadding可能会影响整个表格的大小

不规则表格：
可以使用colspan实现跨列，row审判实现跨行

2.6 font字体标签

属性：
1、color：设置文字颜色
①色值单词 ②#rrggbb ③style=”color：色值单词/#rrggbb/rgb（）/rgba（）
2、size:设置文字大小，范围1~7，默认是3

2.7 h标题标签

特点：
1、h1~h6，逐渐表笑
2、加粗
3、它是块级元素

2.8 p段落标签

块级元素：独占一整行，上下自动换行
行内元素：与其他行内元素能在同一行展示

2.9 br换行标签

空格、tab、回车会视为一个空格
通过br实现换行

2.10 hr水平线标签

属性：
1、size:设置水平线的粗细，范围1~7
2、noshade：设置取出水平线中间的空白
取值”①只写属性不写值 ②="" ③=“noshade”

三、html的结构

head：头部标签，用于对当前的html进行配置
例如：标签页的标题，页面的编码格式、敏感字、刷新频率、作者等及css、js的引入

body：主体标签，用于放置标签承载页面内容

四、转义和注释

&nbsp；一个空白字符
&lt；小于号
&gt；大于号
注释:<!-- 注释内容-->