Web前端开发之html01

最新推荐文章于 2024-05-18 21:57:13 发布

墨非墨Lg

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量70

点赞数

分类专栏：笔记前端 html 文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_58487644/article/details/124651887

版权

笔记同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

8 篇文章 2 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

一、Web前端介绍

1. 什么是网页

网页是基于浏览器的应用程序，是数据展示的载体.

2. 网页的组成

1)浏览器

向服务器发送用户请求指令
接收并解析数据展示给用户

2)服务器

存储数据
处理并响应请求

3)协议

规范数据在传输过程中的打包方式

3. 网页的优势

1)即时响应

更新服务端页面即完成更新
客户端重新加载即兑现内容

2)无需安装和更新

无需安装任何应用软件
只需要一个浏览器执行即可

4. 开发前的准备

运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、Webstrom等）

二、 HTML语法介绍

1. HTML介绍

超文本标记语言(html)浏览器能够识别和解析的语言，通过元素的形式构建页面结构和填充内容

2. 元素

元素也称为标记或标签，用于在网页中标记内容 (1) 语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示 (2) 分类： - 双标签：成对出现，包含开始标签和结束标签。例：

```
<html></html>
<div> </div>
```

单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例： <br> <br/>

(3) 标签属性

标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：

```HTML
<img src="imgs/img01.jpg">
```

- 同一个标签中可以添加若干组标签属性，使用**空格**间隔。例：

```html
<img src="imgs/img01.jpg" 
     width="200px" 
     height="200px">
```

3. 使用

(1) 创建网页文件，使用.html或.htm作为文件后缀。 (2)添加网页的基本结构：

<!doctype html>
<html>
    <head>
        <title>网页标题</title>
        #移动端需加下面代码
        <meta name="viewport" content="width=device-width,user-         scalable=no,initial-scale=o，maximum-scale=1.0,minirrum-scale=1.0">

        <meta charset="utf-8">
    </head>
    <body>
         网页主体内容
    </body>
</html>

(3)标签嵌套

在双标签中书写其他标签。嵌套结构中，外层元素称为父元素，内层元素称为子元素。多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素。平级结构互为兄弟元素.

(4)HTML语法规范

标签名不区分大小写，建议使用小写。

注释语法：

墨非墨Lg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端开发之html01

一、Web前端介绍1. 什么是网页网页是基于浏览器的应用程序，是数据展示的载体.2. 网页的组成 1)浏览器向服务器发送用户请求指令接收并解析数据展示给用户 2)服务器存储数据处理并响应请求 3)协议规范数据在传输过程中的打包方式 3. 网页的优势 1)即时响应更新服务端页面即完成更新客户端重新加载即兑现内容 2)无需安装和更新无需安装任何应用软件只需要一个浏览器执...
复制链接

扫一扫