一、HTML的基本概念和结构
1.HTML的基本概念
网页三剑客：
HTML 超文本标记语言 【结构】 - 机器人的身体结构
CSS 层叠样式表 【样式】 - 机器人的衣服
JavaScript JS、交互 【交互】 - 机器人走路、说话、跳舞
HTML的概念：
超文本标记语言 Hyper Text Markup Language
2.HTML的基本结构
<!doctype> 规定了html版本
<html></html> 根标签 网页的所有内容
<head></head> 头部标签 网页的编码方式、标题、资源文件
<body></body> 主体标签 浏览器里显示的文字、图片、音视频
<title></title> 标题标签
<meta charset="utf-8"/> 单标签
二、标签的概念、写法、分类
1.标签的概念
如果把html比作建筑里的毛坯房
Html网页的基本结构，标签就是组成网页的基本结构的元素
学习HTML的技术点：重点掌握常用标签、并且熟练使用
2、如何书写标签
<标签名>内容</标签名>
标签可以嵌套
3.标签的分类：
单标签（br hr meta）、双标签
行内标签、块级标签
行内标签：不会独占一行，他和行内标签都在一行里面 b、i、s、u、span
块级标签：独占一行，没有可以和他在一行 h1-h6 p div
三、标签的属性、注释的作用
1.html标签的属性：
标签的属性是用来描述标签的一些特性。
写法：
<标签名 属性名=“属性值”/>
<meta charset="utf-8"/> 设置网页的编码方式为utf-8
<标签名 属性名=“属性值” 属性名2=“属性值”>内容</标签名>
2.注释：
阐述某段代码的含义
注释的内容，不会被浏览器解释执行，不会再网页上有任何显示
写法：<!- -注释- ->
四、常用的标签
1.Hbuilder快捷键
ctrl+/（？）：快速注释光标所在行
选中代码+ctrl+/：注释选中代码
ctrl+A：全选
ctrl+X：剪切
2.结构标签
title 标题标签
meta 元标签
html 根标签
body 主题标签
head 头部标签
3.b、i、u、s
b 加粗
i 斜体
u 下划线
s 删除线
h1-h6 标题标签
p 段落标签
hr 单标签 分割线
br 单标签 换行
span 行内元素、包裹标签、容器标签
div 块级元素
五、常用标签二
1.标签的通用属性：
id 唯一标识 自定义
强调：在同一个网页上id值不能相同；一个id只能由一个值，不能存在多个值
style 样式操作 语言规定
title 提示信息 自定义 鼠标触碰时显示的提示信息
class 制定样式类名 自定义
强调：同一个网页里class值可以相同，可以同时拥有多个属性值
<标签名 属性名="属性值1 属性值2"></标签名>
不同标签，会有一些自己特别的属性
属性值：有一些属性值是自己定义的，一些是语言规定好了的
2.img 图片标签
src 指定图片地址url
alt 当图片显示不出来时的提示文字，方便我们搜索
路径问题：
绝对路径：固定存放在某个服务器的地址上，或者以某个电脑盘符根目录为开始存放的整个路径
相对路径（发给别人看时）：同级：直接写文件名称，或者./文件名称
向上:../ 向上一层
向下:文件夹名称1/文件夹名称2/。。。/文件名称
3.a标签：超链接标签
<a href="" target=""></a>
href 指定跳转地址
绝对路径：http://www.baidu.com
相对路径：ccc/index2.html
target
_self 当前tab打开新网页 默认
_blank 新建tab打开新网页
如何书写一个锚点
<a href="#id值">内容</a>
<标签 id="值"></标签>
4.列表标签：
ul li 无序列表
注意ul下一层只能出现li，不能是其他内容
type属性：指定前面点的样式
sqare 方形
circle 空心圆
disc 实心圆 默认
ol li 有序列表
type属性：指定前面序号显示类型
1 数字
a 小写字母
A 大写字母
I 大写罗马
i 小写罗马
5.旧标签和转义字符
strong 加粗
em 倾斜
small 变小
转义字符：
空格  
版权标志 ©
小于< <
大于> >
& &
六、常用标签三
1.表格标签（制作简历）
table 表格
border属性 边框属性 值 数字
width属性 宽度 值 数字
height属性 高度 值 数字
cellpadding 单元格内容到单元格边框的距离(左右) 值 数字
cellspacing 单元格和单元格之间的距离摆放位置
align 规定表格水平 值 left center right
valign 表格垂直摆放方式 值 top middle bottom
tr 行
height 高度
align 这一行文本内容水平摆放方式
valign 这一行文本内容垂直摆放方式 值 top middle bottom
td 单元格
height 高度 会影响这一行所有单元格的高度
weight 宽度 会影响这一列所有单元格的宽度
align 文本内容水平摆放方式
valign 文本内容垂直摆放方式 值 top middle bottom
合并单元格
colspan 指明这个单元格横向占据几个单元格的宽度 默认为1
rowspan 指明这个单元格纵向占据几个单元格的高度(向下占据，写在要合并的上面单元格) 默认为1
简写 tr*3>td*3 按下tab 快速生成三行三列
表格的语义化标签
thead 表头
th 单元格第一行，内容水平居中，文字加粗
tbody
tfoot 表尾
2.表单标签
表单：用于获取网络用户数据，提交给网站管理者的一种渠道
form 表单标签 包含整个表单标签相关的控件
action属性 提交地址
method 提交方式 get/post
enctype 提交数据类型
input 表单控件 单标签
type属性
text 文本输入框
password 密码输入框
radio 单选框（必须与name属性绑定为一组）
checkbox 复选框
range 拖动条
color 取色器
file 文件上传控件
submit 提交按钮 value 修改显示内容
reset 重置按钮
button 按钮
select 下拉列表控件
size属性 指定下拉列表高度
multiple属性 指定可以多选 multiple 值 （属性名与属性值相同时,可以只写属性值）
option标签（下拉列表项）
disable属性 禁用 不可选
textarea 多行文本输入域
rows属性 cols属性
label标签 点击文字部分也可以选中
用法一：label将文字和控件包含到一起
用法二：空间一个id属性，label的for属性关联这个id属性，把文字包含起来
input file 上传控件
multiple 指定可以上传多个文件
form标签里如果有input提交按钮和重置按钮（type的值必须为submit reset）
3.框架标签
iframe 框架标签 用于在一个网页里打开另外一个网页
src 指定显示的网页地址
width 网页宽度
heigth 网页高度
frameborder 值 0 1 yes no 是否显示边框
scrolling 值 yes auto no 是否显示滚动条
5648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
