
Html 结构标准: 决定你是否有个好天然身体
CSS 表现标准: 决定你是否打扮的美丽外观
JavaScript 行为标准: 决定你是否有吸引人的行为
建议: 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐
HTML和CSS是两种完全不同的语言,目前学的是结构,就只写HTML标签。
了解字符编码格式字符集
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。gb2312 简单中文 包括6763个汉字BIG5 繁体中文 港澳台等用GBK包含全部中文字符 是GB2312的扩展,加入对繁体字BIG5的支持,兼容GB2312UTF-8则包含全世界所有国家需要用到的字符
一、简介记住一点,以后统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言,您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
二、HTML 的注意要点 1、 HTML文档的后缀名 和 Html文档内一切标签都不区分大小写 - 推荐小写标签 .html.htm注意:对于中文网页需要使用
声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为。
以上两种后缀名没有区别,都可以使用。
HTML文件内容是不区分大小写的,除非特别设置了相关配置,但是强烈推荐必须必须使用小写的标签,这是以后万维网联盟(W3C)要强制要求的。
2、 HTML 文件的标签布局 声明 - 全身 - 头 - 身 - 尾特别特别注意,笔者这里提到的尾部是 HTML 5 加入的内容,HTML 是没有尾部的标签
DOCTYPE html>
<html>
<head>
<title>
屏幕最上面的标题
title>
head>
<body>
body>
html>
声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。
元素描述了文档的标题
元素包含了可见的页面内容 - 收藏栏下面的可见内容
3、 什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言:HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面
4、HTML 标签 - 开放标签< > - 闭合标签 > - 空元素 (没有闭合标签) < >
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如
HTML 标签通常是成对出现的,比如 和
标签对中的第一个标签是开始标签 < >,第二个标签是结束标签 >
开始和结束标签也被称为开放标签和闭合标签
但是也还有一种空元素,那就是没有闭合标签,只有开放标签的 HTML元素 < >
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| 这是一个段落 | |
| 这是一个链接 | |
| 换行,空元素 | 没有结束标签 |
想要空元素结束,只能在开始标签就在后面加斜杠 / 如,而且长远考虑,空元素最好要加斜杠 /
空元素在开始标签 < >中进行关闭(以开始标签的结束< />而结束)
Web浏览器(如谷歌、火狐浏览器等,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户。
浏览器控制像素点,使其在某个像素点位置进行渲染,渲染引擎也是如此,所以我们可以将浏览器看作是一种渲染引擎,不过我们需要类似调动渲染引擎的手段 —— HTML 标记语言、CSS、JavaScript
6、HTML 版本| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5
DOCTYPE html>
8、Html 5 中文编码插入
在头部位置 标签内插入元数据
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题title>
head>
<body>
body>
html>
9、关于 HTML 编辑器的选择 - Vs Code
VS Code 下载链接:https://code.visualstudio.com/
VS Code 怎样改成中文版?首先点击扩展(也就是四个小方格),在搜索栏内输入 Chinese。点击 install ,下载安装简体中文,在右下方会出现 restart 点击就好。再重启 vs 后就会变成简体中文。10、HTML标签的语义化
有时候你学习 HTML 时,会发觉怎么感觉好像有好多重复作用的标签,比如 和 标签,这两个标签在页面上显示的效果都一样,但是为什么还要弄一个同样效果的标签出来,这就是HTML标签的语义化的意义。
核心:合适的地方给一个最为合理的标签。
语义是否良好: 当我们去掉 CSS 之后,网页结构依然组织有序,并且有良好的可读性。
通俗点讲,就是一眼看去,就知道那个是重点,结构是什么,知道每块的内容是干啥的。
遵循的原则:先确定语义的 HTML ,再选合适的 CSS。
三、对常用 Html 标签进行记录 理解结构化标签 与 CSS 渲染的分工合作其实 Html 作为结构标签,最好的做法是将渲染交给 CSS 来做,而 Html 只要做好网页布局,就行了。
没( 熟记)的随机认识一下就行了 1、标题 h 标签( 熟记)单词缩写:
head头部. 标题 title 文档标题
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题。
<h1> 标题文本 h1>
<h2> 标题文本 h2>
<h3> 标题文本 h3>
<h4> 标题文本 h4>
<h5> 标题文本 h5>
<h6> 标题文本 h6>
2、段落 p 标签( 熟记)
单词缩写:
paragraph段落 [ˈpærəgræf] 无须记这个单词
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
<p> p>
3、换行 br 标签(熟记)
单词缩写:
break打断 ,换行
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
<br />
4、排版标签 div、span (核心熟记)
这个 在没有其他适当语义的元素可以使用时,请使用 注释:HTML5 规范建议开发者尽量使用其他元素替代 单词缩写: 标签属性参数 单词缩写: 单词缩写: 在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成, 使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下: 注意: 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。 任何标签的属性都有默认值,省略该属性则取默认值。 建议: 尽量不使用 CSS的样式属性,使用外部链接样式,方便以后修改。 学习链接 欢迎分享,转载请注明来源:内存溢出 、、
排版标签主要和 CSS 搭配使用,显示网页结构的标签,是网页布局最常用的标签。标签是古老的排版方式,现在已经不用了。
div span 是没有语义的 是我们网页布局主要的2个盒子 css+divdiv 就是
division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。span, 跨度,跨距;范围
span 有时会作为属性,赋予一个跨越的作用,比如跨越多少列多少行,这几行几列的样式,会被 CSS 渲染。b i s u 只有使用,没有强调的意思 strong em del ins 语义更强烈
i 斜体标签(熟记)
<b>
定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。
标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。 元素,如果看到有些不懂的 HTML 文件内应用该标签,大致可以被理解为这种作用。 元素。
image 图像<img src="图像URL" />
alt (alternation 可替换文本)src (source 图片源)
7、超链接标签(重点)
水平线标签(认识)
anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的
horizontal 横线 [ˌhɔrəˈzɑntl] 同上<hr/>
是空元素,只有开始标签,没有闭合标签。<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 标签名>
微信扫一扫
支付宝扫一扫
评论列表(0条)