什么是html

1.HTML (Hypertext. Markup Language) – 超文本标记语言
2.标记语音 – 在不同的文本中加不同的标记让文本的意义和功能不同,例如:markdown,html
3.HTML大小不敏感:html=Html=HTML=hTml(小写和大写功能一样)
4.web标准
w3c针对网页开发指定了web标准
(1)结构标准 – html,负责网页内容的显示
(2)表现结构 – css,负责网页内容的样式和布局
(3)行为标准 – js,负责网页内容的变化

5.结构标准 – html(超文本标记语言)
html代码写在后缀是.html的文件中,一个html文件表示一个网页
网页内容:文字,图片,超链接,输入框,按钮,视频,音频,flash…
网页结构:整个网页是一个html标签,html中有head和body两个兄弟标签

html标签 – 表示整个网页
head标签 – 表示网页的顶部
body标签 – 表示网页内容部分

标签

1.就是标记,不同的标签功能不一样
2.标签是html的基本结构,不同的标签功能不一样
3.语法:
双标签(标准标签): <标签名 属性1=属性值1 属性2=属性值2 …>标签内容</标签名>
单标签: <标签名 属性1=属性值1 属性2=属性值2 …>或者<标签名 属性1=属性值1 属性2=属性值2 …/>

4.说明:
a.<>和/ – 固定写法
b.标签名 – 标签名是html规定好的,单标签和双标签也是固定的
注意:标签名前后不能随意添加空格
c.属性 – 以 属性=属性值 的形式存在,多个属性之间用空格隔开;不同的标签属性是确定的;属性值不管是什么值都必须放在""中
d.标签内容 – 双标签开始标签和结束标签中间的部分就是标签内容;
标签内容很灵活,可以是独立的文本,也可以是一个标签,还可以多个标签或者多个标签和文本的组合

标签的分类

(1)从可见性来分:
可见标签:p,a,img标签
不可见标签:meta,style,script,link标签…
(2)head和非head中的标签(body标签)
head中标签:
meta,title,style,link,script,base
body标签：p,a,b,img,table,lable,ul,ol,li…,style,link,script,base

head中的标签

1.head中可以使用的标签: meta,title,style,link,script,base
2.meta标签 – 网页元数据,主要用来对网页进行基本设置,包括:设置文本编码方法,设置网页搜索关键字,网页简介
3.title标签 – 网页标题
4.link标签 – 导入外部文件(导入图片作为网页图标,导入外部样式表)
5.link标签的使用
rel属性 – 设置导入文件的作业
stylesheet:外部样式表 icon:网页图标
type属性 – 指定导入文件的类型和后缀 文件类型/后缀名
text/css:导入一个后缀是.css的文本文件
image/png:导入一个后缀是.png的图片文件
href属性 – 设置被导入的文件的路径
6.文件路径的写法:
1.绝对路径:文件在计算机中的全路径
2.相对路径:
(1)使用.表示当前目录(当前写代码的文件对应的目录地址表示当前目录)
. – 表示当前目录
(2)使用…表示当前目录的上层目录
(3)使用…表示当前目录的上层目录的上层目录

文本标签

1.标题标签:h1~h6
如果文本的意义是标题的时候就选标题标签
2.段落标签:p
一个段落就对应一个p标签
3.其他的普通文字标签:font,span
size属性–设置字体大小
color属性–设置字体颜色
4.文本效果相关的标签和符号
html中手动敲回车无用,手动添加空格也没用
如果需要在内容中加换行，孺要添加
标签
如果需要在内容中加空格，需要使用html符号: (一个像素)  (一个空格)
加粗:b标签,strong标签(有强调的意思)
倾斜:i标签,em标签(有强调的意思)

列表

1.无序列表:ul-li
ul标签 – 表示整个容器
li标签 – 列举容器中所有的元素
2.有序列表:ol~li
ol标签 – 表示整个列表
li标签 – 表示列表中的元素
3.自定义列表:dl-dt-dd
dl – 表示整个列表
dt – 分类
dd – 每个分类中的元素

图片和超链接

