【01】PC端网页布局之HTML笔记-pink老师-2022/03

鬼扯子

已于 2022-04-22 10:44:56 修改

阅读量1.9k

点赞数 1

分类专栏：前端学习文章标签： html 前端 javascript html5

于 2022-03-15 21:45:37 首次发布

本文链接：https://blog.csdn.net/qq_44722174/article/details/123510537

版权

前端学习专栏收录该内容

8 篇文章 5 订阅

订阅专栏

PC端网页布局之HTML5

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

基础概念：

网站：在因特网上根据一定的规则，使用HTML等制作的专门用于展示特定内容相关的网页集合

网页：网站的一”页“，通常是HTML格式的文件，需要通过浏览器阅读，是构成网站的基本元素，通常由图片、链接、文字、音频、视频等元素组成，以html或htm后缀结尾，即HTML文件。

浏览器：网页显示和运行的平台。

常用浏览器及其内核：IE【Trident 退出历史舞台】、Edge【EdgeHTML=》Chromium】、Opera【Blink】、Chrome【Blink+V8引擎】、Safari【Webkit】、Firefox【Gecko+JaegerMonkey】
在这里插入图片描述

浏览器内核（渲染引擎）：主要由2部分构成：渲染引擎 和 JavaScript解析引擎，负责读取网页内容（HTML，CSS，JS，XML，img等）、整理讯息，计算页面显示方式并显示页面。
**加粗样式**

1. web标准的三大组成部分

Web标准：由W3C和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。目的是使内容能被不同浏览器兼容、便于维护和开发，更统一更标准，且更容易被搜索引擎搜索SEO。

Web标准的构成：结构【页面元素HTML】、表现【外观样式CSS】和行为【交互JS】。

最佳体验方案：结构 html、样式 css、行为 JavaScript 相分离，即写到对应后缀的 html，css，js 文件中。
在这里插入图片描述

2. 什么是HTML

超文本标记语言（Hyper-Text Markup Language）：用来描述网页的一种标记语言，而非编程语言。利用特殊的语法或符号来组织页面内容，其中，超文本的含义为：

多媒体内容，超越文本的限制
页面跳转，与世界各地的主机文件相连，即超级链接文本

3. HTML语法规则

HTML标签是由尖括号包围的关键词。通常成对出现，有开始标签和结束标签（标签皆为小写），例如双标签。有些特殊标签必须是单标签，例如换行<br>，无结束标签的元素称为“自闭和标签”。
元素嵌套： div元素（内容划分元素）是包裹其它元素的通用容器，也是HTML出现频频率最高的元素<div> </div>
标签关系：包含关系（父子关系，head 和 title）和并列关系（兄弟关系 head 和 body）
html结构： 主要分为两部分 head（网页描述）和body（向用户展示的网页内容）。比如 link、meta、title 和 style 都应放入 head 标签。

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>该网页名称</title>
	</head>
	<body>
	    <h1>这一部分是body</h1>
	    <p>这是一个网页结构的例子</p>
	    <p>这定义了html文档的head和body</p>
	</body>
</html>

4. HTML标签

使用HTML元素为Web内容赋予结构和内容

<!DOCTYPE>文档类型声明标签，告诉浏览器使用哪个版本的HTML显示网页，必须置于最开头位置。

<!DOCTYPE html>    

//表示网页采用html5，位于文档中的最前面的位置，处于 <html> 标签之前
//告知浏览器文档使用哪种 HTML 或 XHTML 规范。

