前端基础学习1 | Web、Html、CSS
1、Web 基础知识
Web （www World Wide Web），全球广域网，也称万维网，能够通过浏览器访问的网站
Web网站的工作流程
Web标准，也称为网页标准，由一些列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。
Web标准由三个部分组成：
- HTML：负责网页的
结构（页面元素和内容） - CSS：负责网页的
表现（页面元素的外观、位置等页面样式，如：颜色、大小等） - JavaScript：负责网页的
行为（交互效果）
2、HTML 基础知识
2.1 什么是HTML
HTML（Hyper Text Markup Language）：超文本标记语言。
- 超文本，指超越文本限制，比普通文本更强大，除了文字信息外还可以定义图片、音频和视频等内容。
- 标记语言，指由标签构成的语言
- HTML标签都是预先定义好的，例如：
<a>表示超链接，<img>展示图片。 - HTML代码可以直接在浏览器中运行，HTML标签由浏览器解析。
- HTML标签都是预先定义好的，例如：
HTML文件后缀都为.html
HTML代码的特点：
- HTML标签不区分大小写（一般都用全小写）
- HTML标签属性值单双引号都可以
- HTML语法比较松散
- HTML无法直接识别多个空格，通常用
这一连串的符号表示空格。
HTML代码注释方式：<!--注释内容-->
标准的HTML代码格式：
<!-- 声明文档类型为 HTML -->
<! DOCTYPE html>
<html lang="en">
<head>
<!-- 设置该部分内容字符集为 UTF-8，以便兼容中文 -->
<meta charset="UTF-8">
<!-- 设置浏览器兼容性-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网站标题 -->
<title>网页标题</title>
</head>
</html>
2.2 HTML常用标签
相关链接：HTML 标签参考手册 (w3school.com.cn)
- 图片标签：
<img src="" width="" height=""></img> - 标题标签：
<h1> 、<h2> ... <h6> - 水平线标签：
<hr> - 行内标签：
<span> - 超链接标签（跳转网页）
<a href="跳转链接" target="跳转方式">显示文字</a>- 跳转方式主要有两种：
__self在当前页面跳转（默认值），_blank重新打开一个页面并跳转。
- 跳转方式主要有两种：
- 视频标签：
<video>- src ：规定视频的 url
- controls：显示播放控件
- width：播放器的宽度
- height：播放器的高度
- 音频标签：
<audio>- src：规定音频的 url
- controls：显示播放控件
- 段落标签
<p> - 文本加粗标签：
<b> / <strong> - 换行标签：
<br> - 布局标签：
<div>和<span><div>又称作空标签，其特点有：- 独占整行，一行只显示一个
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可设置宽高（width和height）
<span>即行内标签，其特点有：- 不占行，一行可显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width和height）
- 表格标签:
<table>
| 标签 | 描述 | 属性/备注 |
|---|---|---|
<table> |
定义表格整体，可包括多个<tr> |
border: 规定表格边框的宽度。width: 规定表格的宽度。cellspacing：规定单元之间的空间。 |
<tr> |
表格的行，可包括多个<td> |
|
<td> |
普通单元格，可包括内容 | 若是表头单元格，可替换为 <th> |
-
表单标签：
<form>（最重要的）-
在网页中表单标签主要负责数据采集，比如注册、登录等。
-
常用表单项标签
<input>：定义表单项，通过 type 属性控制输入形式<select>： 定义下拉列表<textarea>： 定义文本域
-
属性
action：规定表单提交的位置method：规定用于发送表单数据的方式，GET（默认）、POST等
-
登录案例
<form action="user/login" method="post"> 用户名: <input type="text" name="username"> 密码: <input type="password" name="password"> <input type="submit" value="登录"> </form> -
提交表单时 GET 和 POST的区别：
- GET：在地址栏后拼接表单数据，如：?username="uni"&password="123", 地址栏长度有限制，是method属性的默认值
- POST：在消息体（请求体）中传递信息，参数大小无限制。
-
2.3 HTML 标签属性值
HTML每个标签都可以设置多个属性值，例如之前的<img>标签可设置src、width和height。
除此之外，最重要的是每个HTML标签都可以设置 id 、 name和``class` ，这将用来区分不同的HTML标签。
后面的``CSS和 JavaScript在选择HTML标签时可通过id 选取一个标签，或者通过class` 选取一类标签。
3、CSS 基础知识
CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。
相关链接：CSS 参考手册 (w3school.com.cn)
3.1 如何使用 CSS
CSS引入方式：
-
行内样式：写在标签的 style属性中（不推荐）。
<h1 style="font-size:1.5em;"></h1> -
内嵌样式：写在 style标签中（可写在页面任何位置，但通常写在head标签中）。
<style> h1{ font-size: 1.5em; } </style> -
外联样式：写在一个单独的
.css文件中（需要通过 link标签在HTML网页中引入）。/* style.css */ h1{ font-size: 1.5em }<!-- index.html --> <head> <link href="css/style.css"></link> </head>
3.2 CSS设置颜色
HTML大部分标签支持CSS通过 color 属性的值来设置标签元素的颜色，通常由三个数字表示，分别表示红，黄，蓝颜色的深度，rgb(0,0,0) 表示黑色，rgb(255,255,255)表示白色，数字最大为255，为方便设置，可直接用六位的16进制数表示，比如#0AFF1C就表示为rgb(10,255,28)，设置出来的颜色都是绿色：
第一种方式（绿色）
第二种方式（还是绿色）
3.3 CSS选择器
CSS所设置的样式都是通过HTML标签元素来呈现的。
CSS选择器指用来选取所要设置样式的元素（标签）。
- 元素选择器
h1{} - id选择器
#username {} - 类选择器
.list{}
三个选择器的优先级顺序：id选择器 > 类选择器 > 元素选择器
上述优先级的意思是，当同一个标签被设置重复属性的情况下，按顺序来遵循唯一的样式。
3.4 CSS常用属性
相关链接：CSS 属性大全 (w3school.com.cn)
1. color: #FFFFFF; 定义文本颜色，例如#FFFFFF表示白色
2. text-decoration: underline; 修饰文本，例如underline表示添加下划线
3. line-height: 20px; 设置行高为20个像素点
4. text-indent: 2em; 通常用于p标签，表示行内容的缩进为2个字符
5. text-align: left; 规定标签中的文本水平对其方式为左对齐
6. margin: 0 auto; 让标签外边距两边各占一半，正常情况下，值有四个，分别是上 右 下 左
3.5 CSS 盒子模型
CSS对于每一个块标签都有盒子布局的概念。
盒子：页面中所有的标签都可以看成是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
盒子模型从内到外组成有：
- content：内容区域
- padding：内边距区域
- border：边框区域
- margin：外边距区域
参考资料
https://www.bilibili.com/video/BV1m84y1w7Tb
标签：Web,HTML,标签,Html,选择器,CSS,页面 From： https://www.cnblogs.com/uni1024/p/18053882