HTML-1软件开发体系、应用系统、前端开发内容及学习方法和建议；网站和网页关系、网页显示过程、网页三大组成部分；浏览器渲染内核、不同浏览器内核；元素、元素属性和嵌套；注释

龙猫呗

已于 2023-05-14 23:31:13 修改

阅读量52

点赞数

分类专栏： HTML 文章标签： html 学习方法前端笔记

于 2023-05-14 23:18:55 首次发布

本文链接：https://blog.csdn.net/qq_54075517/article/details/130675170

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、邂逅前端开发

1.1 软件开发体系

在这里插入图片描述

1.2 完善的应用系统

在这里插入图片描述

1.3 前端开发内容

前端开发任务
- web开发、小程序开发
- 移动端（Uniapp、Reat、Native）、桌面端（Electron）、服务器开发（Node）
前端开发路线

1.4 学习方法和建议

要了解新技术的历史、局限性、本质
知识分为两类
- 常用的：可以练习、熟能生巧
- 不常用的：知道在哪可以找到即可

二、邂逅web后端开发

2.1 电脑配置，推荐软件

Chrome浏览器：开发必备浏览器
VSCode编辑器：开发推荐编辑器（编写代码）
Xmind Zen思维导图：思维导图笔记
Typora：markdown笔记软件

2.2 网站和网页的关系

网站由多个网页组成

2.3 网页的显示过程

用户角度：浏览器输入网址-> 找到服务器地址，请求静态资源返回浏览器->浏览器解析静态资源
前端工程师角度：
什么是服务器？：类似电脑的主机
- 24h不关机
- 无显示器
- 一般是Linux系统
- 大多数公司使用云服务器系统

2.4 网页的三大组成部分

HTML: 网页的内容结构
CSS: 网页的视觉体验
JavaScript: 网页的交互处理

三、浏览器及其内核

3.1 渲染内核

作用：解析网页语法并渲染（显示）网页

3.2 不同浏览器的内核

Trident（三叉戟）：360安全、搜狗、百度、UC
Gecko（壁虎）：火狐
Presto（急板乐曲）->Blink（眨眼）：Opera
Webkit：360极速、搜狗、移动端浏览器（Android、ios）
Webkit->Blink：Google Chrome、Edge

四、邂逅HTML

4.1 第一个网页

创建一个txt文件，改后缀为html
往其中添加文字内容，用浏览器打开
添加<h1><h3><p>标签尝试体验

4.2 HTML语言与基本结构

超文本语言（HTML）：网页的标记语言
标记语言
- 标记（标签）组成
- 某些内容的特殊标记，让解释器识别处理, 例如<h2></h2>识别为二级标题–加粗放大
- 标签和内容组成部分为元素
超文本
- 普通文本、图片、音频、视频
- 超链接：从本网页跳转到另一个网页
HTML文件基本结构

<html>

    - <head></head>

    - <body></body>

  - </html>

4.3 选择开发工具

专业前端开发工具
- WebStorm、Sublime、VSCode、Atom、IDEA、Dreamweaver
- 有只能提示、高亮识别、语法检测、开发效率高
推荐
- VSCode官网安装使用（免费）
- 安装相关拓展
  - 语言包：中文 Chinses
  - 颜色主题： atom one dark（自己适应）
  - 文件夹图标：great icons
  - 右键（Live Sever）在浏览器中打开网页：open in browser
  - 自动重命名标签(改前标签，后面自动跟随改动)：auto rename tag
- 内部设置（文件->首选项->设置）
  - auto save：自动保存（文件->自动保存，打钩）
  - font size：修改源代码
  - word wrap：代码自动换行
  - render whiltespace：空格的渲染方式（按自己喜好）
  - tab size：代码缩进，数值改为2（比较规范）

4.4 元素

Tip：在VSCode的Htm空白界面，直接打英文感叹号，然后回车，直接出来html的基础格式代码
元素的组成：
- 开始标签：<h1>
- 结束标签：</h1>
- 内容：位于开始和结束标签中间，例如“11”即为内容，<h1>11</h1>
- 元素：上述三个组成的整体叫元素，<h1>222222</h1>
单标签元素：只有开始标签，无结束标签
- eg：等等
双标签元素：有开始和结束标签
html元素不区分大小写

4.5 元素的属性

<p class="editor-note">吧啦啦啦</p>

上面的class，就是属性，属性包含元素的额外信息，但不会出现在内容里。
一个属性必须包含以下：
- 一个空格。（在属性前后有一个空格；若一个标签有多个属性，则属性之间用一个空格隔开）
- 属性名称：后面有一个等于号
- 一个属性值：即 “一对引号” 中的内容
属性分类
- 公共的：每一个元素都可以设置eg：class、title
- 某些元素特有的，例如下面

<a href="http://baidu.com"></a>
<meta charse="">

4.6 元素的嵌套

eg：ul、li、li、ul
tip：（快捷键） alt+shift+向上/向下箭头，可以快速把上面例子的 li、li 进行复制粘贴
元素之间的关系
- 父子（上下级）
- 兄弟（同级）

4.7 注释

快捷键：选中注释内容，然后 ctrl + /
意义：
- 自己：理清思路
- 他人：合作开发时，减少沟通成本
- 方便开源

龙猫呗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-1软件开发体系、应用系统、前端开发内容及学习方法和建议；网站和网页关系、网页显示过程、网页三大组成部分；浏览器渲染内核、不同浏览器内核；元素、元素属性和嵌套；注释

软件开发体系、应用系统、前端开发内容及学习方法和建议；网站和网页关系、网页显示过程、网页三大组成部分；浏览器渲染内核、不同浏览器内核；元素、元素属性和嵌套；注释
复制链接

扫一扫