HTML常用标签

HTML

• 作用： 负责搭建页面结构和内容 （盖房子毛坯房）
• 全称：HyperTextMarkupLanguage： 超文本标记语言
• 超文本： 指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）
• 标记语言格式：

<开始标签 属性=“xxx”> 标签体 </结束标签>

常见的文本标签

• 标题标签：<h1>-<h6>， <h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减h是英文header（标题）的缩写
  • 特点： 独占一行， 字体加粗， 自带上下间距
• 段落标签：<p>这是一个段落</p>p是paragraph（段落）的缩写
  • 特点：自带换行
• 链接标签：<a></a> 例如：<a href="https://www.baidu.com">百度一下</a> a是anchor（锚点）的缩写
• 图片标签：<img> 例如：<img src="photo.png" width="206" height="36">img是自关闭元素，不需要结束标记
• 斜体标签：<em></em> 例如：我要<em>谢谢你</em>的好 em是emphasis（强调）的缩写
• 加粗标签：<strong></strong> 例如：你<strong>太客气</strong>了strong是strong importance（强烈的重要性）的缩写
• 水平分割线：<hr>
  • 特点： 独占一行 自带上下间距
• 换行： <br>
• 加粗：<b></b>
• 斜体：<i></i>
• 下划线：<u></u>
• 删除线：<s></s>
• 小号字：<small></small>
• 下标字：<sub></sub>
• 上标字：<sup></sup>
• 插入字：<ins></ins>
• 删除字：<del></del>
• 注释：<!-- 这是一个注释 -->

html属性

• class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)
• id：定义元素的唯一id
• style：规定元素的行内样式（inline style）
• title：描述了元素的额外信息 (作为工具条使用)

HTML计算机输出标签

• 定义计算机代码
• 定义键盘码
• 定义计算机代码样本
• 定义变量

•  	定义预格式文本
  

列表标签

无序列表： ul 和 li (unordered list : 无序列表)
有序列表： ol 和 li (ordered list : 有序列表) (list item : 列表项)
列表嵌套： 有序列表和无序列表可以任意无限嵌套

图片标签img
src：资源路径
相对路径：访问站内资源使用
图片和页面在同级目录： 直接写图片名
图片在页面的上级目录： …/图片名
图片在页面的下级目录： 文件夹名/图片名
绝对路径： 访问站外资源使用
alt : 当图片不能正常显示时显示的文本
title : 鼠标在图片上悬停时显示的文本
width/height : 设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比 如果只设置宽度高度会等比例缩放

超链接a
href: 资源路径 作用类似图片标签的src
a标签包裹文本为文本超链接, 包裹图片为图片超链接
页面内部跳转, 在目的地元素里面添加id属性, 然后通过超链接href="#id"的方式跳转到目的地元素的位置

表格标签table
相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
相关属性: border边框 colspan跨列 rowspan跨行

表单form
作用:获取用户输入的各种信息并且把这些信息提交给服务器
需要学习form表单中的各种控件, 包括: 文本框,密码框 单选,多选,下拉选,日期选择器,文件选择器, 各种按钮等
相关代码：

*<!--action设置提交地址-->
<form action="http://www.tmooc.cn">
    <!--placeholder占位文本 value设置默认值 maxlength最大字符长度-->
    用户名:<input type="text" name="username" maxlength="5" value="tom"
               placeholder="请输入用户名" readonly><br>
    密码:<input type="password" placeholder="请输入密码"><br>
    <!--单选框中value必须写 不写则提交on checked设置默认选中-->
    性别:<input type="radio" name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w" id="r2">
    <label for="r2">女</label><br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:<select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <!--selected设置默认选中-->
    <option value="gz" selected>广州</option>
</select><br>
    <!--提交按钮-->
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset">
    <!--自定义按钮-->
    <input type="button" value="自定义按钮">
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">自定义按钮</button>
</form>*

CSS
层叠样式表
作用： 负责美化页面 （装修）

