HTML+CSS 学习笔记

最新推荐文章于 2024-09-29 11:01:57 发布

wc777777

最新推荐文章于 2024-09-29 11:01:57 发布

阅读量963

点赞数 3

文章标签： css html html5

本文链接：https://blog.csdn.net/wc777777/article/details/120666093

版权

本文详细介绍了HTML的起源、W3C标准、HTML5的发展历程，以及HTML的基本元素、DOCTYPE声明、CSS的选择器、单位、文字属性、布局方式等内容。还涉及到CSS3的新特性，如边框、背景、文本效果、媒体查询、Flex布局和Grid布局。此外，讨论了移动端布局的实现，包括响应式布局、流式布局、REM布局，以及浏览器兼容性和前端优化策略。

摘要由CSDN通过智能技术生成

一、什么是html？

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

1. 网页的组成

网页的三要素：结构html，表现css，行为js

2. Html发展史

HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。

HTML2.0，在1995年HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的。

HTML3.2，1996年HTML3.2成为W3C推荐标准

HTML4.01，在2000年基于HTML4.01的ISOHTML成为了国际标准化组织和国际电工委员会的标准

HTML5，2014年10月，W3C组织宣布历经8年努力，HTML5标准规范终于定稿。

3. 什么是 W3C？

W3C 指万维网联盟（World Wide Web Consortium）

W3C 创建于1994年10月

W3C 由 Tim Berners-Lee 创建

W3C 是一个会员组织

W3C 的工作是对 web 进行标准化

W3C 创建并维护 WWW 标准

W3C 标准被称为 W3C 推荐（W3C 规范）

（1）w3c是如何创建的

万维网（World Wide Web）是作为欧洲核子研究组织的一个项目发展起来的，这那里 Tim Berners-Lee 开发出万维网的雏形。

Tim Berners-Lee - 万维网的发明人 - 目前是万维网联盟的主任。

W3C 在 1994 年被创建的目的是，为了完成麻省理工学院（MIT）与欧洲粒子物理研究所（CERN）之间的协同工作，并得到了美国国防部高级研究计划局（DARPA）和欧洲委员会（European Commission）的支持。

二、我们来学习html吧

1. 什么是html？

Html是描述网页的一种语言。

Html是一种超文本标记语言。

2.用什么去制作网页

编辑器安装 vscode hbuilder subline atom webstore…

3. 让我们先创建一个网页项目

创建一个站点：结构表现行为分开创建html，css文件夹，以及js文件夹，image文件夹

三、开始学习html语法

1.HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

2.Html的doctype声明：

DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

常见的DOCTYPE声明

HTML5

~~HTML 4.01 Strict~~

~~该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。~~

~~HTML 4.01 Transitional~~

~~该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。~~

~~HTML 4.01 Frameset~~

3. lang 属性

Lang规定元素内容的语言；

记住两个就好： zh是中文，en是英文；

注：语言是gb2312时是两个代表一个字语言是 utf-8 的话，是4个代表一个字

4. meta属性

从IE8浏览器开始支持一种设置页面兼容模式的meta类型
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
//指定IE和Chrome使用最新版本渲染当前页面 (把当前浏览器解析成高版本浏览器：如ie8以上变成edge)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
<meta name="viewport" content="width=device-width”, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,  user-scalable=no">
这段代码的几个参数解释：
width = device-width：布局视口的宽度等于当前设备视口的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

5. 网页元素/标签/标记

标题

段落

粗体

带强调的加粗

倾斜

带强调的倾斜

下划线

删除线

下标

上标

换行

半角空格（英文）

全角空格（中文）

© （版权符）

小于号 <

大于号 >

&符号

reg注册符号 ®

水平线标记

图片

超链接 a 一对一

给文字加 <a href="1.html">千峰</a>

给图片加 <img src=”a.jpg” /></a>

空链接 <a href="#">千峰</a>

新空白窗口打开 <a href="1.html" target="_blank">千峰</a>

target 窗口打开方式

_self 本窗口打开默认

_blank 新窗口打开

路径

路径分为绝对路径和相对路径

绝对路径：完整描述文件位置

C:/image/1.jpg

相对路径：同级目录

Images/1.jpg

上一级

…/images/1.jpg

上上级 …/…/

无序列表ul

有序列表ol

自定义列表dl

div标签

span标签

6、表格

表格

表格标题

行

单元格列内容

表头 th 特殊单元格加粗居中

对行进行分组

表格页眉 thead 一个

表格主体tbody 多个

表格页脚tfoot

table的属性

width=”800/40%” （默认内容一样宽不是100%）

height=”500”

border=”10” 外边框

align 水平对齐方式

bgcolor 背景色

background 背景图片

表格特有属性：

cellspacing 单元格间距外

cellpadding 单元格边距（内）

tr的属性

align 水平对齐

left center right

valign 垂直对齐

top 顶部

Middle 中部

Bottom 底部

