HTML+CSS基础入门

作者: AC编程 | 来源:发表于2022-07-11 07:41 被阅读0次

HTML+CSS基础入门
写给需要了解web与java的人
史上最全面的web前端学习资料
web前端开发学习网站大全
麦子学院课程
前端学习资料分享
前端心得
适合前端开发的书籍
慕课网前端课程学习路线
2019-04-17

一、什么是HTML

HTML是W3C组织定义的语言标准：HTML是用于描述页面结构的语言。

结构：有什么东西，该东西有什么含义。

HTML：Hyper Text Markup Language，超文本标记语言。

关于什么是标记，我们可以书写一个一级标题来说明

<h1>一级标题</h1>

W3C的官网是https://www.w3.org/，内容为英文，为了方便阅读，我们可以查另外一个网站：MDN（Mozilla Development Network,Mozilla开发者社区），比如，我们可以在百度里查h1 mdn

百度查h1 mdn

mdn 显示h1说明

二、什么是CSS

CSS是W3C组织定义的语言标准：CSS是用于描述页面展示的语言。

CSS决定了页面长什么样子。

同理，查询CSS相关语法和定义，可以去W3C官网查，也可以去MDN上查。

三、执行HTML、CSS

HTML、CSS  --> 浏览器内核 --> 页面显示

浏览器由两部分组成
1、shell：外壳
2、core：内核（JS执行引擎、CSS渲染引擎）

各浏览器内核

IE：Trident
Firfox：Gecko
Chrom：webkit(之前) / Blink（现在）
Safari：webkit
Opera：Presto(已弃用) / Blink

四、版本和兼容性

HTML5、CSS3

HTML5：2014年，大部分浏览器已经支持
CSS3：目前还没有制定完成，浏览器兼容性比较严重

XHTML：是从HTML的基础上发展出来的一个版本，完全符合XML的规范。已经成为历史，现在都是遵循HTML5的标准。

五、元素

5.1 元素定义

元素是官方定义的名称，英文名是element，平时我们可能更多的是叫标签、标记。元素由：起始标记（begin tag）、结束标记（end tag）、元素类容、元素属性四部分组成，其中属性又由：属性名、属性值组成。

5.2 属性的分类

局部属性：某些元素的特有属性
全局属性：所有元素通用

5.3 代码示例

<!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>第一个网页</title>
</head>
<body>
    <a href="https://www.jianshu.com/" title="简书用于写作">简书</a>
    <h1 title="这是一级标题的title">一级标题</h1>
</body>
</html>

<a href="https://www.jianshu.com/" title="简书用于写作">简书</a>

起始标记：<a>
结束标记：</a>
元素类容：简书
元素属性：href="https://www.jianshu.com/"

局部属性：href为a元素特有
全局属性：为所有元素通用，a元素、h1等元素都有

网页效果

5.4 空元素

有些元素没有结束标记，这样的元素叫空元素

<meta charset="UTF-8">

<img src="" alt="">

空元素的两种写法

第一种写法（html5写法）
<meta charset="UTF-8">

第二种写法（旧版本写法）
<meta charset="UTF-8" />

5.5 HTML5元素周期表

百度查下HTML5元素周期表

https://www.xuanfengge.com/funny/html5/element/

HTML5元素周期表

六、标准的文档结构

HTML：HTML页面，HTML文档

<!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>

6.1 文档声明

<!DOCTYPE html>

文档声明，告诉浏览器当前文档使用的HTML标准是HTML5。不写文档声明，将导致浏览器进入怪异渲染模式。

6.2 根元素

<html lang="en">
</html>

一个页面最多只能有一个根元素，并该元素是所有其他元素的父元素或祖先元素。但在html5中没有强制要求书写该元素。

lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。这个属性会触发浏览器的一些翻译行为，或是语音阅读。

英文
<html lang="en">

中文(已过时)
<html lang="zh-CN">

中文(中国大陆官方用语-简体汉语)
<html lang="cmn-hans">

6.3 文档头

<head>

</head>

文档头内部的内容，不会显示到页面上（就像人的大脑里想的东西，其他人是看不到的）。

6.4 文档元数据

指定网页内容编码
 <meta charset="UTF-8">

解决IE问题（使用edge内核）
 <meta http-equiv="X-UA-Compatible" content="IE=edge">

适配手机端
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

文档的元数据：附加信息，如charset指定网页内容编码。

6.5 文档体

<body>
    
</body>

页面上所有要参与显示的元素，都应该放置到文档体中。

七、语义化

7.1什么是语义化

每一个HTML元素都有具体的含义
a元素：表示超链接；
p元素：表示段落；
h1元素：表示一级标题；
所有元素与展示效果无关，元素展示到页面中的效果，应该由CSS决定。元素有默认展示效果（如h1）是因为浏览器带有默认的CSS样式。

<!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>第一个网页</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <p>这是段落</p>
</body>
</html>

h1默认样式

<!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>第一个网页</title>
</head>
<body>
    <h1 style="font-size: .5em;font-weight: normal;">这是一级标题</h1>
    <p>这是段落</p>
