html基础知识1
[toc]
1. 网页的组成部分
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 文本内容 | 用户看到的网页文本，例如新闻、电话等 |
| 2 | 其它文件的引用 | 如图片、视频、音频、css、样式表、js脚本等 |
| 3 | 标记 | 对文本以及引用文件的正确描述 |
- 每个页面都是由这三部分组成的，并且都是采用纯文本进行描述
- 意味着任何能编写的纯文本的编辑器都可以用来创建HTML页面
- 现在主流的HTML版都是5.0，后面的教程默认就是HTML5.0版本
2. html 设计思想
- html文档中的一切，都是基于标签实现的
- 标签就类似于超市的中满目玲琅的商品，你能通过一个标签就能快速识别，并找到他们
- 页面中的每一块的内容，如果想识别出来，同样也需要给他们贴上不同的标签
- html 是超文本标记语言（下表描述并不精准，但力求简要易记）
| 术语 | 描述 |
|---|---|
| 超文本 | 是指包含有超链接的文本 |
| 标记 | 就是用来描述内容的固定标签 |
| 语言 | html并不是编程语言，只是书写html文档的工具 |
3. 基本的html页面
3.1 html 结构源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>html5页面结构</title></head><body><!-- 页面主体内容 --><h2>大名科技欢迎您</h2></body></html>
3.2 源码逐行分析
| 代码 | 解析 |
|---|---|
<!DOCTYPE html> |
通知浏览器这是一个html5文档，应该写在第一行 |
<html>...</html> |
根标签，或者叫做根元素，整个html文档内容都必须写到这对标签中 |
<html lang="en"> |
通知搜索引擎html文档使用的编写语言，如果是中文建议改成<html lang="zh-CN"> |
<head>...</head> |
供浏览器和搜索引擎使用，描述字符编码集，视口与页面标题，用户并不感兴趣 |
<meta> |
设置页面元素数据，所谓元数据，就是描述某种特定信息的数据 |
<meta charset="UTF-8"> |
通知浏览器html文档编写语言所属的字符编码集，现在最流行的是UTF-8,已成行业标准 |
<meta name="viewport"> content="..." |
下面三行是对它的解读 |
name="viewport" |
设置视口（即可视区屏幕）如何显示这个页面，例如是否允许缩放这个页面 |
width=device-width |
页面宽度应该与显示设备的宽度匹配，类似还有device-height表示设备的屏幕高度 |
initial-scale=1.0 |
设置页面初始绽放比例，1.0表示原样1：1显示，不允许有任何绽放 |
<title> |
显示在浏览器标签上的文本，指定当前页面的标题，这个标签对SEO非常重要 |
<body>...</body> |
页面主体内容，允许或希望用户的内容都写到这里，用户也只对这里的内容感兴趣 |
<!--注释内容--> |
注释用来描述标签功能或用途，它的内容不要出现在显示的网页中，只会出现在html源码中 |
<h2>大名科技欢迎您</h2> |
浏览器渲染这个html文档时，最终只会呈现这个标题内容与效果，并不显示标签<h2> |
编写html文档的标签字符不区分大小写，但是推荐全部使用小写字母
4. 元素，属性，值与其它
4.1 元素
| 元素 | 标签 | 语法 | 描述 | |
|---|---|---|---|---|
| 非空元素 | 双标签 | <p>学习让我变得强大</p> |
<起始标签>元素内容</结束标签> |
|
| 空元素 | 单标签 | `<img src="0101.jpg" alt=""> | <link>` | <标签> |
空元素也有使用双标签描述的，如
<script>|<video>|<br>...
4,2 属性和值
4.2.1 基本语法
- 属性：必须写到元素的“起始标签”中，由属性名和属性值儿部分组成
- 语法：
属性名="属性值",属性名推荐只使用小写字母，属性值推荐加上双引号 - 案例：
<input type="password" maxlenght="20" placeholder="至少8个字符" required>
| 序号 | 值类型 | 描述 |
|---|---|---|
| 1 | 字符串 | <p class="active">...</p> |
| 2 | 预定义值 | <input type="text"> |
| 3 | 指定格式 | <a href="https://php.cn">...</a> |
| 4 | 数值 | <table width="200">...</table> |
| 5 | 布尔值 | <input type="emai" requied> |
布尔属性的值是可选的，只要元素中出现该属性，表示它取真值
4.2.2 三大通用属性
| 序号 | 属性名 | 描述 | 举例 |
|---|---|---|---|
| 1 | id |
元素的唯一标识 | <div id="daming">...</div> |
| 2 | class |
给元素添加类样式 | <div class=""box>...</div> |
| 3 | style |
设置当前元素样式 | <div style="...">...</div> |
这几个属性，几乎可以添加到任何元素上
5. 层级关系
- 元素中允许包含另一个元素，被包含的元素叫做子元素，子元素又可以继承包含其它元素，以此类推
- 元素层级结构中，必须保持正确的嵌套关系
- 案例如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>元素的标签，属性和值，正确的嵌套关系</title></head><body><!-- 元素之间应该保持正确的嵌套 --><form action=""><div><!-- for属性的值与输入框里的id属性值一致时可聚焦到输入框 --><label for="email">邮箱：</label><!-- 元素值：预定义值，指定值，布尔值，数值 --><input type="email" name="email" id="email" maxlength="100" required /></div><div><!-- for属性的值与输入框里的id属性值一致时可聚焦到输入框 --><label for="password">密码：</label><inputtype="password"name="password"id="password"placeholder="至少8位"required/></div><div><input type="button" name="button" value="提交" /></div></form></body></html>
6. 网页中的文本字符
- 多个空格，制表符，回车符，换行符，都会被压缩成为一个空格
<,>,&等字符具有特殊意义，需要转义后才允许加到html文档- 转义字符语法：
& + 字符实体名称 + ；，如：<,使用：<表示 Unicode极大的缓解了特殊字符的问题，推荐将文档编码设置为utf-8- 只需要在
<head><meta charset="UTF-8"></head> - 常用转义字符表：
| 序号 | 字符 | 描述 | 转义字符 | 实体编号 |
|---|---|---|---|---|
| 1 | '' |
空格 | nbsp |
|
| 2 | < |
小于 | < |
``< |
| 3 | > |
大于 | > |
> |
| 4 | & |
&符号 |
amp |
& |
| 5 | " |
双引号 | " |
" |
| 6 | © |
版权 | © |
© |
| 7 | ® |
已注册符号 | ® |
® |
| 8 | x |
乘号 | × |
× |
| 9 | ÷ |
除号 | ÷ |
÷ |
7. 文件与文件名
- 全部使用小写字母：
charpter1/demo1.html - 采用合适的扩展名：
.html,不要用.htm - 坚持使用连接线
-,而不是下划线_分割多个单词
8. URL
8.1 语法
- URL: 统一资源定位符, 互联网上任何一个文件都有一个唯一的 URL
- URL 语法:
http://模式/主机名/路径/文件名
| 序号 | 字符 | 描述 | 举例 |
|---|---|---|---|
| 1 | 模式 | 也称“协议”，浏览器如何访问这个文件 | http,https,ftp,mailto… |
| 2 | 主机名 | 使用“域名”或“ip”表示 | https://www.php.cn/,或者`` |
| 3 | 路径 | 使用哟个或者多个正斜线分割的字符串 | public/ |
| 4 | 文件名 | 最后一个路径的后面，带有扩展名的文档 | about.html |
如果是以路径分隔符
/结尾，则启用默认文件名，如index.html
8.2 绝对URL
| 序号 | 使用场景 | 举例 |
|---|---|---|
| 1 | 被引用目标与当前位置无关 | http://php.cn/courses/123.html |
| 2 | 引用其他服务器上的文件 | https://www.php.net/manual/zh/ |
8.3 相对URL
- 当有人向你问路时，你肯定不会从国家/省/市/县/区开始，而是从他当前的位置给你指示
- 同样，相对URL是以包含URL本身的文件位置为参考点，描述目标文件的位置
|序号|使用场景|举例|
|1|引用同一目录下文件|直接写文件名，如demo2.html|
|2|引用子目录下文件|目标文件钱带上子目录名，使用目录分隔符/连接，如chapter2/demo2.html|
|3|引用上层目录文件|文件名前加二个点，同样使用目录分隔符/连接，允许逐级向上查询，如../../demo2.html|
|4|根路径/|为防止过多层级的向上递归查询，可以从当前服务器根目录开始查询，如/admin/books/chapter2/|
访问同一个网站文件，应该始终坚持使用相对URL地址
9. html 标签的语义化优势
|序号|优点|描述|
|1|更直观|对于一篇文章<article>标签，显然要比使用<div class="article">更加直观|
|2|SEO优化|搜索引擎更加喜欢你的网页，有利于SEO，提升关键词=优化与排名|
|3|代码更少|提高加载速度，也方便代码维护与样式控制|
|4|无障碍支持|例如梳理受损使用的屏幕阅读器，语义化就非常重要了|
10. HTML元素的默认样式
- 为什么同样的内容，添加不同的标签，在浏览器中呈现不同的显示效果？
- 原因是浏览器为这些元素预订了一张样式表，即每个元素都有默认样式
- 不幸的是，不同浏览器厂商之间因为商业利益或竞争关系，这些元素在不同浏览器表现并不完全相同
- 所以，我们需要使用自定义的样式表，来重置元素的样式，让它们在所有浏览器中看上去是完全一样的
- 用户自定义的样式规则，优先级要高于默认样式，这是应该的，也是合理的
11. html基础知识1总结
- 1.了解网页的三大组成：文本内容、文件引用和标记
- 2.对HTML文档源码的深入了解：尤其是对基本网页的每一行代码的解析，通过对元素、属性、值等的用法举例，详细明白它们的具体含义和作用
- 3.其中对
<form>标签中<label>与<input>的属性值一致时，可实现输入光标的聚焦功能 - 4.URL的使用
- 5.重新认识了HTML标签语义化，对于经常用
<div>来写代码的习惯来说，还真是一大新世界
12.手写源代码
