HTML基础（1）｜青训营笔记什么是HTML HTML 指的是超文本标记语言(HyperText Markup La

1.什么是HTML

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

HTML不是一种编程语言,而是一种标记语言

标记语言是一套标记标签

HTML就是使用标记标签来描述网页

HTML文档包含了HTML标签以及文本内容

HTML文档也叫做web页面

2.浏览器

前端代码--->浏览器解析渲染--->页面

浏览器的内核 (渲染引擎) :负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

3.Web标准

Web标准是由W3C组织和其他标准化组织指定的一系列标准的集合。

为什么需要Web标准

使代码适配不同的浏览器
便于网站维护

HTML使结构，CSS是表现，CS是行为。

4.语法规范

<html> </html> //大部分都是双标签
<br />         //单标签

标签关系：
包含关系
<head>
    <title></title>
</head>

并列关系：
<title></title>
<body></body>

5.基本结构标签（骨架标签）

<html></html>    //页面中最大的标签，我们称之为根标签

<head>           //文档的头部     注意在head标签中我们必须设置的标签使title
</head>

<title></title>  //文档的标题     让页面有一个属于自己的网页标题

<body>           //文档的主题     元素包含文档的所有内容，页面内容基本都是放在body里的
</body>

<!DOCTYPE html>   //文档类型声明   告诉浏览器这个文档是用html5写的，这个标签其实并不属于html，所以其只能写在开头

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">  //lang是language的缩写，en代表这是个英文网页，zh-CN代表中文网页                                                               
<head>
    <meta charset="utf-8" /> 引入utf-8字符集，这个称为万国码，基本涵盖世界各国所用的所有字符
    <title></title>
</head>
<body>

</body>
</html>

6.标题标签

一共六级
标题与标题之间有缝隙

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <h1>
            我是一级标题
        </h1>
        <h2>
            我是二级标题
        </h2>
        <h3>
            我是三级标题
        </h3>
        <h4>
            我是四级标题
        </h4>
        <h5>
            我是五级标题
        </h5>
        <h6>
            我是六集标题
        </h6>
    </body>
</html>

7.段落标签和换行标签

<p>      //pragraf的缩写，表示段落，根据显示框大小自动换行，段落与段落之间有缝隙
</p>

<br/>    //break的缩写，表换行

8.文本格式化标签

<strong></strong> <b></b>  加粗标签
<em></em>         <i></i>  倾斜标签
<del></del>       <s></s>  删除线标签 delete
<ins></ins>       <u></u>  下划线标签

//都是常用前者

9.div 和 span

<div>   是division的缩写，表示分割，分区。
</div>

<span></span>  意味跨度，跨距

//这两个标签都是没有语义的，他们就是一个盒子，用来装内容的

注意：
//  1.每个div标签独占一行
    2.span标签用来布局，一行可以加多个span

10.图像标签

<img src = "......." alt = 图片加载失败/>

各个属性：
src   图片路径 必须属性
alt   替换文本 图像不能显示时显示文字
title 提示文本 鼠标放在图像上显示的文字
width 像素    宽度
height像素    高度
border像素    设置图像的边框粗细

一般宽度和高度只该一个就行，另一个会等比例缩放，防止图片变形
现阶段路径先使用相对路径“.”，因为浏览器会自动设置一个服务器，你所设置的绝对路径在那个服务器中找不到
属性采取键值对s的格式，即属性 = “属性值”
路径也可以是网站中的图片在网络中的地址

目录文件夹：装有有关页面的所有素材，包含html文件、图片等

12.相对路径

同一级路径直接写文件名就行
下一级路径用 /
上一级路径用 ../

注意：相对路径用 /

绝对路径用 \

图片网址也算是绝对路径，它在互联网中是唯一的

13.链接标签

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文字或者图片 </a>

href 指定链接目标的url地址
target 打开方式,其中_self为默认值，_blank为在新窗口中打开方式

外部链接：
例子：<a href="http://baidu.com/"></a>
内部链接：打开自己网址内部页面之间的相互链接
<a href="corsfire.html"> 穿越火线 </a>
空链接 当不知道让链接通向哪里时用#来填充href

a是 anchor 的缩写，意为：锚

14.表格

15.列表

注：表格用于展示数据，列表用于布局

HTML基础（1） ｜ 青训营笔记