HTML与CSS基础-优快云博客

本文介绍了HTML和CSS的基础知识，包括HTML的结构、标签、特性，以及如何使用CSS进行网页样式设计，涵盖了从基本语法到常见元素的应用。

HTML

HTML的全称是Hyper Text Mark-up Language,超文本标记语言。
超文本：页面内可以包含图片，链接，甚至音乐，程序等非文字元素。
标记：与之相对是的编译型语言，标记型语言无需编译，直接可以被解析展示
*特点
可以设置文本的格式，比如可以创建列表标题，字号，文本颜色，段落等
可以插入图像和媒体
可以建立表格
超链接，可以使用鼠标单击超链接来实现页面之间的跳转

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

基础知识点

网页结构

<!DOCTYPE html>	//告诉浏览器当前是一个html
<meta charset="UTF-8">		//声明编码格式 把内容解析成中文简体、英语等
<body><!--主要代码都写在body里--></body>

标题标签和段落标签

h1~h6>标题</h1~h6>标题标签
<p>用来放一篇文章内容</p>段落标签
<br/><!--<br/>换行标签-->
<strong></strong>字体加粗
<em></em>斜体
<div>放置内容<div/>容器、盒子
<hr /><!--水平线标签（开发中不用，水平线常用下边框去做）

超链接

<a href="http://www.baidu.com" target="_self">百度</a>
	href属性：要跳转的目标地址
	target属性：打开新页面的方式： _blank 在新窗口打开
						  		  _self 在当前窗口打开
						     	  默认就是在当前窗口打开
	href="#" 当页面出现滚动条的时候，点击会让滚动条会到顶部
	href="javascript:;"可以解决上一条问题

锚链接

//创建跳转标记
<a name=“maker”>乙位置</a>
//创建跳转链接
<a href="#maker">甲位置</a>

特殊符号

&gt； //大于号
&lt;	//小于号
&quot; //引号
&nbsp;	//空格
&copy；//版权符号

图片标签

//常见图片格式：jpg，gif，bmp，png

<img src="图片路径" alt=“替换文本”	width=“x” height="y"/>

//alt属性：当前图片消失了，告诉用户当前是张图片
//title 属性：给当前图片添加说明

注：不要将大图片修改尺寸用做小图片（缩略图），会影响网页打开速度
相对路径（Relative Path）：相对自身的路径开始
绝对路径（absolute path）：绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
当前：./ 上一级： …/
jpg：图片格式大但是颜色比较丰富，应用于banner（）图，产品图
banner释义：可以作为网站页面的横幅广告，也可以作为游行活动时用的旗帜，还可以是报纸杂志上的大标题

gif ：图片格式小，应用于小图标
png：背景透明，应用于图片后面带背景色

W3C标准

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
1.结构标准语言：可扩展标记语言（标准通用标记语言下的一个子集、外语缩写：XML）；
2.表现标准语言：层叠样式表（外语缩写：CSS）。
3.文档对象模型：（外语缩写：DOM）

标签名称，属性名称必须小写
标签严格嵌套，并且必须闭合，即使空元素，也必须闭合
属性值必须用引号引起来

内联元素和块元素

块元素与内联元素的区别：
块元素：它独占一行，支持宽高（div、p、h1~h6）
内联元素：它只在一行显示，不支持宽高（strong、em、span、i）
块元素可以嵌套内联元素，而内联元素不可以嵌套块元素

选择器

//标签选择器
h2{}
	//直接选中标签，标签选择器以标签名开头
//class选择器
.test{}
	//class选择器以“.”开头 ，命名不要以数字开头，不要用拼音，按模块功能去命名
//id选择器
	//	id选择器以#号开头

选择器的优先级

优先级 id>class>标签
id的名字是唯一的，名字不能重复，所以ID不能复用
id的名字不能与class的名字相同
id一般并不给程序员用的
id应用的场景（一个大的功能模块可以用一个Id去命名）
开发规范：规范代码风格（缩进），命名规范

选择器的应用场景

class是可以复用的，代表同一个样式
一个标签出现多个class时，后面一个会覆盖前面的（前后区分在定义选择器时）相同的标签，class，代码后面的样式会覆盖掉前面的样式
开发项目结构：

css文件夹只放在.css文件
images文件夹只放图片文件
js文件夹只放js文件

css样式写在head里–叫内部样式
link 标签引入css文件–叫外部样式
写在标签中的–叫行间样式
css优先级：内联样式>内部样式>外部样式
开发当中一般都是用外部样式（内联样式和内部样式少用）

引入样式

@import 引入css样式
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器来说是无效的
使用@import导入的CSS文件，客户端先显示HTML结构，再把CSS文件加载到页面当中——先看到html结构在看到样式（先看到身体再看到衣服）

字体样式

font-family: …; 设置字体类型，网站上一般只识别微软雅黑、宋体，其他字体不识别
font-size: …; 设置字体大小,px像素单位
font-style: …; 设置字体风格，italic斜体一般不常用
font-style: normal; 清除字体风格（常用）
font-weight: …; 设置字体粗细(常用：bold加粗、normal清除字体风格)

文本样式

color 设置文本颜色
可以直接写单词如：red
或者使用16进制样色如：#FF0000
text-align 设置文本对齐方式
left、center、right（左中右，默认left）
text-indent 设置首行文本的缩进
后跟像素
line-height 设置文本的行高
后跟像素
text-decoration 设置文本装饰
underline（下划线）、line-through（中划线）、none（清除样式）

伪类

何为伪类?就是css内植类css内部本身赋予它一些特性和功能，也就是你不用再class=…或id=…你就可以直接拿来使用，当然你也可以改变它的部分属性
伪类有：:first-child ，：link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first
在这里插入图片描述