前端学习笔记(一) - 网页要素、html基本结构、常用标签及乱码问题解决

最新推荐文章于 2020-12-08 20:36:04 发布

sunshine2285

最新推荐文章于 2020-12-08 20:36:04 发布

阅读量248

点赞数 2

分类专栏：前端文章标签： html基础 html结构常用标签网页构成元素 html乱码解决

本文链接：https://blog.csdn.net/sunshine2285/article/details/88855303

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

根据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中的特殊字符，例如&nbsp–空格，更多 html实体
内联框架：使用 <iframe> 标签创建一个内联框架，作用是在当前页面引入另一个页面,详细用法查html参考手册 iframe标签
超链接：可以设置target属性的值，让超链接打开的网页显示在不同地方，_self-当前页打开(默认值)，_blank-新的空白页打开，内联框架name-在内联框架中打开，通过锚点实现页面之间的跳转a标签详情

[1] html参考手册 [2] h5参考手册

sunshine2285

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记(一) - 网页要素、html基本结构、常用标签及乱码问题解决

前端基础(一)根据W3C标准，一个网页主要由三部分组成：结构 – html 描述页面结构表现 – css 控制页面中元素的样式行为 – JavaScript 用于响应用户操作html (Hypertext Markup Language)– 超文本标记语言，负责网页的结构,标记是指使用标签的形式来标识网页中的不同组成部分,超文本是指使用超链接实现不同网页之间的跳转。...
复制链接

扫一扫