</body>
</html>

设置了h1元素样式后

重要：选择什么元素，取决于内容的含义，而不是显示出的效果(元素默认效果)

7.2 为什么需要语义化

在html5中特别强调语义化，

为了搜索引擎优化(SEO)(为了让搜索引擎理解网页)
为了让浏览器理解网页

7.3 span元素无语义

span元素无语义，仅用于设置样式。

html5以前的说法：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）。
html5：已经弃用这种说法

<!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>第一个网页</title>
</head>
<body>
    <p>
        三原色包括：<span style="color: red;">红</span>、<span style="color: green;">绿</span>、<span style="color: blue;">蓝</span>
    </p>
</body>
</html>

span显示效果

八、空白折叠 & 预格式化文本元素

8.1 空白折叠

在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格。例外：在pre元素中的内容不会出现空白折叠

8.2 预格式化文本元素pre

在pre元素内部出现的内容，会按照源代码格式显示到页面上。该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的CSS属性，style="white-space: pre;"。

pre元素-预格式化文本效果

8.3 code元素

显示代码时，通常在外面套code元素，code表示代码区域

<!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>第一个网页</title>
</head>
<body>
    <code>
        <pre>
            var i = 1;
            if(i>0){
                console.log(i);
            }
        </pre>
    </code>
</body>
</html>

九、HTML实体

HTML实体(HTML Entity)，实体字符通常用于在页面中显示一些特殊符号，有两种方式表示

第一种
&单词;

第二种
&#数字;

举例：在html中显示<p>标签

<!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>第一个网页</title>
</head>
<body>
    1、在网页中表示段落使用:<p>
    2、在网页中表示段落使用:&lt;p&gt;
</body>
</html>

小于符号：&lt;
大于符号：&gt;
空格：&nbsp;   no-breaking space
版权符号©：&copy;
&符号：&amp;

在html中显示p标签

html实体表

十、a标签

a标签标示超链接

10.1 href属性

hyper reference(引用)：通常表示跳转地址

1、普通链接

<a href="https://www.jianshu.com/">简书</a>

2、锚链接

百度百科锚点例子

锚点代码实现

锚点代码实现效果

3、功能链接

点击后，触发某个功能

执行JS代码

<a href="javascript:alert('你好');">你好</a>

发送邮件

<a href="mailto:chenyan900520@126.com">发送邮件</a>

拨号

<a href="tel:1341781017">拨打电话</a>

10.2 target属性

target标示跳转窗口位置，target的取值常用的有两种：_self、_blank，默认值为_self。
1、_self：标示在当前页面窗口中打开
2、_blank：在新窗口中打开

<a href="https://www.jianshu.com/" target="_blank">简书</a>

十一、路径

11.1 路径的写法

11.1.1 站内资源和站外资源

站内资源：当前网站的资源
站外资源：非当前网站的资源

11.1.2 绝对路径和相对路径

站外资源：绝对路径
站内资源：相对路径、绝对路径

11.1.3 绝对路径的书写格式

url地址

协议名://主机名:端口号/路径
schema://host:port/path

协议名：http、https、file

https://www.jianshu.com/u/bb4b0f42136d
file:///D:/re

11.1.4 相对路径

以 ./开头，./表示当前资源所在的目录

../表示返回上一级目录

示例代码

路径示例代码

index.html

<!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>首页</title>
</head>
<body>
    <a href="./page/user.html" target="_blank">用户页</a>

    <a href="page/user.html" target="_blank">用户页(省略相对路径中的./)</a>
</body>
</html>

user.html

<!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>用户页</title>
</head>
<body>
    <a href="./../index.html" target="_blank">回首页</a>

    <a href="../index.html" target="_blank">回首页(省略相对路径中的./)</a>
</body>
</html>

十二、图片元素

12.1 img元素

img为image缩写，是一个空元素（没有结束标记）。

src属性：source，图片资源（站内、站外）
alt属性：当图片资源失效时，将使用该属性的文字替代图片

图片显示代码

图片显示正常

图片失效，显示alt说明文字

12.2 img和a元素联用

用a元素包裹img元素，点击图片后就能跳转到a元素指向的资源

<!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>太阳系</title>
</head>
<body>
    <a target="_blank" href="https://jianshu.com">
        <img src="./image/taiyangxi.jpeg" alt="这是一张太阳系图片">
    </a>
</body>
</html>

12.3 img和map元素联用

当要实现点击图片不同位置（比如图片上的一个按钮图像）进行精准响应跳转时，需要用到map元素，如下需求：

点击图片中不同图片元素进行跳转

map：地图
area：map的子元素
figure元素：使html更具语义化，便于搜索引擎搜索，通常将图片、图片标题、描述包裹起来，子元素是figcaption。

注意
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具，如：ps、pxcook等。如果用QQ或微信等聊天工具截图，注意显示器显示分辨率要设置为100%。

十三、多媒体元素

多媒体元素有：video(视频)、audio(音频)两种，这两种的语法和用法基本一致，了解了其中一种，另外一种也同理。

