Web从入门到放弃-HTML的学习(二)

最新推荐文章于 2024-06-27 11:38:14 发布

OnionQueen

最新推荐文章于 2024-06-27 11:38:14 发布

阅读量183

点赞数 1

文章标签： html 学习前端

本文链接：https://blog.csdn.net/OnionQueen/article/details/127801495

版权

一、HTML是什么？(以下概念去维基百科上一搜就完事儿)

HTML是超文本标记语言 (Hyper Text Markup Language)的缩写。
HTML文档是一个放置了标记（tags）的.html文件。
HTML通过各种标记来标识文档的结构，超链接、图片、文字、段落、表单等信息。
HTML是一种客户端浏览器解释的语言，不用经过编译。
浏览器都使用HTML标准来解析并显示网页。
目前手机端开发也经常使用html制作页面的显示功能。
HTML的作用就是把我们需要显示的内容显示在浏览器上，但是HTML语言本身并不显示
HTML的发展史，我觉得大家感兴趣的话，百度一搜一看就明白，稍加了解的是2014年HTML5标准发布(本文涉及HTML4版本，H5下下文见！)
项目开发过程中需要用到的符号必须是英文的(逗号，分号，引号等)

二、HTML基本语法(该模块概念性的已理解的直接pass，但很关键哦！)

2.1.基本关键词解释及关键点说明：

标记(tag)：就是利用一个特别明显的东西，把一些符号或者是记号记在一个东西上面
文本(text)：就是书面语言的表现形式(说白了就是文字)
语言(language)：就是人类进行沟通交流的表达方式，那么在计算机中的语言就是人类跟计算机之间进行交流沟通的表达方式啦。
属性(attribute)：就是对一个对象(通俗讲"某个东西")的描述，如身高，长宽，重量，颜色，大小等
一个标记中可以有很多个属性，每个属性之间必须空格空开。
HTML标记是忽略大小写的(也有解释说大小写不敏感，一个意思)，但实际开发时建议小写(就生活来说方便写代码而已，哈哈！)

2.2HTML基本语法：

单标记写法：
- 是指用一个标记符号即可完整地描述某个功能的标记。
- 语法：<标记属性1="属性值1" 属性2="属性值2" ..... />，如水平线标记<hr />、换行标记<br />等。
- 也有概念称之为空标记或者非闭合标记，其实都是一个东西
- 注意：标记名与/之间有空格（规范）
双标记写法：
- 是指由开始和结束两个标记符组成的标记。
- 语法：<标记属性1="属性值1" 属性2="属性值2" .....>文本内容</标记>，如标题标记<h1></h1>、段落标记<p></p>等。
- 也有概念称之为闭合标记，其实都是一个东西
- <标记>表示开始标记，</标记>表示结束标记
通俗的讲(便于记忆和理解)：单标记不操作文本，双标记操作文本。

三、HTML的基本架构 (任何网页都必须具备，不管是复杂的还是简单的)

3.1.基本架构

<! DOCTYPE html>-----网页的文档声明类型，使用的是H5的声明版本，作用就是告诉浏览器，我是HTML文本，以HTML的标准解析我
<html lang="en">---定义整个网页 
        lang="en"----英文版本
        lang="zh"----中本文版本
    <head>----定义网页的头部信息(这个模块不是给人看的)，给浏览器解析的网页相关的信息
        <meta charset="utf-8" />----定义网页的编码格式
        GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，包含了全世界所有国家需要用到的字符(每个编码格式大家需自行了解一下哦)。
        <title></title>
            1.整个网页的标题
            2.浏览器收藏栏上显示的收藏标题
            3.搜索引擎显示的数据信息词条
            4.网页关键字之一
    </head>
    <body>----网页的主题，正文部分
       通俗的讲想让用户看到的内容，全部都要放在这里(文本，数据表，图片，视频，音频)
    </body>
</html>

3.2.HTML中doctype的作用及几种类型

Html文档模式：
- 严格模式：按照当前浏览器的能支持的最高版本进行元素的渲染
- 混杂模式：使用DTD限制当前浏览器按照当前某一个版本进行元素渲染
模式的声明方式：
- HTML5中的声明方式如下，严格模式：
  - <!DOCTYPE html>
- HTML4的声明方式：依照定义的dtd文件格式进行html渲染，混杂模式：
  - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
详情参考：https://www.cnblogs.com/spoem/p/13153109.html
说明：HTML中所有的都是标记，但是唯一一个不是标记，又用尖括号表示的就是 <！DOCTYPE html>，它文档声明类型，但不是标记(一定要记住哦！！！！！！)

3.3meta标签：用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词等。meta标签主要属性说明

charset - 字符设置：规定 HTML 文档的字符编码，默认支持英文：<meta charset=utf-8">
keywords－关键字：当前网页关键字，能够更容易让搜索引擎搜索到：<meta name=“keywords” content="vacation,greece">
description－简介：<meta name="description" content="你网页的简述">
author－作者：<meta name="author" content="张三，abc@sina.com">
copyright -版权：<meta name=“copyright” content=“XX公司">
说明：项目开发过程中暂时只需要写上编码格式就可以了，其余的等到项目发布上线时在补充上去

3.4HTML的注释

注释：当前程序文字描述，用于提高程序的可读性，项目打包上线时，用工具会把添加上的注释删除掉的。
html注释的特点：
- 加载到客户端，从而影响网页打开速度。
- 不会被执行，不会影响加载后的执行。
- html、css、js的注释可以被第三方工具删除。
html注释的编写方式： （VSCode中注释快捷键ctrl+/）
建议在程序开发中增加注释，提高代码的质量。

3.5标签的嵌套：

标签的层级特性：闭合的HTML标签内可以包含一个或多个子标签，因此HTML的标签是一个多叉树的数据结构，多叉树的根是HTML标签。

<div>----正确的嵌套
    <p>文本内容</p>
</div>

<div>----交叉嵌套，错误的嵌套
    <p>
</div>
    </p>

<div>----可嵌套多个
    <p></p>
    <p></p>
</div>

<div>----可嵌套多层
    <p>
        <span></span>
    </p>
</div>

3.6标签的公用属性：

每个标签都具备一组公用或当前标签独有的属性(后期课程慢慢涉及)
class：规定当前元素所引用的样式类名称。
id：规定当前元素在网页上的唯一标识，一般在css、js中会根据id检索当前元素。
name：当前元素在文档上的名称，可以重复。
style：规定当前元素的显示样式，取值为css样式表。
title：规定当前元素的标题，类型为文本，可在工具提示中显示。
除了公用的属性每个标签仍然具备私有属性

3.7HTML特殊字符

需要使用其他字符代替的字符，主要有如下两种使用场景
- 使用频率较少且难以直接输入的符号，比如数学符号；单位符号；制表符等。
- 需要输入的符号是html的关键字符号如单引号、双引号、尖括号等。
- 语法：&开头，;(分号)结束，如：©
- 重点记住：空格、大于号、小于号这三个，其余的使用的很少，如果需要使用回头查阅即可
- 参考网址：https://www.jb51.net/onlineread/htmlchar.htm

OK先到这里啦，本文主要是介绍HTML(4)相关的杂七杂八的东西，当然面试(初学者小白，或者在校小哥哥小姐姐们)的时候还会涉及到HTML、XHTML的区别，编码格式之类的问题，这些网上搜一搜看一看就Ok啦！

下文HTML标签详解见！！！

陆续更新中，如果有帮助到您，谢谢点赞，谢谢收藏，谢谢关注，谢谢支持，总之就是谢谢啦各位...........