HTML5教程

【重学前端】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中,标签分为两大类:

  1. 双标签
双标签是指由开始标签和结束标签组成,
例如:<b>内容</b>
  1. 单标签
单标签是指没有结束标签的标签,由一个标签构成即为开始也是结束;
但根据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 基础入门一的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!