前端三件套之html详解
目录
一 认识
二 标签的分类
三 标签
body标签
标题标签
段落标签
换行标签
水平分割线
文本格式化标签
图片标签
音频标签
链接标签
列表标签
表格标签
表单标签
input标签
下拉菜单标签
textarea文本域标签
label标签
语义化标签
button标签
字符实体
一 认识
HTML(HyperText Markup Language)就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。它是一种建立网页文件的语言，通过标记式的指令(Tg)，将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。HTML网页文件可以使用记事本、写字板、HBuilder、Sublime等编辑工具来编写，以.htm或.html为文件后缀名保存。将HTML网页文件用浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。
ctrl + / 注释
标签的结构图
结构说明：
- 标签由、/、英文单词或字母组成。并且把标签中包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为 双标签 。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自称一体，无法包裹内容。
二 标签的分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
块级元素
元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素
和其他元素都在一行上，元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度（即宽度由内容撑开），不可改变。
行内块状元素
和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
三 标签
body标签
bgcolor 背景颜色 1.颜色名 2.rgb 3.16进制
text 字体颜色 1.颜色名 2.rgb 3.16进制
标题标签
不建议在页面中大量使用h1标签，h1标签可以被搜索引擎(如百度)获取到，如果有多个，可能会进入搜索引擎的黑名单
段落标签
段落会自动换行
常用属性：
align：对齐方式
left 居左对齐
right 居右对齐
center 剧中对齐
justify 两端对齐
换行标签
水平分割线
width 宽度 1.百分比 2.px
align 对齐方式 left right center(默认)
size 水平线粗细
文本格式化标签
font
设置字体相关的标签
常用属性:
color 字体颜色 (颜色名、十六进制、rgb)
size 字体大小
face 字体风格(楷体,黑体,宋体)
pre
定义预格式化的文本 保留文本中的空格和换行.文本呈现等宽字体
strong等 突出重要性的强调语境 可以用右侧的标签 以区分
图片标签
alt 图片加载失败，会显示alt文本
title 鼠标悬停的时候，显示文本信息
width和height属性
相对路径-上级目录
目标文件在上级目录中 ../ 到上一级目录
音频标签
视频标签
目前支持三种格式：MP4、WebM、Ogg
链接标签
行内元素 不会自动换行
href 跳转地址 必须的 如果未设置该属性，则a标签与普通文本没有什么区别
target属性
_self 在当前窗口打开，覆盖该网页
_blank 在新窗口跳转 保留原网页
a标签实现锚点
如果要跳转到当前页面
跳转到指定位置 如下图
列表标签
无序列表 ul 有序列表 ol
自定义列表
关于学成网 关于 管理团队 工作机会 客户服务 帮助 新手指南 如何注册 如何选课 如何拿到毕业证 学分是什么 考试未通过怎么办 合作伙伴 合作机构 合作导师表格标签
table常用属性：
border 边框
width 宽度
像素值或百分比(如果是百分比，参考的是上一级元素的宽度，如果上一级元素未设置，则参考屏幕 宽度)
align 表格的对齐方式
tr常用属性：
align 每行中文本内容的对齐方式
valign 每行中文本内容的垂直方向对齐方式
bgcolor 设置行的背景颜色
css样式
border-collapse: collapse 合并表格边框
合并单元格 rowspan colspan
班级 姓名 性别 数据222 张三 男 数据222 张三 男 caption 标签书写在table标签内部
th 标签书写在tr标签内部(用于替换td标签)
学生成绩单
姓名 成绩 评语 小哥哥 100分 小哥哥真帅气 小姐姐 100分 小姐姐真漂亮 总结 优秀的 meili 合并单元格
跨行rowspan 跨列colspan
表单标签
属性 placeholder 提示
input标签
radio单选框 根据name 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中 check 默认的选中
文件选择 file中属性 multiple 多文件选择
按钮
示例：
下拉菜单标签
城市: 北京 上海 河南 北京 上海 河南 北京 上海 河南 北京 上海 河南 城市: 请选择城市 北京 上海 河南
textarea文本域标签
label标签
1.姓名： 2.姓名：
点击男女就可以选中
语义化标签
没有语义的布局标签
div标签：一行只显示一个(独占一行)
span标签：一行可以显示多个
有语义的布局标签
字符实体
空格
button标签
字符实体