13.1 video

13.1.1 controls属性

控制控件的显示，取值只能为controls。如果不设置该属性，video的播放控件是默认不显示的。

知识补充：某些属性，只有两种状态：不写、取值为属性名。这种属性叫布尔属性。在HTML5中，可以不用书写属性值。如下

    <!--布尔属性方式一：属性值为属性名-->
    <video controls="controls" src="./car.mp4" style = "width:500px;"></video>

    <!--布尔属性方式二：不写属性值-->
    <video controls src="./car.mp4" style = "width:500px;"></video>

13.1.2 autoplay属性

布尔属性，自动播放。

有些浏览器为了用户体验（进入网页突然播放视频会吓到用户），将自动播放属性屏蔽了，如果我们需要实现自动播放效果，需要我们加上muted属性（静音播放）

13.1.3 muted属性

布尔属性，静音播放。

13.1.4 loop属性

布尔属性，循环播放。

13.1.5 视频播放代码

<!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>视频播放</title>
</head>
<body>
    <!--布尔属性方式一：属性值为属性名-->
    <!-- <video controls="controls" src="./car.mp4" style = "width:500px;"></video> -->

    <!--布尔属性方式二：不写属性值-->
    <video controls src="./car.mp4" autoplay muted loop style = "width:500px;"></video>
</body>
</html>

13.2 兼容性

13.2.1 主要兼容性问题

1、旧版本的浏览器不支持这两个元素：video、audio，这两个元素是HTML5新增的，旧的版本播放视频需要用Flash。

2、不同的浏览器支持的音视频格式可能不一致。
视频主要支持：mp4、webm
音频主要支持：mp3

13.2.2 兼容性处理思路

一般视频上传到服务器后，我们会在后台进行格式转码生成mp4、webm等主要格式，然后前端引用不同的格式，浏览器支持哪个格式就会加载哪个格式的视频文件。前端的视频资源属性(src)不再写在video上，而是添加source子元素来设置视频资源，如下：

<!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>视频播放</title>
</head>
<body>
    <video autoplay muted loop style = "width:500px;">
        <source src="xxxx/car.mp4">
        <source src="xxxx/car.webm">
        <p>
            对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
        </p>
        <!-- 或者加载 Flash 实现视频播放-->
    </video>
</body>
</html>

十四、列表元素

14.1 有序列表

ol：ordered list
li：list item

<!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>有序列表</title>
</head>
<body>
    把大象装冰箱，总共分几步？
    <ol>
        <li>打开冰箱</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
    </ol>
</body>
</html>

有序列表效果

项目前面的序号，我们可以通过type属性来控制，在百度中搜索ol mdn 可以查看到官方文档的相关解释

type属性

14.2 无序列表

ul：unordered list
li：list item

无序列表常用语制作菜单或新闻列表，在我们平时开发中最常用。

<!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>有序列表</title>
</head>
<body>
    xxx择偶条件：
    <ul>
        <li>身高180cm</li>
        <li>长得帅气</li>
        <li>本科以上</li>
        <li>年薪30W</li>
    </ul>
</body>
</html>

无序列表效果

14.3 定义列表

dl：definition list
dt：definition title

通常用于一些术语定义。

<!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>有序列表</title>
</head>
<body>
    HTML中的术语解释：
    <dl>
        <dt>HTML</dt>
        <dd>
            超文本标记语言，xxxxx
        </dd>
        <dt>元素</dt>
        <dd>
            组成HTML文档的单元，xxxxx
        </dd>
    </dl>
</body>
</html>

定义列表效果

HTML+CSS基础入门
一、什么是HTML HTML是W3C组织定义的语言标准：HTML是用于描述页面结构的语言。结构：有什么东西，该东...
写给需要了解web与java的人
1、web - HTML+CSS基础课程了解的话看完第一章和第六章即可。 - javaScript入门了解的话...
史上最全面的web前端学习资料
HTML+CSS入门： HTML30分钟入门：http://deerchao.net/tutorials/html...
web前端开发学习网站大全
HTML+CSS入门： HTML30分钟入门：http://deerchao.net/tutorials/html...
麦子学院课程
发现麦子学院的课程还是感觉很好的。以后就按这个写文集了。希望能坚持下去。 HTML+CSS基础入门 1.课程介绍 ...
前端学习资料分享
一、免费视频前端轻松入门：HTML+CSS视频快速入门JavaScript 三天视频教程 CSS梅兰商城项目实...
前端心得
1.基础阶段：HTML+CSS 2.js阶段：JavaScript基础、JavaScript进阶、JavaScri...
适合前端开发的书籍
首先是前端入门，html+css的相关书籍。《Head First HTML与CSS》。入门首选好书，通俗易懂，...
慕课网前端课程学习路线
基础的 HTML & CSS 《HTML+CSS基础课程》《从 psd 到 html》页面布局（多练习）《如...
2019-04-17
从零开始学前端入门 html+css 慕课课程，8小时，反复敲上几遍即可。freeCodeCamp 2018 ...