前端修炼——html、css入门！

---

一、html

1. HTML 概述: HyperText Mark-up Language 超文本标记语言

2. 作用：在浏览器中显示页面

3. 结构标签

   • html 根标签
   • head 头标签
   • title 标题标签
   • body 体标签

4. 标签的分类

   • 双标签
     
     • 嵌套其他标签、可以包裹内容
     • 可以给嵌套的标签设置样式
   • 单标签（自闭合标签）
     
     • <br /> 换行
     • <hr /> 一条线
     • <img /> 图片
     • <input /> 按钮

5. 标签之间的关系

   • 嵌套关系，父子标签
   • 并列关系，兄弟标签

6. 常用标签

   • （html）注释：<!– –>
   • 标题标签
     
     • 应用场景：新闻标题、小说的标题，文字性的网页用的比较多
     • 特点：
       
       • 自带换行
       • h1~h6：字体依次变小
       • 如果超出 h1 到 h6 就相当于没有写标签
   • 段落标签
     
     • <p></p>
     • 应用场景：
       
       • 用于描述一段文字
       • 浏览器缩小会自动换行
   • 特殊字符
     
     • 空格：&nbsp；
     • 默认情况下：在HTML页面中空格、换行默认只显示一个空格
   • 图片标签
     
     • 应用场景：显示图片
     • img：单标签
     • 属性：
       
       • src：表示图片的路径
       • alt：找不到图片的默认提示问题
       • title：鼠标放到图片上面会有提示问题
     • 常见的异常：
       
       • 图片路径写错了：Failed to load resource: net::ERR_FILE_NOT_FOUND
     • 路径
       
       • 页面和图片在一个文件夹下，直接写图片名字
       • 图片在页面的下一级目录，文件夹名/图片名
       • 页面在上一级目录，../图片名
   • 超链接：
     
     • 应用场景：页面跳转
     • 特点：
       
       • 字体默认有下划线
       • 字体是蓝色的
       • 鼠标放到上面会变成小手

7. 块级元素和行内元素

   • 块级元素：
     
     • div：没有任何意义，一般用来包裹其他标签
     • p h1~h6 ul
     • 独占一行，默认和浏览器一样宽
     • 应用：用来嵌套其他标签
   • 行内元素：
     
     • span a i u
     • 默认情况下，宽度包裹内容
     • 应用：显示文字，不去包裹其他标签
     • 但是 a 标签除外，它是一个特殊的标签

8. 标签的语义化

   • 在合适的地方用合适的标签
   • 没有语义的标签： div span

---

二、css

1. 概述：层叠样式表

2. 作用：美化页面

3. 写法：选择器 {属性名: 属性值;}

4. 把 CSS 样式引入页面的三种方式：

   在 head 标签中写 style 标签（讲课中使用）

   ​ <style><style>

   给标签中设置 style 属性（js中用的多）

   ​ <div style=”background: red; width: 200px; height: 200px”>\

   引入外部文件的方式（工作中推荐使用）

   ​ <link rel=”stylesheet” href=”css/main.css”>

5. 常用的选择器

   • 标签选择器
     
     • 给同一个页面中的所有相同的标签设置统一的样式
   • 类选择器
     
     • 给使用了 class 属性的标签设置统一的样式
     • 相当于人名，可以重复使用
   • ID 选择器
     
     • id 在页面中唯一，一个页面中只能有一个 id
     • 相当于人的身份证号，不允许重复
   • 后代选择器
     
     • div p{}
   • 多类名
     
     • <div class=”damao dm”>

width: 宽
height: 高
background: 背景色
border: 边框   
margin: 外边距
padding: 内边距
top：上  bottom: 下  left：左  right: 右
font-size: 字体大小
font-family: 字体格式
font-weight: normal;   设置字体不加粗
float: left/right;   左右浮动
height: 设置块元素高度
text-decoration: none;  去掉下划线
text-indent:   首行缩进
line-height:   行高
color:   设置字体颜色

css属性

布局常用样式属性：

• width 设置元素(标签)的宽度，如：width:100px;
• height 设置元素(标签)的高度，如：height:200px;
• background 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
• border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

以上也可以拆分成四个边的写法，分别设置四个边的：

• border-top 设置顶边边框，如：border-top:10px solid red;
• border-left 设置左边边框，如：border-left:10px solid blue;
• border-right 设置右边边框，如：border-right:10px solid green;
• border-bottom 设置底边边框，如：border-bottom:10px solid pink;
• padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
• margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
• float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

文本常用样式属性一：

• color 设置文字的颜色，如： color:red;
• font-size 设置文字的大小，如：font-size:12px;
• font-family 设置文字的字体，如：font-family:’微软雅黑’;为了避免中文字不兼容，一般写成：font-family:’Microsoft Yahei’;
• font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
• line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
• text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
• text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
• text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px