再认识HTML(1)

HTML是什么?

HTML(Hyper Text Markup Language)是用来描述网页的一种语言,也叫超文本标记语言 。

查看网页的HTML代码

推荐用谷歌浏览器(Chrome)或火狐浏览器(Firefox)二者之一
方法一:快捷方式是ctrl+shift+i
方法二:网页任何地方右击“审查元素”

HTML的层级

HTML源代码中有一些小三角形,每一个三角形都可以展开或合上。尖角向下代表展开,向右代表合上了,这就是HTML的层级关系。

HTML的组成

标签和元素

标签:
在HTML文档中,夹在尖括号<>中间的字母,就叫“标签”。
1、 标签通常是成对出现的:前面的是【开始标签】,比如<body>;后面的是【结束标签】,如</body>。
2、 偶尔也会有单独出现的,比如:<meta charset="utf-8">(定义网页编码格式为 utf-8)

元素:
开始标签+结束标签+中间的所有内容,它们在一起就组成了“元素”


1-1.png

网页头和网页体

HTML文档的最外层标签一定是<html>,里面嵌套着<head>元素与<body>元素。<head>元素代表了【网页头】,<body>元素代表了【网页体】,这是最基本的网页结构。

【网页头】
网页头的内容不会被直接呈现在浏览器里的网页正文中。
具体包含内容及解释如下:
<head>
<meta charset="utf-8"> #定义了HTML文档的字符编码
<title>我是网页的名字</title> #用来定义网页的标题,这个标题就是显示在浏览器的标签页中的内容
</head>

【网页体】
就是那些能看到的显示在网页中的内容

属性

注意:HTML的属性和Python中的属性不是一个东西,不要搞混。
HTML标签可以通过设置【属性】来为HTML元素描述更多的信息。比如增加颜色,链接等。

style属性

用途:
可以用来定义网页文本的样式,比如字体大小、颜色、间距、对齐方式等等。
写法是:
<h1 style="color:#20b2aa;">这个书苑不太冷</h1>

href属性

用途:
可以用来添加链接。
在HTML中,链接一般都由<a>标签定义,href属性用于规定指向页面的URL。
写法是:
<a href="https://wordpress-edu-3autumn.localprod.oc.forchange.cn/">我是一个链接,点我试试</a>

Class属性

用途:
查找、定位元素,或者为元素设置样式
写法是:
出现在网页头里的下述内容:
<style>
.book {
/以下是.book的具体样式规定/
float: left; /控制元素浮动/
margin: 5px; /外边距为5像素/
padding: 15px; /内边距为15像素/
width: 350px; /宽度为350像素/
height: 240px; /高度为240像素/
border: 3px solid #20b2aa; /边框为3像素/
}
</style>
与出现在网页体里的: <div class="book">
二者一个是网页头里的.book;一个是网页体里的<div class="book">。其实.对应class,所以.book代表class book。因此,网页头中的.book和网页体中的class="book"是有联系的。
在网页头里面,定义了class属性,属性值为"book",然后下面一长串代码是对这个class属性的描述;接着再在网页体中调用,所以看到了<div class="book">。网页头的<style>元素中定义了.book的样式,
因此,凡是class="book"的元素都会继承它的样式。假如想在这个页面中多加一些书籍的介绍,只要在网页体中增加一些class="book" 的div元素就好了

id属性

用途:
查找、定位元素,或者为元素设置样式。
与Class不同之处在于,id属性用于标识唯一的元素,而class用于标识一系列的元素。id就像是学生的学生证号码,每个人都是唯一的;而学生们可以属于同一个班级,班级就像class。

实操:制作本地网页(源代码)

1、请求网页的源代码,并且将源代码保存到本地
写法:
import requests
res=requests.get('https://localprod.pandateacher.com/python-manuscript/crawler-html/spider-men5.0.html')
article=res.text
k=open('书苑.txt','a+')
k.write(article)
k.close()
2、把上述请求到的HTML源文件复制粘贴,在vscode中保存为后缀为.html 的文档,它就是一个保存在你本地中的网页了。.html这种文件格式,可以用浏览器打开。这就好比MP3文件用音乐播放器打开,txt用记事本打开一样。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,630评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,102评论 0 3
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 4,832评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 6,934评论 0 7
  • 一、关于HTML语言 1. 关于HTML语言学习的三个层次 【读懂】:只有读懂了HTML,我们才能看得懂网页结构,...
    YH学编程阅读 4,125评论 0 0