html 基础

1.网页的组成

任何一个页面都有三部分

序号	内容	描述
1	文本内容	用户可见内容
2	其他资源的引用	图片，视频，音频。。。
3	各种各样的标签标记	对文本，其他资源的描述

<p>我是PHP中文网的讲师</p>
<img src="logo.png" alt="log" />>

2. html 设计思想

html 文档中的一切,都是基于标签实现的
标签就类似于超市中玲琅满目的商品,你能通过一个标签快速识别并找到它们
页面中的每一块内容,如果想识别出来,同样也需要给他们贴上不同的标签
html 是超文本标记语言(下表描述并不精准,但力求简要易记)

术语	描述
超文本	是指包含有超链接的文本
标记	就是用来描述内容的固定标签
语言	html 并不编程语言,只是书写 html 文档的工具

3.html 页面结构

<!DOCTYPE html>
<!-- 通知浏览器，我是一个 html文档 -->
<html lang="zh-CN">
  <!-- en 是英文模拟 ，zh-cn是简体中文模式 -->
  <head>
    <!-- head中的内容，用户不敢兴趣，或者不需要用户看到，给浏览器或者开发者 -->
    <!-- 元数据：解释数据的数据，描述某种特定信息的数据？ -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新页面</title>
  </head>
  <body>
    <h2>php中文网欢迎大家</h2>
  </body>
</html>

元素，属性和值

元素	标签	描述
非空元素	双标签	`<p>学习让我很快乐</p>`
空元素	单标签	`<img src='1.jpg' alt="">`

4.2 属性和值

4.2.1 基本语法

属性: 必须写到元素的 “起始标签” 中,由属性名和属性值二部分组成
语法: 属性名="属性值",属性名推荐只使用小写字母,属性值推荐加上双引号
案例: <input type="password" maxlength="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="email" required>`

布尔属性的值是可选的, 只要元素中出现该属性,表示它取真值

4.2.2 三大通用属性

序号	属性名	描述	举例
1	`id`	元素的唯一标识	`<div id="wrap">...</div>`
2	`class`	给元素添加类样式	`<div class="box">...</div>`
3	`style`	设置当前元素样式	`<div style="...">...</div>`