如何在html页面中添加CSS样式代码
内联样式：在标签的style属性中添加样式代码, 弊端:不能复用
内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用
外部样式：在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用,可以将样式代码和html代码分离开.
工作中外部样式使用的最多, 学习过程中内部样式用的多

选择器
标签名选择器
格式: 标签名{样式代码}
匹配页面中所有同名标签
id选择器
格式: #id{样式代码}
当需要选择页面中某一个元素时使用
类选择器
格式: .class{样式代码}
当需要选择页面中多个不相关元素时, 给多个元素添加相同的class属性值即可
分组选择器
格式: p,#abc,.xyz{样式代码}
将多个选择器合并为一个选择器的写法
属性选择器
格式: 标签名[属性名=‘值’]{样式代码}

分区标签
可以理解为是一个容器,将多个有相关性的标签添加到一个分区标签里面, 便于统一管理
常见的两种分区标签:
div:块级分区元素, 特点: 独占一行
span: 行内分区元素, 特点: 共占一行
如何对页面内容进行分区:
一个页面至少分为3大区, 头/体/脚, 每一个大区再划分n个小区

<div>头</div> 
<div>体</div> 
<div>脚</div>

html5标准中新增了几个分区标签,作用和div一样,为了提高代码的可读性 ,包括: header头,footer脚,section区域, article文章/正文, nav导航

<header></header>
<section></seciont>或<article></article>
<footer></footer>

选择器(续)

子孙后代选择器
格式: body div div p{样式代码}
上面格式匹配的是body里面的div里面的div里面的元素p里面的内容,包含小于第二次div以及p的所有元素

子元素选择器
格式: body>div>div>p{样式代码}
上面格式匹配的是body里面的div里面的div里面的元素p里面的内容,不包含其他子元素

伪类选择器
选择的是元素的状态,包括以下四种状态
a:link未访问状态
visited访问过的状态
hover悬停状态,鼠标放在上面时的状态
active点击状态,点击时的状态{代码 例如 : color:red}

选择器回顾
标签名 div{}
id选择器 #id{}
类选择器 .class{}
分组选择器 div,#id,.class{}
属性选择器 input[属性名=‘值’]{}
任意元素 *{}
子孙后代 div div p{}
子元素选择器 div>div>p{}
伪类选择器 a:link/visited/hover/active

颜色赋值
三原色: 红绿蓝 RGB Red Green Blue , 每个颜色的取值范围0-255
五种颜色赋值方式:
颜色单词: red/blue/yellow
6位16进制赋值: #ff0000
3位16进制赋值: #f00
3位10进制赋值: rgb(255,0,0)
4位10进制赋值: rgba(255,0,0,0-1) a=alpha透明度 值越小越透明

背景图片
background-image:url(“路径”) ; 设置背景图片
background-repeat:no-repeat; 禁止重复
background-size: 100px 200px; 设置背景图片尺寸 宽 高
background-position: 横向 纵向; 控制位置, 像素偏移值 和 百分比两种方式
文本和字体相关样式
text-align: left/right/center; 文本水平对齐方式
text-decoration: overline/underline/line-through/none 文本修饰
line-height:20px; 行高, 多行文本可以控制行间距, 单行文本可以实现垂直居中
font-size: 20px; 设置字体大小
font-weight:bold/normal; 设置加粗或去掉加粗
font-style:italic; 设置斜体
font-family:xxx,xxx,xxx; 设置字体
font: 20px xxx,xxx,xxx; 设置字体大小和字体
text-shadow: 颜色 x偏移值 y偏移值 浓度（值越大越模糊）

元素的显示方式display
block: 块级元素的默认值 , 特点: 独占一行,可以修改元素的宽高 , 包括: div,h1-h6,p
inline: 行内元素的默认值, 特点:共占一行, 不可以修改元素的宽高, 包括: span, b,i,s,u,超链接a
inline-block: 行内块元素的默认值, 特点:共占一行, 可以修改宽高, 包括:img,input
none:隐藏元素
行内元素不能修改宽高, 如必须修改 则需要先把display改成block或inline-block