文本格式化标签：使文字以特殊的方式显示，比如粗体【strong/b】、斜体（em/i）、~~删除线~~（del/s）、下划线（ins/u)。
注释的作用是代码添加说明，方便团队或个人日后查看，但又不影响代码本身，或不删除代码的前提下，让代码不起作用。html注释的写法为 
<div> 和 <span> 是没有语义的，就是一盒子，类似于ppt的文本框，用来装内容的。div独占一行，span可在一行显示多个。
<img src=" "> 图像标签
- src 是必须属性，插入图片的文件路径。如果是本地图像必须和html文件放在同一个文件夹下。
- alt 属性：图像含义的文本描述，屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，或无法加载图片时也会显示
- title 属性：提示文本/提示条 (tooltip)，鼠标放在图像上显示的文字。
- width 和 height 设置图像大小，一般只修改一个，会等比例缩放。
- 给图片加居中对齐是没有效果的，必须给父类加 text-align
- 各属性间没有先后顺序，以空格隔开，以键值对的格式设定。
用 a（Anchor）锚点元素来实现页面间的跳转。
1. 具有href属性指向链接URL（跳转目的地）
2. target属性指定链接的打开方式（属性值_blank表示链接在新标签中打开）
3. 锚文本（显示为一个可点击的链接），如果是锚点链接href=“#id”，如果地址是一个文件或压缩包，则会下载。
4. 可以通过把元素嵌套进a里变成一个链接，比如将图片嵌套进a元素中，则当鼠标光标悬停在图像上时会变成点击光标，使图片变成了链接
5. <a href=“跳转目标 #占位符” target=“目标窗口的弹出方式"> 文本或图像 \</a>
特殊字符
表格标签<table>：主要用于显示和展示数据，表格不是用来布局页面的，而是用来展示数据的。<tr> 定义表格中的行，<td> 定义表格中的单元格，嵌套在<tr> 中。表头单元格标签 <th> 里的文字会居中加粗显示。表格结构标签为了让表格有更好的语义，<thead> 表格头部，<tbody> 表格主体。合并单元格方式：
1. 先确定跨行/列合并；
2. 找到目标单元格写上rowspan/colspan=”合并单元格的个数“；
3. 删除多余的单元格；
列表标签：表格是用来展示数据的，列表是用来布局的。其最大特点为整齐、整洁、有序，作为布局更加自由和方便。分类：
1. 有序列表 :以特定元素<ol>开始，中间包含多个<li></li>元素，最后以</ol>结束
2. 无序列表 ：以特定元素<ul>开始，中间包含多个<li>\</li>元素，最后以</ul>结束
3. 自定义列表<dl>：常用于对术语或名词进行解释和描述，列表项前无项目符号。总 <dt> 分 <dd>
label标签：为input元素定义标注，绑定一个表单元素，当点击label标签内文本，浏览器自动将焦点光标转到选择对应上的表单元素，增加用户体验。for必须和input中的id相同。（重点！）
表单标签：收集用户资料、数据。<form>标签用于定义表单域，以实现用户信息的收集和传递，将范围内的表单元素信息提交给服务器。表单元素就是允许用户在表单中输入或者选择的内容控件。表单元素包含（重点！）：
- input输入表单元素（重点！）
  1. name和value是每个表单元素都有的属性值，name:value就是提交给服务器，供后台人员使用的键值对（sex=female），value属性值决定了发送到服务端的实际内容，默认值为on
  2. label 的 for 要和 input 的 id 一致，input 的name 和 value 要搭配为键值对；
  3. 创建一组单选按钮（type=“radio”）：选择其中一个按钮，其它按钮即显示为未选中，确保用户只提供一个答案。
  4. 创建一组复选框（type=“checkbox”）。复选框就好比多项选择题，正确答案有多个。
  5. 要求单选框和复选框要有相同的name值，不难理解，你喜欢吃什么，不管是单选还是多选，这个问题都是在问你喜欢的食物，这个表单名字为：name=favorite-food
  7. input type=“button” 不提交数据给后台，比如获取短信验证码，搭配JS使用（关键区别于<button>）
  8. 在input元素中添加checked这个词即可实现默认选中。
```
 <label for="sex">性别：</label>
 <input type="text" id="sex" name="sex" placeholder="please input your name" value="female">
 
```
- select下拉表单元素：每个 <option> 元素都应该有一个 value 属性，其中包含被选中时需要提交到服务器的数据值。 multiple 规定了能不能同时选中多个选项，size 规定了一次性显示多少选项。
```
<label for="favorite-select">What's your favorite feature of freeCodeCamp?</label> 
<select name="favorite" id="favorite-select">     //下拉列表，用户可以从中选取一个选项
    <option valve="" selected>--Please choose an option--</option>
    <option value="challenges">Challenges</option>
    <option value="projects">Projects</option>
    <option value="community">Community</option>
    <option value="open source">open Source</option>
</select> 
```
- textarea文本域元素：
```
<textarea name="message" rows="10" cols="30">
	The cat was playing in the garden.
</textarea>
```

在这里插入图片描述

5. HTML5

HTML5引入更多更具有描述性的HTML元素，包括main、header、footer、nav、video、article、section等，更易读，同时有助于搜索引擎优化SEO和无障碍访问。请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。

main 元素让搜索引擎和开发者能很快找到网页的主要内容。
article 是一个分段标签，用于呈现独立及完整的内容，适用于当前页多个并列新闻、博客等的简介。
section 用于对与主题相关的内容进行分组。
header 可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。 header 应当在 HTML 文档的 body 标签内使用。它与包含页面标题、元信息的 head 标签不同。
nav 标签可以使屏幕阅读器快速识别出页面中的导航信息。它用于呈现页面中的主导航链接。
footer 元素位于页面底部，用于呈现版权信息或者相关文档链接。
audio 标签用于呈现音频内容或音频流，音频内容也需要备用文本，供聋哑人或听力困难的人使用。这可以通过页面上的文本或与字幕链接来实现。支持 controls 属性，用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。
figure 标签以及与之相关的 figcaption 标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
</audio>

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

鬼扯子

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
【01】PC端网页布局之HTML笔记-pink老师-2022/03

PC端网页布局（HTML5+CSS3）黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili基础概念：网站：在因特网上根据一定的规则，使用HTML等制作的专门用于展示特定内容相关的网页集合网页：网站的一”页“，通常是HTML格式的文件，需要通过浏览器阅读，是构成网站的基本元素，通常由图片、链接、文字、音频、视频等元素组成，以html或htm后缀结尾，即HTML文件。浏览器：网页显示和运行的平台。常用浏览器：IE、Firefox
复制链接

扫一扫