-
根据
W3C
标准,一个网页主要由三部分组成:- 结构 –
html
描述页面结构 - 表现 –
css
控制页面中元素的样式 - 行为 –
JavaScript
用于响应用户操作
- 结构 –
-
html
(Hypertext Markup Language)
–超文本标记语言
,负责网页的结构
,标记是指使用标签
的形式来标识网页中的不同组成部分,超文本是指使用超链接
实现不同网页之间的跳转。最新版本,HTML5
(推荐使用) -
html基本结构
:<!DOCTYPE html> <!-- 根标签,有且只有一个 --> <html> <!-- head标签不在网页中显示,用于帮助浏览器解析网页 --> <head> <!-- 网页的标题,搜素引擎检索网页时,首先检索标题 --> <title>first website</title> </head> <!-- 网页的主体结构 --> <body> This is my first website! </body> </html>
-
html注释
:<!-- 我是注释 -->
,在关键处注释是一个好习惯,注释要简洁明了 -
属性
:属性决定标签的表现效果,属性采用key
="value"
的形式在开始标签中使用,例如<font color="blur" size="10"> Hello world </font>
-
doctype
: 告诉浏览器当前网页使用的html的版本,h5文档声明<!doctype html>
,告诉浏览器以h5标准解析当前网页,写在网页最开头 -
html乱码解决
: 在中文系统的浏览器中若无指定默认采用GB2312
方式解码,解决乱码<meta charset="utf-8" />
-
常用标签
:使用html标签的时候并不关心标签的显示效果,重点要注意标签的语义,因为表现效果主要通过css来实现, 更多html常用标签标签 作用 <h1> </h1>
标题,从<h1> ~ <h6> 重要性依次递减
<p> </p>
表示一个段落,前后均会有换行
<br />
换行
<hr />
画一道水平分割线
<img />
引入图片
<meta /
用来设置一些元数据,比如网页的字符集,简介,关键字
-
<meta />
:属性 作用 charset="utf-8"
设置网页字符集 name="keywords" content="html5,js"
设置网页关键字 name="description" content="info of html5"
设置对网页的描述 http-equiv="refresh" content="5;url-http://www.baidu.com"
打开网页后5秒钟之后跳转到百度 -
<img />
:属性 作用 src
设置一个外部图片的路径,一般使用相对路径,常用格式 jpeg(jpg)
,png
,gif
区别使用alt
用于对图片进行描述,当图片路径出错无法显示时, alt
内的内容显示,同时搜索引擎根据alt
描述分类图片width
/height
二者只设置其中一个时,另外一个值随着图片的比例变化,如果二者均设置,则根据设置值来调整图片大小,除自适应界面外,一般不建议设置这两个值 JPEG(JPG)
:支持的颜色比较多,图片可以压缩,但是不支持透明,一般使用来保存照片等颜色丰富的图片
GIF
:支持的颜色少,只支持简单的透明,支持动态图,当图片颜色单一或者是动态图的时候使用
PNG
:支持的颜色最多,并且支持复杂的透明,但图片颜色复杂的透明图片 -
转义字符
:&
开始,;
结束,也称为实体,用于显示html中的特殊字符,例如 
–空格
,更多 html实体 -
内联框架
:使用<iframe>
标签创建一个内联框架,作用是在当前页面引入另一个页面,详细用法查html参考手册 iframe标签 -
超链接
:可以设置target
属性的值,让超链接打开的网页显示在不同地方,_self
-当前页打开(默认值),_blank
-新的空白页打开,内联框架name
-在内联框架中打开,通过锚点 实现页面之间的跳转a标签详情
前端学习笔记(一) - 网页要素、html基本结构、常用标签及乱码问题解决
最新推荐文章于 2023-03-15 12:53:37 发布