什么是HTML?什么是CSS?
超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。
我们打开浏览器访问的一切内容,都是由网页构成。简单点说,网页就是HTML。本质来说它也是文本,HTML的核心是语义化。
CSS是层叠样式表的缩写,它的核心是层叠(多个属性叠加)。在css中,元素最终呈现在用户眼中的效果,往往是经过多种样式重叠之后形成的。
一个网页可以分为:结构、样式以及行为。而HTML就是整个网页的结构部分。CSS是负责网页样式的存在 。
HTML标签
HTML最重要的就是标签了,HTML标签主要分为功能性标签和辅助性标签,在2014年10月28日 推出的HTML5中又新添加了三类标签:语义化结构标签、语义化功能标签和多媒体标签。值得注意的是HTML中存在两个无语义的标签:div和span。
1. 功能性标签
列表:有序列表 ol li、无序列表 ul li、自定义列表dl dt dd
图片:<img src="" alt="">
超链接:<a href="" target=""></a>
网页分割:div、span
表格:table、tr、td、th
表单:input、select、option、button、label…
通过表单和表格结合,可以快速的完成布局,实现数据的收集。
2. 辅助性标签
p 段落
hr 水平线
del 删除线
strong 加粗强调
h1-h6 标题标签
br 换行
pre 预格式文本
i 斜体字体
em 倾斜强调
3. 语义化结构标签
header
footer
main
section
article
aside
figure
nav
…
4. 语义化功能标签
meter
progress
output
…
5. 多媒体标签
音频
视频
flash
CSS样式
1. 使用方式
-
内部样式表(位于
<head>
标签的内部)
写法:<style>css语句</style>
-
内联样式表(在html元素的内部)
写法:<div style="color:red;"></div>
-
外联样式表(通过link标签和style标签链接外部样式表)
写法:<link rel="stylesheet" href="目标文件的路径及文件全称">
或<style>@import url(目标文件的路径及文件名全称);</style>
-
优先级
内联样式表的优先级最高,内部样式表与外部样式表的优先级和书写顺序有关。(后来居上)
2. css选择器
-
三大基础选择器
id选择器 (id是唯一的,精准度最高):#id名 {css语句;}
class选择器:.class名 {css语句;}
html标签选择器:标签名 {css语句;} -
高级选择器
*
通配符 (选择所有的标签,效率太低,很少用):* {css语句;}
.d1 ,.d2 并集选择器(群组选择器):.d1 ,.d2 {css语句;}
div .d1 交集选择器: div .d1 {css语句;}
.d1 .d2 后代选择器: d1 .d2 {css语句;}
.d1>.d2 子元素选择器:.d1>.d2 {css语句;} -
css3选择器
属性选择器
结构伪类选择器
目标伪类选择器
ui状态伪类选择器
否定伪类选择器
动态伪类选择器
3.常用核心属性
- 全局属性
title、id、class - 文本属性
color 字体颜色、font-size 字体大小、text-align 水平对齐方式、font-family 文本字体、font-weight 文字加粗、text-decoration 文本修饰、text-transform 检索英文字母大小写、vertical-align 垂直对齐、text-indent 首行缩进、line-height 文字行高… - 表格属性
border 边框、width 宽度、rules 边框显示规则、cellspacing 单元格到单元格之间的距离、cellpadding 单元格到内容的距离、align 行内的内容对其方式、colspan 横向合并、rowspan 纵向合并… - 列表属性
list-style-type 列表符号样式、list-style-image 使用图片作为列表符、list-style-position 定义列表符号的位置、list-style 简写… - 背景属性
background-color 背景颜色、background-image 背景图片、background-repeat 背景图片重复平铺、background-position 背景图片的位置、background-attachment 背景图片固定… - float属性
float:left/right/none;
标签分类
标签划分角度其实可以分为两个角度,HTML角度和CSS角度。
-
从HTML 角度来说:
容器级标签:ul li ol li dl dt dd div…
文本级标签:i em b strong p … -
css的角度来说:
其实又可以划分成四类:
行内元素:a i em b…
块级元素:div h1 p
行内块元素:input(only)
可变元素:根据上下文才能确定元素类型是块级还是行内元素
applet-javaapplet、button、del、iframe-inline frame、ins、object-object、map、script
以上谈不上总结,算是对以前知识点的一点点的回顾,稍后更加精彩!