本文详细介绍了HTML和CSS的基础语法，包括HTML的DTD、标签、字符集、viewport设置，以及CSS的盒模型、文字样式、布局、选择器等。通过实例展示了如何使用HTML标签如h1-h6、p、img、a、表单元素、表格和CSS样式如文字颜色、字号、字体、背景颜色等，还探讨了浮动、定位和伪类选择器的概念及其应用。
互联网原理
互联网原理：上网即请求数据
HTML：制作网页文件
上网时，用户通过客户端发送http请求到服务器，服务器端将对应请求找到后，通过http响应传给本地计算机，计算机加载网页
上网过程由实际的物理文件的传输
http协议
浏览过程
输入URL→DNS域名解析（浏览器无法直接通过域名发起请求，需要将域名解析为IP地址）→建立TCP链接→发送HTTP Request→Web服务器Nginx反向代理→应用服务器Servlet处理请求→关闭TCP链接→渲染响应页面
纯文本和超文本区别
定义：纯文本只包含文字内容，不能包含文字以外的（图片视频等）。
纯本文文件：文件内部只能书写纯文本，且不包含样式，常见如.txt、.html、.css、.js。
超文本文件：是一种含有特殊标记的文本文件，其作用类似word的排版标记最常见的.docx、.pptx。
查询某一浏览器html5兼容情况：https://html5test.com/results/desktop.html
查询某一新增方法浏览器兼容情况：https://caniuse.com
HTML骨架
DTD(Document Type Definition)
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
</head>
<body>
</body>
</html>
html就是HTML超文本标记语言
关于html标签
整个网页必须被包裹，其中包含和两部分
：网页的配置 ：网页的内容标签属性lang(language)：整个网页的主题语言
英语：en
汉语：zh、cn、zh-CN。
无论那种语言都要使用英文开发
字符集
head标签对中几乎所有的配置都是些在meta标签中的，meta意为元
<meta charset="UTF-8">
<meta charset="gb2312">
<meta charset="gbk">
网页面向国际使用"UTF-8"，面向国内使用"gbk"
如需修改字符集
以将现有字符集utf-8修改为gbk为例
- 将meta标签修改为gbk
- 点击右下角字符集标志[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAfH6KcB-1630767244050)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185344849.png)]
- 在弹出检索栏点击通过编码重新打开[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6UWIMe2w-1630767244051)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185516140.png)]
- 搜索gbk，选中搜索内容即可[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iu2yIoKa-1630767244052)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185610876.png)]
视口标签
meta name="viewport" content="width=device-width, initial-scale=1.0">
如果不加这个视口，手机看这个网页是“俯瞰”模式，将以980px俯瞰网页
如果加上这个视口，手机看网页就是“APP”模式，将以APP的状态字号看页面
浏览器私有设置
edge是win10中IE升级版浏览器，这句话的意思表示设置兼容性为让IE和edge渲染方式一样
<meta http-equiv="X-UA-Compatibale" content="ie=edge">
还有些双核浏览器都可以加上这句话表示尽可能用高级核打开页面
<meta name="renderer" content="webkit">
title标签
网页标签
<title>Document</title>
关键字
最基本的SEO技术就是把keywords写好，keywords是网页关键字
<meta name="keywords" content="前端,HTML,JavaScript">
description页面描述
页面描述就是搜索引擎搜索到之后显示的文字
<meta name="Description" content="网页描述"/>
HTML基本语法
标签
标签必须书写在一对<>内
标签分单标签和双标签，双标签成对出现，有开始标签和结束标签
结束标签必须有关闭符号/。
根据标签内部存放内容不同，将不同的标签划分为两个级别
| 单标签 | 双标签 |
|---|---|
| img | h1-h6 |
| br | div |
| hr | span |
| p | |
| a | |
| ul+li |
根据标签的种类区分两个等级，分别是容器级和文本级
容器级：元素内部除了可以存放文本之外，还可以嵌套标签
文本级：元素内部只能存放文本或者文本级标签
| 容器级 | 文本级 |
|---|---|
| div | span |
| ol | img |
| ul | b |
| li | u |
| dl | i |
| dt | |
| dd | |
| h1-h6 |
标签属性
对标签赋予职能，但前提是它具有此项功能，多个属性用空格隔开。
<a href="" title="">我是超链接</a>
文字的位置不通过标签位置决定，而是通过标签特性决定。
<p>文字</p><p>文字</p>
其输出结果是换行的
<span>文字</span>
<span>文字</span>
- 标签与其他标签之间对空白、换行、缩进不敏感，有没有空白不影响浏览器加载效果
- HTML语法中，认识标签的开始和结束，不论有没有换行都只认标签开始结束
- 标签之间还认识嵌套关系
- 书写过程中，为了让代码是容易解读的，建议进行合理的换行和缩进
- 在上传代码的过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白，目的是压缩文件大小
空白折叠现象
多个空格会被折叠成一个空格
<p>你好 我是张三</p>
多个空格显示需要特殊写法
<p>你好 我是张三</p>
HTML常见标签
h系列标签(headline)
一共六级标题(h1-h6)
都是双标签，容器级标签
作用：给内部添加对应级别标题的语义
标题标签权重最高
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L8i8syU3-1630767244054)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210722160410847.png)]
h1一般是logo，如用多个，浏览器会认为你作弊，从而降低排名
p标签(paragraph)
文本级标签
img标签
文本级标签
用于插入一张图片
src：图片路径
alt：文件加载不出来时的替换文本
title：鼠标悬停图片上时出现的文字
width：图片宽度
height：图片高度
border：边框设置
<img src="" alt="" width="" height="" title="" border="">
一般为了避免图片变形长度宽度不会同时使用
一般不在此处使用border，而在css中使用，边框颜色不光有黑色
src中使用相对路径或绝对路径都可以，实战中因为没有盘符划分所以很少使用绝对路径。相对路径中常见有："/"：进入某个文件夹；"…/"：出某个文件夹；同级文件夹不需要进出。
锚点(anchor)
a标签
双标签，文本级标签
作用：指定位置添加一个娼妓链接，从而实现相应的跳转
a标签常见属性：
href：超文本引用（hypertext reference）
<a href="http://www.baidu.com">链接到百度</a>
跳转也可以使用绝对路径和相对路径
target：
作用是是否在新标签打开链接，值一定是"_blank"
<a href="http://www.baidu.com" target="_blank">链接到百度</a>
title:
和img的title一致，都是设置鼠标悬停的文字
<a href="http://www.baidu.com" target="_blank" title="我是鼠标悬停的文字">链接到百度</a>
锚点的使用
方法一：name属性定位
锚点的锚
<a href="#abc">标题1</a>
锚点的点
<a name="abc"></a>
代码示例
<h1>总标题</h1>
<a href="#abc">标题1</a>
<a href="#def">标题2</a>
<a href="#hij">标题3</a>
<h2>标题1</h2>
<a name="abc"></a>
<p>
内容1
</p>
<h2>标题2</h2>
<a name="def"></a>
<p>
内容2
</p>
<h2>标题3</h2>
<a name="hij"></a>
<p>
内容3
</p>
方法二：id属性定位
锚点的锚
<a href="#abc">标题1</a>
锚点的点
<h2 id="abc">标题1</h2>
代码示例
<h1>总标题</h1>
<a href="#abc">标题1</a>
<a href="#def">标题2</a>
<a href="#hij">标题3</a>
<h2 id="abc">标题1</h2>
<p>
内容1
</p>
<h2 id="def">标题2</h2>
<p>
内容2
</p>
<h2 id="hij">标题3</h2>
<p>
内容3
</p>
列表
无序列表
用于定义无序列表，标签包括：
ul: unordered list
li: list item
<h2>古典四大名著</h2>
<ul>
<li>
<h3>西游记</h3>
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙僧</li>
</ul>
</li>
<li>
<h3>水浒传</h3>
<ul>
<li>林冲</li>
<li>卢俊义</li>
<li>宋江</li>
<li>武松</li>
</ul>
</li>
<li>
<h3>三国演义</h3>
<ul>
<li>董卓</li>
<li>曹操</li>
<li>孙权</li>
<li>刘备</li>
</ul>
</li>
<li>
<h3>红楼梦</h3>
<ul>
<li>贾宝玉</li>
<li>林黛玉</li>
<li>薛宝钗</li>
<li>王熙凤</li>
</ul>
</li>
</ul>
ul内部嵌套且只能嵌套li标签，li标签内部可以嵌套任何标签
无序列表之间没有前后顺序之分
列表项之间的前缀样式是CSS去控制的，目前只需搭建结构
有序列表
用于定义有序列表，包括：
ol: ordered list
li: list item
<h2>三年级期末考试排名</h2>
<ol>
<li>
<h3>三年级1班</h3>
<ol>
<li>第一名：王同学</li>
<li>第二名：李同学</li>
<li>第三名：张同学</li>
</ol>
</li>
<li>
<h3>三年级2班</h3>
<ol>
<li>第一名：王同学</li>
<li>第二名：李同学</li>
<li>第三名：张同学</li>
</ol>
</li>
<li>
<h3>三年级3班</h3>
<ol>
<li>第一名：王同学</li>
<li>第二名：李同学</li>
<li>第三名：张同学</li>
</ol>
</li>
</ol>
嵌套规则同无序列表
定义列表
用于定义自定义列表，标签包括：
dl: definition list
dt: definition term
dd: definition description
<h3>国内明星</h3>
<dl>
<dt>明星1</dt>
<dd>作品：《作品1》、《作品2》、《作品3》</dd>
<dt>明星2</dt>
<dd>作品：《作品1》、《作品2》、《作品3》</dd>
<dt>明星3</dt>
<dd>作品：《作品1》、《作品2》、《作品3》</dd>
<dt>明星4</dt>
<dd>作品：《作品1》、《作品2》、《作品3》</dd>
</dl>
di内部只能存放dt和dd，dt和dd是同级关系
dt和dd都是容器级标签，内部可以存放任意内容
每个dt主题后面跟0或多个解释的dd，每个dd解释上一个dt
很多时候dl、dt、dd组合使用
<h3>国内明星</h3>
<dl>
<dt>明星1</dt>
<dd>
最低0.47元/天 解锁文章
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
