再认识HTML(1)

作者: 菁_在路上 | 来源:发表于2019-12-28 19:39 被阅读0次

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认识1

    网页乱码的问题是如何产生的?怎样解决? 文件和浏览器解析的编码不一致 保存文件格式设置为utf-8编码 html文...

  • 1.html认识

  • 再认识HTML(1)

    HTML是什么? HTML(Hyper Text Markup Language)是用来描述网页的一种语言,也叫超...

  • HTML初认识——1:HTML简介

    1:什么是 HTML? (1)HTML 是用来描述网页的一种语言。 (2)HTML 指的是超文本标记语言 (Hyp...

  • html基础

    目录:1.HTML介绍 1.1Html和CSS的关系 1.2认识html标签 1.3标签的语法 1.4认识html...

  • Part 1-1 认识HTML

    HTML的基础结构 head元素的作用 head元素用于定义网页的常规信息和元数据,总得来说其里面的子元素大概分为...

  • day1-认识html

    一.认识html 什么是html(结构标准)html是超文本标记语言 超文本 - 除了文字以外,还可以对图片、视频...

  • 1、认识HTML及标签

    HTML基本结构 标题标签 单标签 粗/斜体标签 列表标签 图片标签 超链接a标签 HTMLclass/id书写规...

  • 认识HTML5 1

    IE8以下不兼容HTML5使用以下代码,注释if判断当浏览器为IE9以下时解析 新增标签 标签定义图形,比...

  • HTML5入门

    html基础-认识html 1.html的基本结构 2. DTD文档声明 3...

网友评论

    本文标题:再认识HTML(1)

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