盒子模型
作用: 控制元素的显示效果包括: 尺寸,元素位置,边框,元素内容的位置
盒子模型: 内容+外边距+边框+内边距
内容content: 负责控制元素的尺寸
外边距margin:负责控制元素的位置
边框border:负责控制元素的边框
内边距padding:负责控制元素内容的位置

盒子模型之内容Content
width/height
赋值方式
像素: 200px
上级元素的百分比: 50%
行内元素不能修改宽高

盒子模型之外边距
外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距
赋值方式:

margin-left/right/top/bottom:10px; 单独某个方向赋值
margin:10px; 四个方向赋值
margin:10px 20px; 上下10 左右20
margin:10px 20px 30px 40px; 上右下左 顺时针赋值

上下相邻彼此添加外边距取最大值 ,左右相邻相加
行内元素上下外边距无效
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决
部分标签会自带外边距,比如: body ,h1-h6,p,列表标签

盒子模型之边框
赋值方式:

border-left/right/top/bottom:粗细 样式 颜色; 单独某一个方向添加边框
border:粗细 样式 颜色; 四个方向添加边框
border-radius: 20px ; 圆角, 值越大越圆, 超过宽高的一半为正圆

盒子模型之内边距
内边距: 元素边缘距内容的距离为内边距
赋值方式: 和外边距类似

padding-left/right/top/bottom:10px; 单独某个方向赋值
padding:10px; 四个方向赋值
padding:10px 20px; 上下10 左右20
padding:10px 20px 30px 40px; 上右下左 顺时针赋值
给元素添加内边距会影响元素的宽高

CSS的三大特性
继承性: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带的效果不受继承影响,如:超链接的字体颜色
层叠性: 多个选择器可能选择到同一个元素, 添加的样式不同的时候会全部层叠生效, 如果作用的样式相同则由优先级决定哪个生效
优先级: 作用范围越小 优先级越高, id> class>标签名>继承(继承属于间接选中优先级比较低)

居中相关
text-align:center; 让元素的文本内容居中, 让元素里面的行内元素自身和行内块元素自身居中
margin:0 auto; 让块级元素自身居中
元素定位
静态定位
相对定位
绝对定位
固定定位
浮动定位
静态定位
默认的定位方式, 也称为文档流定位
格式: position:static
特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列 ,无法实现层叠效果
如何控制元素的位置? 通过外边距

相对定位
格式: position:relative
特点: 可以实现层叠效果, 元素不脱离文档流(不管元素显示到什么位置 仍然占着原来的位置)
如何控制元素的位置? 通过left/right/top/bottom让元素相对于初始位置做偏移
应用场景: 当需要移动某个元素而其它元素不受影响时使用(元素位置微调)

绝对定位
格式: position:absolute
特点: 可以实现层叠效果, 元素脱离文档流(不占原来的位置)
如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口或某一个上级元素做位置偏移,如果需要相对于某个上级元素,必须给上级元素设置为相对定位
应用场景: 当需要网页面中添加一个元素, 这个元素不影响其他元素的显示位置时使用绝对定位

固定定位
格式: position:fixed;
特点: 元素固定在窗口的某个位置, 元素脱离文档流
如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口做位置偏移
应用场景: 当需要将元素固定在窗口某个位置时使用

浮动定位
格式: float:left/right
特点: 元素脱离文档流, 从当前所在行向左或向右浮动,当撞到上级元素边缘或其他浮动元素时停止.
浮动元素一行装不下会自动换行, 换行时有可能被卡住
当元素的所有子元素全部浮动时,自动识别的高度为0,后面的元素会顶上来出现显示异常,给元素添加overflow:hidden解决
应用场景: 当需要将纵向排列的元素改成横向排列时使用

显示层级z-index
当元素修改定位方式时,会出现元素层叠的问题, 通过z-index可以控制层叠的元素谁显示在上面 谁显示在下面
必须改了定位方式之后z-index样式才会生效
z-index值越大显示层级越靠前

溢出设置Overflow

visible(默认): 超出部分显示
hidden: 超出部分隐藏
scroll: 超出部分滚动显示