HTML基础知识认识

1.网页的组成

任何一个页面都有三部分组成

序号	内容	描述
1	文本内容	用户看到的网页文本,资讯等
2	其它文件的引用	如图片,视频,音频等
3	标记	对文本以及引用文件的正确描述

<p>我是php中文网第十一期在线教学的学生，周同学</p>
<img
  src="https://www.php.cn/static/images/user_avatar.jpg"
  alt="这是我的资料头像"
/>

2.html 设计思路

超文本：是指包括了超级链接的文本
预定义标记：是用来描述内容的固定标签
语言：html 并不是编程语言，他只是用来书写 html 文档的工具

3.html 页面结构

3.1 html 结构源码

<!DOCTYPE html>
<!--通知浏览器我是一个html5文档-->
<html lang="en">
  <!--html是一个双标签，是跟标签/根元素，所以html代码都要写到这里面-->
  <!--en表示告诉浏览器语言-->
  <head>
    <!--head中的内容，用户不能看到，也不需要看到，是给浏览器看的-->
    <!--元数据：描述某种特定信息的数据-->
    <meta charset="UTF-8" />
    <!--这个表示当前字符集是utf-8-->
    <!--viewport这个解释为可视区屏幕   device-width这个表示宽度等于当前设备的宽度   -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>这个表示浏览器顶上能看见的标题</title>
  </head>
  <body>
    <!-- 这个区域就是用户真正看见的内容 -->
    <h2>我是php中文网第十一期学员</h2>
  </body>
</html>

编写 html 文档的标签字符不区分大小写, 但是推荐全部使用小写字母

4.元素，属性和值

4.1.元素

元素	标签	语法	描述
非空元素	双标签	`<p>我是php中文网第十一期学员</p>`	`<开始标签>元素内容</结束标签>`
空元素	单标签	`<img src="..." alt="">	<link>`	`<标签>`

空元素也有使用双标签描述的,如<script>|<video>|<br>...

4.2.属性和值

4.2.1

属性: 必须写到元素的 “起始标签” 中,由属性名和属性值二部分组成
语法: 属性名="属性值",属性名推荐只使用小写字母,属性值推荐加上双引号
案例: <input type="password" maxlength="20" placeholder="至少8个字符" required>
布尔属性的值是可选的, 只要元素中出现该属性,表示它取真值

4.2.2 三大通用属性

id 元素的唯一标识，例如<div id="wrap">...</div>
class 添加元素类样式，例如<div class="box">...</div>
style 设置当前元素的样式，例如<div style="...">...</div>

这几个属性,几乎可以添加到任何元素上

5.层级关系

元素中允许包含另一个元素,被包含的元素叫做子元素, 子元素又可以继承包含其它元素,依此类推
元素层级结构中, 必须保持正确的嵌套关系

<!-- 元素之间应该保持正确的嵌套 -->
<!-- action是提交地址  get是表示以get方式提交 -->
<form action="1.php" method="get">
  <!-- label里面的文本和当前的对应，当点击这个文本的时候自动对焦到当前 -->
  <label for="my-email">邮箱：</label>
  <!-- 元素值: 预定义值, 指定值, 布尔值,数值 -->
  <!--required这个的意思就是必须填写内容才能提交   写上这个就代表为真，不能空提交，否则为假-->
  <!-- ID具有唯一性 -->
  <input type="email" placeholder="Email:" id="my-email" name="user_email" />
  <button>提交</button>
</form>

6.网页中的实体字符

多个空格,制表符,回车符,换行符,都会被压缩为一个空格
<,>,&等字符具有特殊意义,需要转义后才允许添加到 html 文档
转义字符语法: & + 字符实体名称 + ;, 如<,使用: <表示
Unicode极大的缓解了特殊字符的问题,推荐将文档编码设置为utf-8
只需要在<head> <mata charset="UTF-8"> </head>
常用转义字符表

序号	字符	描述	转义字符	实体编号
1	`' '`	空格	`nbsp;`
2	`<`	小于	`<`	`<`
3	`>`	大于	`>`	`>`
4	`&`	`&符号`	`&`	`&`
5	`"`	双引号	`"`	`"`
6	`©`	版权	`©`	`©`
7	`®`	已注册商标	`®`	`®`
8	`×`	乘号	`×`	`×`
9	`÷`	除号	`÷`	`÷`

空白的处理：空格，制表符，换行符，无论写多少个都一样

7.文件与文件夹

全部使用小写
.html,.htm windows95 后面的版本长度就不受限制了，前面的必须是三个长度
文件名：demo0402.php
坚持使用连接线-,而不是下划线_分隔多个单词

8.URL

8.1 语法

URL：统一资源定位符，互联网上的任何一个文件/资源必须要有一个唯一的访问地址
URL：https://www.php.con/course/379.html 这种为决对地址
- http/https:是协议，模式
- www.php.cn：域名/主机名
- 后面的为资源，服务器上的真实地址
URL：相对地址
引用同一目录下文件,直接写文件名,如379.html
引用子目录下文件,目标文件前带上子目录名,使用目录分隔符/连接,如course/379.html
引用上层目录的文件,文件名前添加二个点,同样使用目录分隔符/连接,允许逐级向上查询,如../../379.html
根路径/,为防止过多层级的向上递归查询,可以从当前服务器根目录开始查询,如/index/course/