Web前端高级第一课

Web前端一

1.HTML

HTML是什么？

HTML（超文本标记语言）是用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源。HTML文件的文件扩展名为.htm或.html。

Web浏览器

如:谷歌浏览器，Internet Explorer，Firefox，Safari 是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

HTML 元素语法

• HTML 元素以开始标签起始
• HTML 元素以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content）
• 空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性

CSS

CSS修饰标签的样式，有 “内联” 和 “外引” 两种方式。

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如:a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。

举个栗子：

 <a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>

字体

• 字号： font-size
• 颜色： color
• 字体： font-family
• 行高： line-height
• 加粗： font-weight
• 字体样式： font-style 如： normal,italic,oblique
• 复合属性： font

文本

• 对齐： text-align
• 缩进： text-indent
• 修饰： text-decoration 如：none,overline,line-through,underline。

盒模型

• 宽高： width,height
• 单位： 像素
• 实际书写区域： width+height
• 实际占有区域： width+height+border+padding

内边距：padding

• padding-top :10px
• padding-right
• padding-bottom
• padding-left

边框：border

• border-top: 10px solid blue
• border-right
• border-bottom
• border-left
• 边框颜色：border-color:#ff009
• 边框宽度：border-width:10px
• 边框样式：border-style:
  1. solid 实线
  2. dashed 虚线
  3. dotted 点线
  4. double 双线
  5. groove 边框凹陷
  6. ridge 边框凸出

外边距：margin

与padding一致

特殊用途：制作盒子水平居中

盒子本身宽度设置，margin值上下随意，左右值 auto

HTML中的行级标签和块级标签

一、块级标签

• 1.独占一行，不和其他元素待在同一行
• 2.能设置宽高
• 常见的块级标签： div,p,h1-h6,ul,li,dl,dt,dd

二、行级标签

• 1.能和其他元素待在同一行
• 2.不能设置宽高
• 常见的行级标签： a，span,strong,u,em–>

三、行内块标签

• 1.能和其他元素待在一行
• 2能设置宽高
• 常见的行内块标签： img,input,textarea

属性值

块级：block;行内：inline;行内块：inline-block

块级转行内：

display: inline;

行内转块：

display: block;