HTML基础
一、HTML标签的导读:
1.1 HTML语法规则:
1.HTML 标签是由尖括号包围的关键词,例如 <html>。
2.HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为**双标签**。
3.签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
有些特殊的标签必须是单个标签(极少情况),例如 ,我们称为单标签。
1.2 标签的关系:
双标签关系可以分为两类:包含关系和并列关系
包含关系(父子关系):
<head>
<title> </title>
</head>
并列关系(兄弟关系):
<head> </head>
<body> </body>
1.3基本骨架结构:
<!DOCTYPE html> #是html5标准网页声明,表示网页采用html5。
<html lang="en"> #表示该页面是html语言的英文网站。如果是中文页面,可将其改为<html lang="zh">
<head> #是网页的头部分中包含有的内置标签,用来申明使用的脚本语言,以及网页传输时使用的方式等。
<meta charset="utf-8"> #规定HTML文档的字符编码,UTF-8是一个万国码,基本可以处理任何文本内容。
<title>18岁秃头少女</title> #定义文档的标题,显示在浏览器标签页上。
</head>
<body> #这里包含可见的页面内容
<h1>我的第一个标题</h1> #定义一个大标题
<p>我的第一个段落。</p> #定义一个段落
</body>
</html>
-
字符集:
- 1.字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
- 2.在标签内,可以通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
- 3.
- 4.charset 常用的值有:GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家需要用到的字符.
- 5.注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量统一写成标准的 "UTF-8",不要写成 "utf8" 或 "UTF8"。
二.常用文本标签
2.1标题标签
标题标签 <h1> - <h6>(重要) 为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题,即<h1> - <h6> 。 具体实现: <h1> 我是一级标题 </h1> 特点: 1.加了标题的文字会变的加粗,字号也会依次变大。 2. 一个标题独占一行。 <h1>标题一共六级选,</h1> <h2>文字加粗一行显。</h2> <h3>由大到小依次减,</h3> <h4>从重到轻随之变。</h4> <h5>语法规范书写后,</h5> <h6>具体效果刷新见。</h6>
-
标题元素可用于指定内容的标题和子标题,HTML 包括六个级别的标题:
~
-
#
是大标题,只能有一个。
-
以正确的顺序使用标题,不要使用
来表示副标题,后面跟
来表示副副标题 - 这是没有意义的,会导致奇怪的结果。
-
在可用的六个标题级别中,最好只在每页使用不超过三个。
2.2段落标签
<p>这是一个段落</p> <br> 换行单标签,它是一个空的html元素。 <hr> 单标签分割线
2.3文本格式化标签
-
<strong>我是加粗的标签</strong> <em>我是倾斜的标签</em> <del>我是中划线(被删除)标签</del> <ins>我是下划线标签</ins> <kbd>我是加框的标签</kbd> <mark>我是高亮的标签</mark>
2.4div和span标签
<div> 和 <span> 是没有语义的,它们就是一个盒子,用来装内容的。 具体实现: <div> 这是头部 </div> <span> 今日价格 </span> 特点: 1. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子 2. <span> 标签用来布局,一行上可以多个 <span>。小盒子
三.注释及特殊字符
3.1 注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
HTML中的注释以“”结束。 具体实现: 快捷键: ctrl + / 一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的. 添加注释是为了更好 地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的
2.3 特殊字符:
在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。
重点记住:空格 、大于号、 小于号 这三个, 其余的使用很少,如果需要回头查阅即可。
-
在浏览器中多个空格只会保留一个,所以如果想要输入多个空格,可以输入代码: 想要几个空格就输入几个 不要忘记 ;