前端HTML语言学习总结

通关村-cyp

已于 2023-03-16 14:05:20 修改

阅读量70

点赞数

文章标签：前端 html 学习

于 2023-03-16 14:00:56 首次发布

本文链接：https://blog.csdn.net/qq_34368653/article/details/129584961

版权

电脑配置

修改后缀显示后面,方便查看

安装软件

Chrome浏览器：开发必备浏览器
https://www.google.cn/chrome/index.html
VSCode编辑器：开发推荐编辑器（编写代码）
https://code.visualstudio.com/

VSCode安装

VSCode编辑器下载-安装：https://code.visualstudio.com/

安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）
- 中文插件：Chinese
- 颜色主题：atom one dark
- 文件夹图标：VSCode Great Icons
- 在浏览器中打开网页：open in browser、Live Sever
- 自动重命名标签：auto rename tag
VSCode的配置：
- Auto Save 自动保存
- Font Size 修改代码字体大小
- Word Wrap 代码自动换行
- Render Whitespace 空格的渲染方式(个人推荐)
- Tab Size 代码缩进
  推荐2个空格（公司开发项目基本都是2个空格）

网页和网站

网页
- 浏览器查看的页面,是网络中的一"页".
- 网页可以查看的内容,包括文字.链接.图片等
网站
- 由多个网页组成

网页从编写到浏览器显示的整个过程

前端工程师编写HTML/CSS/JS代码 -> 打包发布到服务器作为静态资源 -> 用户在浏览器输入域名 -> 浏览器发出静态资源请求 -> DNS将域名转换为IP地址 -> 浏览器找到服务器的IP地址，服务器返回静态资源给浏览器 -> 浏览器解析和渲染静态资源，显示网页

网页的组成

阶段一：HTML元素；
阶段二：HTML元素 + CSS样式；
阶段三：HTML元素 + CSS样式 + JavaScript语言；

html：网页的骨骼，负责网页的内容结构

css：网页的外表，负责网页的视觉体验和网页的美化

JavaScript：网页的灵魂，负责网页的交互处理

浏览器

作用:显示网页
核心部分:“浏览器内核”/渲染引擎

浏览器的渲染引擎

浏览器内核又称浏览器渲染引擎，是浏览器的最核心部分。负责解析网页语法并渲染网页。

常见的浏览器内核有

Trident （三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
Gecko（壁虎）：Mozilla Firefox；
Presto（急板乐曲）-> Blink （眨眼）：Opera
Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
Webkit -> Blink ：Google Chrome

HTML语言

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
- HTML元素是构建网站的基石；
什么是标记语言（markup language ）？
- 由无数个标记（标签、tag)组成；
- 是对某些内容进行特殊的标记，以供其他解释器识别处理；
- 比如使用
  标记的文本会被识别为“标题”进行加粗、文字放大显示；
- 由标签和内容组成的称为元素（element）
什么是超文本（ HyperText ）
- 表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
- 可以表示超链接（HyperLink），从一个网页跳转到另一个网页；
HTML文件的拓展名是.htm(旧).html(目前使用)

HTML元素说明

元素组成:开始标签+属性+内容+结束标签
元素属性组成: 属性名 + 属性性值 target = “_blank”
元素分类
- 单标签元素:html、body、head、h2、p、a元素；
- 双标签元素:br、img、hr、meta、input；
元素关系
- 父子关系:嵌套
- 兄弟关系:同级

HTML的注释

作用:便于调试.维护.与别人共同开发
快捷键:crtl + /

HTML 结构

文档声明
- 说明文档类型,当前为HTML5界面,让浏览器正确解析
html元素
- 根元素
- 建议添加 lang属性区分中英文 zh-CN 中文简体 en 英文
head元素
- 设置配置信息,一般进行2个设置
  - title 元素:设置网页的标题
  - meta元素:设置字符编码(让浏览器正常解码,不然会导致乱码)
body元素
- 运用HTML元素,设置网页内容和结构

常见的HTML元素

h元素: h1-h6可以设置不同标题
p元素: 段落元素
img元素:图片元素
- src属性：source单词的缩写，表示源
  
  ✓ 是必须的，它包含了想嵌入的图片的文件路径。
- alt属性：不是强制性的，有两个作用
  
  ✓ 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
  
  ✓ 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；
