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