Web前端：HTML-CSS_前端 cxml-优快云博客

本文介绍了Web标准的三大组成部分HTML、CSS和JavaScript的基本概念与用法，并详细讲解了常用的HTML标签及其属性。同时，文章还介绍了VSCode的快捷键和扩展插件，帮助初学者快速上手。

一、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{} 用于设置鼠标移入时的样式