美文网首页js css html
HTML+CSS基础入门

HTML+CSS基础入门

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

一、什么是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 ...

网友评论

    本文标题:HTML+CSS基础入门

    本文链接:https://www.haomeiwen.com/subject/cbgpeltx.html