td的属性相邻

colspan 水平合并(横着合并/合并列)
rowspan 垂直跨度（竖着合并/合并行）

7、表单

表单的概念

用来收集用户信息

表单三元素

input输入 select下拉菜单 textarea 文本域

<input type=****”10个值” name=****”sex” value=****”值” checked=”默认选中”/>

文本框

值

密码框

单选框(单选框必须相同名称成为一组)

<input type=”radio” name=”sex” checked=” checked”/> 男默认选中

女

复选框

文件域

四种按钮

提交 action=”url” 提交地址

重置 reset replay rename

普通按钮

图像域属性 <input type=“image” src="1.jpg name=“sousuo”/>

下拉菜单

文本域（多行文本框）

列数(此处代表一行显示20个字也就是40/2) 行数(此处代表文本一共能显示5行文字)

HTML5文本框的占位符属性placeholder

placeholder属性改变样式

浏览器兼容不好

input ::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */

input :-moz-placeholder{} /* Firefox版本4-18 */

input ::-moz-placeholder{} /* Firefox版本19+ */

input :-ms-input-placeholder{} /* IE浏览器 */

一、css基础

1、概念

Css—cascading style sheet

层叠样式表用于控制网页外观

2、四种样式表（引入css的方式）

（1）第一种方式：

1.行内样式

最直接最简单的一种，直接对HTML标签使用style=""，例如：

缺点：HTML页面不纯净，文件体积大，后期维护不方便。

（2）第二种方式：

内部样式标签

内嵌样式就是将CSS代码写在之间，并且用进行声明，例如：

优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。

（3）第三种方式：

链接样式（推荐）

链接样式是使用频率最高，最实用的样式，只需要在之间加上<link…/>就可以了，如下：

优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便

第四种方式：

导入样式 @import url( )（在css中导入css）

导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。

(1) @import在html中使用，如下：

(2) @import在CSS中使用，如下：

@import url(style.css);

常见

链接式和导入式的区别：

优先加载CSS文件到页面

@import先加载HTML结构在加载CSS文件。

3、四种CSS引入方式的优先级

1.就近原则

2.理论上：行内>内嵌>链接>导入

3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高（页面多种方式使用css样式引入

语法：

选择器{

属性: 属性值;

}

命名规范：字母数字下划线组成且不以数字开头

4、选择器

（1）标签选择器

h1{} p{} a{} ul{}

特点：牵一发而动全身，不建议大量使用

（2）类别选择器

示例：.red{}

特点：一个元素可以无限添加类名，操作灵活，推荐使用。

（3）Id选择器

示例：#red{}

特点：一个元素只能有一个

（4）群选择器

示例：span,.red,#red{}

特点：能同时操作多个选择器，从而控制多个不一样的元素

（5）全局选择器

示例：*{ }

特点：可以控制全局，多用于清除全局默认样式

（6）子选择器

示例：.parent>.child

（7）包含选择器

示例：div ul

（8）伪类选择器（css2）

定义：为某些选择器添加特定的效果

常用的几种伪类选择器

A:link{} 点击前

A:visited{} 点击后

A:hover{} 放上去鼠标滑过

A:active{} 按下去点击瞬间

Li:hover span{}滑过li改变span

p:before

{
content:"";
background-color:yellow;
color:red;
font-weight:bold;

}在每个

之前插入的内容和样式

p:after

{
content:"";
}

每个

元素之后插入内容

注意：before和after生成的weiyuansu1都是行内元素

属性选择器（9）

（9）css3新增选择器

1.兄弟选择器

示例.brother~.sisiter

2.相邻选择器

示例.pre+.next

3.css新增属性选择器,伪类选择器

CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）
序号	选择器	含义	实例
1	E[att^=“val”]	属性att的值以"val"开头的元素	div[id=“nav”] { background:#ff0; }
2	E[att$=“val”]	属性att的值以"val"结尾的元素
3	E[att*=“val”]	属性att的值包含"val"字符串的元素

序号	选择器	含义	实例
4	E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
5	E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1	p:nth-child(3) { color:#f00; }
6	E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1	p:last-child { background:#ff0; }
7	E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素	p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
8	E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
9	E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
10	E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
11	E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
12	E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)	p:only-child { background:#ff0; }
13	E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
14	E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素	p:empty { background:#ff0; }
与用户界面(UI)有关的伪类 (ie6 7 8不支持)

序号	选择器	含义	实例
15	E:enabled	匹配表单中激活的元素
16	E:disabled	匹配表单中禁用的元素	input[type=“text”]:disabled { background:#ddd; }
17	E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
18	E::selection	匹配用户当前选中的元素
级元素通用选择器 ie6不支持

序号	选择器	含义	实例
20	E:not(s)	匹配不符合当前选择器的任何元素	:not§ { border:1px solid #ccc; }
:target 伪类 (ie6 7 8不支持)
21	E:target	匹配文档中特定"id"点击后的效果