1.图片标签:img
src属性 – 图片地址
可以是本地图片的相对路径;也可以是是网络的图片地址
title属性 – 设置图片标题(鼠标悬停在图片.上的时候才会显示)
alt属性 – 图片加载失败的提示信息
空 – 刷新(重新加载页面)
2.超链接
(1)标签内容 – 超链接可点击可看见的部分
(2)href属性 – 跳转目的地
网页的地址 – 直接跳转到指定的网页
本地的html文件路径 – 直接打开HTML文件对应的页面
id选择器(id属性值前加#) – 将当前页面滚动到id选择器指定的位置
(3)target属性 – _self(默认值),在当前页面中加载新的页面
_blank,在新的窗口中加载新的页面

表格标签

1.表格标签:table-tr-td
table标签 – 表示整个表格
tr标签 – 表示一行
td标签 – 表示一个单元格
table:
border属性:设置边框线的宽度(默认值是0)
cellspacing属性:设置单元格和单元格之间的间隙(默认是1)
cellpadding属性:设置表格内容和边框之间的距离
bgcolor属性:设置整个表格的背景颜色
height width:高度 宽度
align属性:left right center;设置整个表格在网页中的居中方式
colspan属性：列的合并
rowspan属性：行的合并

表单标签

表单标签:form
是一个容器标签,本身单独用没有意义,一般需要结合表单相关的标签(input,select,textarea)来使用
它可以对表单标签中所有用户信息收集相关的标签的内容进行整体的重置和提交

action属性 – 后端数据接口的地址
method属性 – 请求方式(get/post)

input标签

input是表单相关标签，可以放在form标签中做数据的提交和重置
1)type属性 - 设置标签类型

<!--a. text(默认值) -   普通文本输入框value属性  - 和输入框中的内容是关联name属性  - 用来区分不同的数据和对数据进行提交的（因为提交数据的是是以 name=value 的形式提交）placeholder属性 - 设置输入的提示信息disabled属性  - 设置为disabled，表示标签不可用maxlength属性 - 设置最多能够输入的字符的个数b. password  -  密码输入框value属性  - 和输入框中的内容是关联name属性  - 用来区分不同的数据和对数据进行提交的（因为提交数据的是是以 name=value 的形式提交）placeholder属性 - 设置输入的提示信息disabled属性  - 设置为disabled，表示标签不可用maxlength属性 - 设置最多能够输入的字符的个数c.radio  -  单选按钮value属性  -  单选选中的时候被选中的值(选项值)name属性  -  提交和区分以外，还可以将相同的name作为一个组，在同一个组中只能选中一个选项checked属性 - 值设为checked表示默认选中d.checkbox - 复选按钮value属性  -  单选选中的时候被选中的值(选项值)name属性  -  提交和区分以外checked属性 - 值设为checked表示默认选中e.button  -  按钮value属性 - 按钮上显示的文字f.submit   -  提交按钮将当前表单中所有设置了name属性的标签内容，以 name=value的形式提交g.reset    -  重置按钮将当前表单中所有表单相关的标签状态变成初始状态-->

<form action="" method="get"><h1>text</h1><label for="i1">用户名：</label><input id="i1" type="text" value="小明" name="userName" placeholder="请输入账号" /><br><br><label for="i2">邮箱：</label><input id="i2" type="text" name="e_mail" placeholder="请输入邮箱"/><h1>password</h1><label for="i3">密码：</label><input id="i3" type="password" value="123456" name='pw' placeholder="请输入密码"/><h1>radio</h1><input id="i4" type="radio" value="男" name="sex" checked="checked"/><label for="i4">男</label><input id="i5" type="radio" value="女" name="sex"/><label for="i5">女</label><!-- 选择婚姻状态页面：已婚、未婚、保密(默认) --><h1>checkbox</h1><input type="checkbox" name="sport" id="s1" value="乒乓球" checked="checked"/><label for="s1">乒乓球</label><input type="checkbox" name="sport" id="s2" value="篮球" /><label for="s2">篮球</label><input type="checkbox" name="sport" id="s3" value="游泳" /><label for="s3">游泳</label><input type="checkbox" name="sport" id="s4" value="羽毛球" /><label for="s4">羽毛球</label><h1>button</h1><input type="button"  value="确定" disabled="disabled"/><input type="button"  value="取消" /><button type="button">删除</button><button type="button"><img src="img/aaa.ico" ><span>删除</span></button><h1>submit和reset</h1><input type="submit" name="" id="" value="提交" /><input type="reset" name="" id="" value="重置" /></form><h1>其他的input标签</h1>显色选择器：<input type="color" name="bgcolor" /><br><br>时间选择器: <input type="time" name=""/>日期选择器: <input type="date" name=""/>时间和日期：<input type="datetime-local" name=""/><br><br>选择头像：<input type="image" src="img/anchor.png"/>文件选择器: <input type="file" name="" id="" value="" />

select和textarea

1.下拉列表:select-option
name属性 – 是select属性,用于提交的区分
value属性 – 是option属性,表示当前选项的选项值和提交数据
select属性 – 是option属性,设置默认选中的项
option标签内容 – 用来展示选项
2.select-optgroup-option – 选项分组标签
3.多行文本域 – textarea
rows属性 – 设置一次最多能显示的行数(默认2)
cols属性 – 设置一行的列数
name属性 – 用于区分和提交
maxlength – 限制最大输入字符的个数

div和span

div和span本身无语义,也是html中比较轻量级的标签
   1.span  –  用于一行显示多个内容的时候
   2.div  –  主要用于界面标签的分块和分组