一、web标准构成
HTML:超文本标记语言
CSS:层叠样式表
网页主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
结构用于对网页元素进行整理和分类,该阶段主要学的是HTML。
表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
行为是指网页模型的定义及交互的编写,该阶段主要学的是Javascript。
二、VS Code
2.1.快捷键
快捷键 | 使用说明 |
---|
Ctrl+/ | 使用注释 |
Arl+Shift+上下键 | 快速复制 |
Ctrl+Enter | 光标回车 |
2.2.拓展
Chinese (Simplified) Language Pack
Live Server
open in browser
三、HTML
3.1常用标签
3.1.1.基础
<!--...--> 定义注释
<!DOCTYPE> 定义文档类型
<html> 定义HTML文档
<head> 定义关于文档的信息
<title> 定义文档的标题
<body> 定义文档的主体
<h1> to <h6> 定义 HTML 标题
<p> 定义段落
<br> 定义简单的换行
<hr> 定义水平线
<meta> 定义关于 HTML 文档的元信息
3.1.2.图像/音频/视频
<img> 定义图像
常用属性:src 属性 和 alt 属性
<audio>定义声音内容
src属性:要播放的音频的 URL
controls属性:显示控件,比如播放按钮
<video> 定义视频
<source>定义媒介源
说明1:对于不支持audio标签的浏览器会显示提示语,而支持该标签的会忽略。
<audio src="someaudio.wav" controls>
您的浏览器不支持 audio 标签。
</audio>
说明2:不同的浏览器可能支持不同格式的音视频,可用以下方法解决
<audio controls>
<source src="someaudio.wav"> (source标签只解析一次,当执行该代码时不再解析下面的代码)
<source src="someaudio.mp3">
</audio>
3.1.3.链接
<a> 定义链接,,行内元素
href 属性:必要属性,连接地址;值为#时返回顶部;值为#+id名时返回对应地址。
target 属性:可选值:_self(默认可省,在当前窗口打开)、_blank(在新窗口打开)
<nav>定义导航链接
<link>定义文档与外部资源的关系,只能存在于 head 部分,无结束标签
3.1.4.列表
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表的项目
3.1.5.其他
<time>定义日期/时间
<style>定义样式信息,
位于 head 部分中
该标签内遵循CSS编写规范,与HTML无关,如:不能添加标签,注释为:/* ---*/
标签名{} 可为对应标签设置样式
<div> 定义文档中的节,无实际意义,块元素
<span>定义文档中的节,只显示内容,无实际语义,行内元素
3.2.HTML注意事项
块元素内部既可以包含块元素,也可包含行内元素;行内元素内部只能包含行内元素而不能有块元素。
四、CSS
4.1.CSS引用
外部样式引用:
单独建立CSS文件,在<head>标签内通过<link href="XXX.css">标签引用
内部样式表:
在<dead><style>CSS代码</dead></style>
内联样式表:
在标签style属性中设置样式
4.2.选择器
元素选择器:
语法:标签名{}
作用:根据标签名选择指定元素
id选择器:
语法:#id值{}
作用:id值唯一,选择对应id的一个元素,如果没有则不生效
class选择器:
语法:.class值{}
作用:适合多个样式采用同一套样式的时候使用;一个标签可有多个class值,中间空格分离
统配选择器:
语法:*{}
作用:选择所有元素
交集选择器:
语法:选择器1选择器2选择器3选择器n{}
作用:选中同时符合多个条件的元素
注意:若有元素选择器,需以元素选择器开头
例:将class为red的div元素字体设置为30px:
<style>
div.red{font-size:30px;}
</style>
----------------------------
<div class="red">123</dicv>
<p class="red">456</p>
并集选择器:
语法:选择器1,选择器2,选择器3,选择器n{}
作用:同时选中多个选择器对应元素
例:h1,span{color:red;}
属性选择器:
标签名[属性]{} 选择含有指定属性的元素
标签名[属性=属性值]{} 选择含有指定属性和属性值的元素
标签名[属性^=属性值]{} 选择属性值指定内容开头的的元素
标签名[属性$=属性值]{} 选择属性值指定内容结束的的元素
伪选择器:
标签名:nth-child(n){} 表示第n个子元素
a:link{} 表示未访问的连接
a:visited{} 表示已访问的连接,只能改颜色
标签名:hover{} 用于设置鼠标移入时的样式