HTML 基础知识(一)

学习爬虫需要一些前端的知识，虽说不需要非常专业的前端，但是基础还是要的，所以在学习爬虫之前，先来学习一下前端的一些基础知识。

 

01 - HTML的介绍

HTML是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

  • html的定义

HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。

标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1>等，标签大多数都是成对出现的。

所谓超文本，有两层含义：

1.    因为网页中还可以图片、视频、音频等内容(超越文本限制‍)

2.    它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

  • html的作用

html是用来开发网页的，它是开发网页的语言。但是html不是一种编程语言，而是一种标记语言。

02 - HTML的基础结构

  • 结构代码

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

    1. 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。

    2. <html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到</html>结束,也就是html文档的开始和结束标签。

    3. <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。

    4. <body>...</body>标签是编写网页上显示的内容。

  • 浏览网页文件

网页文件的后缀是.html或者.htm, 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

实例解析：

  • <!DOCTYPE html> 声明为 HTML5 文档

  • <html> 元素是 HTML 页面的根元素

  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为utf-8

  • <title> 元素描述了文档的标题

  • <body> 元素包含了可见的页面内容

  • <h1> 元素定义一个大标题

  • <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

03 - 常用的HTML标签

  • 常用的html标签

<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签： -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

提示:

  1. 标签不区分大小写，但是推荐使用小写。

  2. 根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)

    1.  双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签

    2. 2.2 单标签是一个标签组成，没有标签内容， 比如: img标签。

       

  • 标签列表

标签 描述
<!--...--> 定义注释
<!DOCTYPE> 定义文档类型
<a> 定义超文本链接
<abbr> 定义缩写
<acronym> 定义只取首字母的缩写，不支持HTML5
<address> 定义文档作者或拥有者的联系信息
<applet> HTML5中不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域
<article> 定义一个文章区域
<aside> 定义页面的侧边栏内容
<audio> 定义音频内容
<b> 定义文本粗体
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo> 定义文字方向
<big> 定义大号文本，HTML5不支持
<blockquote> 定义长的引用
<body> 定义文档的主体
<br> 定义换行
<button> 定义一个点击按钮
<canvas> 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption> 定义表格标题
<center> HTML5不支持，不赞成使用。定义居中文本。
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd> 定义定义列表中项目的描述
<del> 定义被删除文本
<details> 用于描述文档或文档某个部分的细节
<dfn> 定义定义项目
<dialog> 定义对话框，比如提示框
<dir> HTML5不支持，不赞成使用。定义目录列表。
<div> 定义文档中的节
<dl> 定义列表详情
<dt> 定义列表中的项目
<em> 定义强调文本
<embed> 定义嵌入的内容，比如插件。
<fieldset> 定义围绕表单中元素的边框
<figcaption> 定义<figure> 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<font> HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
<footer> 定义 section 或 document 的页脚。
<form> 定义了HTML文档的表单
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<h1> to <h6> 定义 HTML 标题
<head> 定义关于文档的信息
<header> 定义了文档的头部区域
<hr> 定义水平线
<html> 定义 HTML 文档
<i> 定义斜体字
<iframe> 定义内联框架
<img> 定义图像
<input> 定义输入控件
<ins> 定义被插入文本
<kbd> 定义键盘文本
<keygen> 规定用于表单的密钥对生成器字段。
<label> 定义 input 元素的标注
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目
<link> 定义文档与外部资源的关系
<main> 定义文档的主体部分。
<map> 定义图像映射
<mark> 定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。
<menu> 不赞成使用。定义菜单列表。
<meta> 定义关于 HTML 文档的元信息。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分
<noframes> 定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output> 定义不同类型的输出，比如脚本的输出。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress> 定义运行中的进度（进程）。
<q> 定义短的引用。
<rp> <rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt> <rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby> <ruby> 标签定义 ruby 注释（中文注音或字符）。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section> <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source> <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span> 定义文档中的节。
<strike> HTML5不支持，不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary> <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期或时间，或者两者。
<template> 定义在页面加载时隐藏的一些内容。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track> <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video> <video> 标签定义视频，比如电影片段或其他视频流。
<wbr> 规定在文本中的何处适合添加换行符。

  • HTML属性

属性 描述
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名（classname）
contenteditable 规定是否可编辑元素的内容。
contextmenu 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-* 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggable 指定某个元素是否可以拖动
dropzone 指定是否将数据复制，移动，或链接，或删除
hidden hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheck 检测元素是否拼写错误
style 规定元素的行内样式（inline style）
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息（可在工具提示中显示）
translate 指定是否一个元素的值在页面载入时是否需要翻译

 

  • 知识点回顾

  • 学习 html 语言就是学习标签的用法，常用的标签有20多个

  • 编写 html 标签建议使用小写

  • 根据书写形式，html 标签分为双标签和单标签

  • 单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

  • HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

 

工欲善其事，必先利其器！

posted @ 2023-01-31 00:11  全栈测试开发日记  阅读(65)  评论(0)    收藏  举报