【重学前端】html 基础入门一

2021/7/14 6:08:17

编程Tag： 文字前端标签网页 html 入门内容文档

本文主要是介绍【重学前端】html 基础入门一，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

什么是HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

语  言:  人们用于交流的工具。
超文本：就是指页面内可以包含图片、链接，甚至音乐、视频等非文字元素；
标  记：一种标记符，可以告诉浏览器如何显示其中的内容；

注意事项:

HTML 不是一种编程语言（因为HTML中没有变量，流程控制等），
它是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页内容

动态网页与静态网页

静态网页，html代码和内容书写完毕后，
页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。
而动态网页则不然，页面代码虽然没有变，
但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
注意：不要将动态网页和页面内容是否有动画效果混为一谈，
比如网页中幻灯片效果，文字滚动效果，如果内容本身没有变化，那么也属于静态网页。

HTML5新特性

语义（语义化标签）：能够让你更恰当地描述你的内容是什么
连通性（websocket 双向通信协议。可用于实现即时通讯，例如：qq、微信…）：能够让你和服务器之间通过创新的新技术方法进行通信。
离线 & 存储（本地存储）：能够让网页在客户端本地存储数据以及更高效地离线运行。
多媒体（音频、视频播放器）：使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果（canvas绘图）：提供了一个更加分化范围的呈现选择。
性能 & 集成（webworks“多线程”）：提供了非常显著的性能优化和更有效的计算机硬件使用。
设备访问 Device Access（mediaquery 响应式设计）：能够处理各种输入和输出设备。
样式设计（css3）: 让作者们来创作更加复杂的主题吧！

HTML标签格式

什么是 HTML 标签？
HTML标签也称为HTML标记，由开始标签和结束标签组成，用于表现结构化的内容，将内容构造成为一个完整的网页。

开始标签是被尖括号包围的元素名。
结束标签是被尖括号包围的斜杠和元素名。
<元素名>内容< /元素名>

例如：<h1>文本内容</h1>   <b></b>

单标签与双标签
通常情况下，在我们的HTML中，标签分为两大类：

双标签

双标签是指由开始标签和结束标签组成，
例如：<b>内容</b>

单标签

单标签是指没有结束标签的标签，由一个标签构成即为开始也是结束；
但根据XHTML的规范，标签一定要有结束，于是写上自结束符号： /
例如：<hr />  <br />

注意：有些 HTML 元素没有结束标签，比如

标签属性
定义：属性描述标签的更多细节
比如字体标签，如果需要设置字体大小，我们就需要使用size属性；
基本语法：

<标签名 属性名="属性值" 属性名="属性值" ....>
<!-- 设置字体的标签 -->
<font size="7">大不大</font>

属性值可以加双引号，也可以加单引号，也可以不加引号；千万不要在一个值又加单引号又加双引（混合），我们建议大家都使用双引号。
HTML 标签拥有通用属性，也就是每个标签都有属性（有个别例外）。
Base，head，html，meta，script，style，title标签不提供下面的属性：
在这里插入图片描述

HTML的基本结构

<!DOCTYPE html>
<html>
	<head></head>
	<body></body>
</html>

DOCTYPE: 文档声明
html: 标签告知浏览器其自身是一个 HTML 文档
head: 标签用于定义文档的头部（文档的描述信息）
body: 标签用于定义文档的主体（文档的主体内容）

<!-- 
	文档声明：位于文档的首行，告知浏览器文档使用哪种 HTML 或 XHTML 规范。让浏览器通过正确的方式解析我们的网页，使网页能正常显示。 
-->
<!DOCTYPE html>
<!-- html标签：告诉页面这是一个HTML文档  -->
<html>
<!-- 
	head标签:就是一个网页的头,头部中的内容一般存放描述文档的信息。
 -->
<head>
	<!--
       meta元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词等。

		声明文件的编码是UTF-8的编码，告诉浏览器，你用什么编码去解析这个文件
			UTF-8 : 国际通用码
			GBK/GB2312 : 中文编码
			这里的编码必需要和文件的编码完全一致
	  -->
	<meta charset="UTF-8"/>
    <!-- 提供给搜索引擎的关键字信息 -->
<meta name="keywords" content="xxxxxxxxxxxxx"/>
<meta name="description" content="xxxxxxxxxxxx"/>
 <!-- viewport:表示视窗的缩放比例    width=device-width实际宽度=设置宽度  initial-scale=1.0 按照1:1进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 表示对IE进行兼容的写法 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<!-- 
		title : 网页的标题，会显示在标题栏
	 -->
	<title>你看得见我嘛？</title>
</head>
<!-- 
	body标签:就是一个身体
		一般来说:body里面的内容要显示出来
 -->
<body>
 <!-- 
        HTML的规范

            1.HTML标签的尖括号必需是英文输入法中符号

            2.写标签时,如果是双标签,必需写开始和结束标签

            3.HTML不区分大小写,建议使用小写

            4.HTML标签可以嵌套,但不能交叉嵌套
     -->
    <!-- 
        基础标签(重点)

            1.hn标签(双标签)
               说明:hn标签不是一个标签,而是一系列标签   n:表示1-6    h1标签最大,h6最小
                作用:定义标题
                默认效果:文字加粗,有大小
                注意:
                    1.h1和h2一般在同一个页面中只能使用一次(SEO权重)
                    2.h标签有明确语义,建议在同一行中不能使用h标签来控制文字大小
             
            2. p标签
 
                作用:定义段落
                注意:
                    默认p标签自动在前后加入间距
            3. br标签(单标签)
            
                作用:插入一个简单的换行符(类似于回车)


            4. hr标签(单标签)
            
                作用:表示水平分隔线


                早期用来制作标题下面的下划线,现在基本不使用,后期使用border(边框样式来代替) 
                -->
</body>
</html>

      文本标签(重点)   作用:主要用于对文字内容进行修饰时使用

        1.b标签和 strong标签(双标签)
            作用:对文字进行加粗
            注意:
                两个标签都加粗效果,在H5建议使用strong标签

         2.i标签和 em 标签
            作用:让文字变顷斜(斜体)

            注意:

                两个标签都斜体效果,在H5建议使用em标签

                注意:
                
                    这四个标签都有强调的作用,一般在网页中,只需要对需要强调的文字进行修饰即可
        3.small标签

            作用:让文字呈现相对小号字体效果

            注意:

                1.相对性(针对当前文字进行缩小)
                2.small标签有底线(小得有下限值)

        4.big标签

            作用:让文字呈现相对大一号的效果

            注意:
                1.相对性(相对大一号)
                2.big标签没有上限值

        5.pre标签

            定义:预格式化的文本  (会保留空格和回车)

            作用:一般用于保留计算机代码格式使用


        6.u标签（了解）

            作用:主要给文字加下划线效果

            注意:
                一般不建议在文字中使用u标签,容易和a标签搞混



        7.del标签

            作用:给文字加删除线


            运用场景:现价与原价中的使用


        8.sub标签
            <sub> 定义文档中的下标文本。


        9.sup标签
            <sup> 定义文档中的上标文本。

在这里插入图片描述

这篇关于【重学前端】html 基础入门一的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！