HTML 基础学习

idiot_MAN

已于 2022-07-02 10:55:32 修改

阅读量124

点赞数

分类专栏：前端 HTML 文章标签：学习前端

于 2022-06-29 23:32:19 首次发布

本文链接：https://blog.csdn.net/idiot_MAN/article/details/125521684

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

网站得基本概念

1，什么是网站

网站(Website)是指在因特网上根据一定的规则，使用HTML(标准通用标记语言）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务

2，什么是网页

网页是网站中的一页，是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是超文本标记语言格式。想要浏览某个网站，需要通过浏览器来观看。

3，什么是html

超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用)HTML (HyperText Mark-up Language)是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义

第一个html页面

<html>
    <head>
        <tittle></tittle>
    </head>
    <body>

    </body>
<html>

常用得浏览器

谷歌浏览器，火狐浏览器，IE，Safair浏览器，Opera浏览器

浏览器内核

内核的种类很多，常见的浏览器内核可以分这四种: Trident、Gecko、Blink、Webkit作为一名前端开发人员，你写的页面在那些浏览器测试过?这些浏览器的内核分别是什么?下面总结一下各常用浏览器所使用的内核:
IE: Trident内核，也是俗称的IE内核
Chrome:统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核Firefox: Gecko内核，俗称Firefox内核
Safari: Webkit内核
Opera:最初是自己的Presto内核，后来是Webkit，现在是Blink内核360、猎豹:IE+Chrome双内核
搜狗、遨游、QQ浏览器: Trident(兼容模式) +Webkit(高速模式)百度、世界之窗:IE内

web标准

Web标准也称网页标准，它由一系列标准组成，这些标准大部分由W3C负责制订，也有一些标准由其他标准组织制定的，如ECMA的ECMAScript标准等。
狭义的Web标准是指网页设计的DIV+CSS化，广义的Web标准是指网页设计要符合W3C和ECMA规范。
在符合标准的网页设计中，CSS与HTML、JavaScript并列称为网页前端设计的3种基本语言，其中:
HTML负责构建网页的基本结构;
cSS负责设计网页的表现效果;
JavaScript负责开发网页的交互效果。

W3C是World Wide Web Consortium 得缩写，中文译为“万维网联盟”，是一个标准化组织。W3C除了制定CSS标准，还制定了HTML,XML等200多项web技术。W3C的官网是 http://www.w3c.org

html语法规范

1，标签的写法

HTML标记标签通常被称为HTML标签(HTML tag)。
HTML标签是由尖括号包围的关键词，比如<html>
HTML标签通常是成对出现的，比如<b>和</b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
特殊标签-自闭和标签(单标签)比如: <br/>

有两种类型的标签：
双标记 <标记名>内容</标记名>
单标记 <标记名 />
属性:
对标签的描述--属性，由属性名和属性值组成，属性值一定要写到引号中

<标记名属性名="属性值" 属性名="属性值" />
<标记名属性名="属性值" 属性名="属性值">内容</标记名>

2，标签之间的关系

（1）包含关系

<html>
    <body></body>
</html>

（2）并列关系

<html>
    <head></head>
    <body></body>
</html>

3，标签属性

属性可以为html提供一些额外的信息，或者对html标签进行修饰。属性需要添加在开始标签中，语法格式为：

attr="value"

attr 表示属性名，value 表示属性值。属性值必须使用双引号" " 或者单引号' ' 包围

<!DOCTYPE html>  //声明是一个html5.0的版本
<html lang="en">  //网页的根元素，lang是告诉浏览器或者搜索引擎王爷的内容是什么样的语言（zh是中文，en是英文）
	<head>  //网页的头部内容 头部的内容除开tittle外，其他的内容用户是看不到的 
		<meta charset="utf-8"> //设置网页编码 ，告诉浏览器需要用对应的编码来渲染并解析html对应的内容
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>  //设置浏览器兼容
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/> //是否适应大小  设置自动适应浏览器大小
		<title></title> //网页标题
		
	</head>
	<body>
		<div class="clearfloat">
			<p class="left">段落1</p>
			<p class="right">段落2</p>
		</div>
	</body>
</html>

编译软件

前端的编译软件有很多 vscode , sublime , hbuilder , webstorm , notepad++

vscode的基本使用

1）!+tab 或者 doc+tab 直接生成html基本页面结构

2）安装一些插件

view in browser 在浏览器中查看

Auto Rename Tag                 自动关闭标签，在开始标记的结束括号中键入后，将自动插入结束标记

Bracket Pair Colorizer          个成对儿的括号都会以不同的颜色进行区别

code Runner                   万能的语言运行环境