HTML笔记

一、HTML简介1、HTML是什么？HTML：hyper text markup language 超文本标记(标签)语言有各种标签组成，用来制作网页，告诉浏览器该如何显示页面2、作用制作网页，控制网页和内容的显示插入图片、音乐、视频、动画等多媒体通过连接来检索信息使用表单获取用户的信息，实现交互3,、版本W3C:world wide web consortium万维网联盟，制定web技术相关标准和规范的组织，HTML就是由W3C制定的标准两个版本：HTML 4.0.1、HTML5.0——通常H5官网：http://www.W3shcool.com.cn4,、扩展名HTML文档是以.html或.htm结尾
二、HTML文档结构1、基本结构1.1简介HTML标签是由尖括号括起来的关键词，如,通常是成对出现的，如以为根标签，头部和主体部分③头部提供挂壁与网页的相关信息，如标题、文档类型、字符编码、关键词等摘要信息④主体部分提供网页要显示的内容，真正显示页面中的⑤合理缩进⑥标签名不区分大小写，但一般要小写welcome to html，技术：
1.2开发工具记事本notepad，sublime，notepad++，，dreamweaver，vscode，webstorm等使用步骤：1.新建文件（ctrl+n），然后保存（ctrl+s），指定扩展名.html2.编写HTML代码3，在浏览器中打开文件使用技巧：先保存再写代码，否则代码无颜色提示创建一个文件夹，用于保存所有的网页内容，将文件夹拖拽到sublime中，便于管理显示/隐藏侧边栏方式1：查看——侧边栏——显示/隐藏侧边栏方式2：ctrl+k紧按着8显示多栏方式1：查看——布局——列数：2列方式2：alt+shift+21.3浏览器常见的浏览器ie微软，chrome谷歌，firefox火狐，safari苹果浏览器作用：读取html文件，并以网页的形式进行显示浏览器不会直接显示html标签，而是使用标签来解释网页的内容2.标签2.1标签的组成一个完整的HTML标签的组成：<标签名 属性名=“属性值”>内容</标签名>
属性值要用双撇号括起来，一般用双引号2.2标签的分类根据标签是否关闭，分为，关闭型和非关闭型关闭型：有结束标签，即标签成对出现非关闭型：没有结束标签
非关闭型：没有结束标签

根据标签是否独占一行，分为块级标签和行级标签块级标签：显示为标签，独占一行

行级标签：在行内显示，可与其他内容在同一行显示


2.3注释注释在浏览器中是不会显示的，是用来解释HTML语句，但通过查看源代码的方式可以看到语法：
2.4实体字符
也称为特殊字符，用于显示一些特殊符号，如：<>&空格等语法：
&实体字符的名称
常见的实体字符


2.5文档类型
在HTML文档的第一行，使用<!DPCTYPE HTML>生摩纳哥HTML文档的类型用来告诉浏览器页面的文档类型，简单来讲，用来指定HTML版本的规范
目前基本最常用的html5,
三、常用标签
3.1基本标签

3.1.1有序列表

ol:ordered list
li:list item

默认使用阿拉伯数字、从1开始标记，可以通过属性进行修改
type属性：设置列表的符号标记、取值；数字1（默认）、字母（a或A）、罗马数字(i或I)
start属性：设置起始值，值必须是数字
3.1.3定义列表
dl:definition list
dt:definition title
dd:definition description
3.1.4水平线标签

hr:horizontal
常用属性
color:颜色
两种书写方法：
①颜色名称：如red、green、blue、white、black、pink、orange等
②16进制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每种颜色的取值范值0-255，转换为16进制00-FF
eg: #FF0000 红色 #00FF00绿色 #0000FF蓝色 #FFFFFF白色、#CCCCCC #FF7300
size:粗细，数值
width宽度：
两种写法：
像素：绝对值（固定值）
百分比：相对值，相对于水平线标签所在父容器宽度的百分比
ailgn对齐
取值：center居中 left right
3.1.5图像标签
img:image
常见的图片格式：.jpg .png .gif .bmp
常见的属性：
如果图片与html源代码在同一个文件夹中，可以直接在src中写图片名称即可
习惯上，我们会将多个图片与html代码文档分别放在同一个文件夹project中的不同目录下，此时需要
在src中指定图片的路径为相对路径
.\表示当前目录
…\表示上级目录
alt:当图片无法显示时显示的提示信息
title:当鼠标放到图片上时显示的提示信息
width和height:设置图片的宽度和高度