- 图片设置路径
  - 绝对路径:
    - 本地路径:从电脑的根目录开始一直找到资源的路径；
    - 网络路径:再新窗口打开图片,再复制链接.
      - 服务器开启防盗链,造成图片引入失败
  - 相对路径:相对于当前文件的路径(推荐使用)
    - . 代表当前文件夹（1个.）
    - …代表上级文件夹
  - 用/分隔符区分 ./ …/
a元素:锚点元素,定义超链接,打开新的URL
- href属性：要打开的URL地址
- target属性:打开方式,新开窗口打开,本身窗口打开等
- a元素进行锚点链接
  - 要跳转的元素设置一个id
  - 定义a元素,指向对应的id
- 可以嵌套浏览器能打开的元素,比如gif,pdf,img,
  
  嵌套的内容,如果浏览器打不开的,比如zip,会跳出下载链接
- .MP4特殊使用,可以打开,但是选择下载下载电影
- 能跳转应用,其他网页,发邮件等等
列表实现方法
- 列表元素,元素语义化
- div,相对自由,不受限
列表元素
- 有序列表元素 (ordered list) ol
  - 列表项 (list item) li
- 无序列表元素 (unordered list) ul
- 列表项 (list item) li
- 自定义列表 (definition list) dl
  - 自定义小标题(definition term) dt
  - 自定义内容描述(definition description) dd 可以多个
  - 应用场景:网站下放导航
- 注意事项
  - ol ul列表元素的直接子元素要是li,如果要嵌套其他元素,可以放在li里面
  - li不要单独使用,要在大框架 ol ul里面使用,结构完整
  - li里面可以用span元素再嵌套列表元素 ul li 等
表格元素
- 表格结构(常用)
  - table元素表格
  - tr (table row) 表格中的行
  - td (table data) 行中的单元格
```
  <table>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
```
    - border-collapse CSS 属性用来决定表格的边框是分开的还是合并的。
    - table { border-collapse: collapse; }
    - 合并单元格的边框
- 语义化表格结构
  - thead 表格表头
  - tbody 表格主题
  - tfoot 表格页脚
  - caption 表格标题
  - th 表格表头中的单元格
```
  <table>
    <caption>标题</caption>
    <thead>
      <tr>
        <th></th>
        <th></th>
      </tr>
    </thead>
  </table>
```
- 单元格合并
  - 单元格合并分成两种情况:
    - 跨列合并: 使用colspan
      
      在最左边的单元格写上colspan属性, 并且省略掉合并的td;
    - 跨行合并: 使用rowspan
      
      在最上面的单元格写上rowspan属性, 并且省略掉后面tr中的td;
  - 步骤
    - 确定"谁"需要跨行还是跨列
    - 确定是跨"行"还是跨"列"
    - 跨几行或几列
表单元素
- input元素
  - 属性 type: input的类型
    - text：文本输入框（明文输入）
    - password：文本输入框（密文输入） \
    - radio：单选框
    - checkbox：复选框
    - button：按钮
    - reset：重置
    - submit：提交表单数据给服务器
    - file：文件上传
  - type类型的其他取值和input的其他属性, 查看文档:
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
- 表单按钮
  - 普通按钮（type=button）：使用value属性设置按钮文字
  - 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
  - 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
- input 和 lable结合
  - label元素一般跟input配合使用，用来表示input的标题
  - labe可以跟某个input绑定，点击label就可以激活对应的input变成选中(使用较多)
- radio 单选
  - name值相同的radio具备单选功能
- checkbox 复选框
  - 属于同一种类型的checkbox，name值要保持一致,可以多个提交
- textarea 文本框
  - cols：列数
  - rows：行数
- select和option : 列表框
- form元素
  - 表单整体操作重置提交
  - 属性
    - action:用于提交表单数据的请求URL
    - method:请求方法（get和post），默认是get
    - target:在什么地方打开URL（参考a元素的target）
  - 请求方式对比:采用post的请求,可以对用户信息隐藏,不显示在url中,保护用户信息
iframe元素网页嵌套,(插入广告等)

HTML全局属性

定义:所有HTML元素都拥有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。
常见的全局属性
- id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样
  式（使用 CSS）时标识元素。
- class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选
  择和访问特定的元素；
- style：给元素添加内联样式；
- title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。
查找全局属性

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes