HTML基础知识
1.网页的组成部分
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 文字 | 给用户看的文字 |
| 2 | 其他文件 | 外部引入的文件如图片，视频，音频、样式表、JS脚本等 |
| 3 | 标记 | 对文字及引用文件的正确描述 |
- 每个页面都有这三个部分，并且都是用纯文本进行描述
- 任何可以写纯文本的编辑器都可以写HTML页面
- 现在的主流版本是HTML5
2.HTML设计思想
- HTML文档中的一切都是基于标签实现的
- HTML是超文本标记语言
| 术语 | 描述 |
|---|---|
| 超文本 | 包含有超链接的文本 |
| 标记 | 用来描述内容的固定标签 |
| 语言 | HTML不是编程语言，只是工具 |
3.基本的HTML页面
3.1HTML结构源码
<!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><!--页面主体内容区--></body></html>
3.2源码逐行分析
| 代码 | 解析 |
|---|---|
<!DOCTYPE html> |
通知浏览器这是一个HTML5文档，始终写在第一行 |
<html>...</html> |
跟标签/根元素，所有HTML元素都要写在这个标签内 |
<html lang="en"> |
通知搜索引擎网页的编写语言是英语，中文为<html lang="zh-CN"> |
<head>...</head> |
给浏览器和搜索引擎看的,主要描述字符编码集,视口与页面标题 |
<meta> |
解释页面元素的数据，在head中给浏览器和开发者看的 |
<meta charset="UTF-8"> |
告诉浏览器 html的字符集是UTF-8 |
<meta name="viewport" content="..." /> |
视口/可视区屏幕的设置，下面三行是对它的参数详解 |
name="viewport" |
设置属性名name的值为视口/可视区屏幕 |
width=device-width |
页面宽度与显示设备的屏幕宽度一样宽,device-height 显示设备的屏幕高度 |
initial-scale=1.0 |
设置页面初始绽放比例,1.0表示原样 1:1 显示,不允许有任何绽放 |
<title> |
显示在浏览器标签上的文本, 指定当前页面的标题, 这个标签对 SEO 非常重要 |
<body>...</body> |
页面主体内容,允许或希望用户的内容都应该写到这里,用户也只对这里的内容感兴趣 |
<!-- 注释内容 -> |
注释用来描述标签功能或用途,它的内容不要出现在显示的网页中, 只会出现在 html 源代码中 |
<h2>PHP中文网欢迎您...</h2> |
浏览器渲染这个 html 文档时,最终只会呈现这个标题内容与效果,并不显示标签<h2> |
编写 html 文档的标签字符不区分大小写, 但是推荐全部使用小写字母
4.元素属性与值
4.1元素
| 元素 | 标签 | 语法 | 描述 |
|---|---|---|---|
| 非空元素 | 双标签 | <p>...</p> |
<起始标签>元素内容</结束标签> |
| 空元素 | 单标签 | <img src="..." alt=""> |
<标签 引用地址 属性 …> |
空元素也有用双标签的，如
<script>|<video>|<br>...
4.2属性和值
4.2.1基本语法
- 属性：必须写到元素的起始标签中，由属性名和属性值组成
- 语法：属性名=”属性值”，属性名推荐小写字母加双引号
- 案例：
<input type="password" maxlength="20" placeholder="至少8个字符" required>
| 序号 | 值类型 | 描述/HTML代码 |
|---|---|---|
| 1 | 字符串 | <p class="active">...</p> |
| 2 | 预定义值 | <input type="text"> |
| 3 | 指定格式 | <a href="http://php.cn">...</a> |
| 4 | 数值 | <table width="200">...</table> |
| 5 | 布尔值 | <input type="email" required> |
布尔属性的值时可选的，写了就取真值，默认为假值
4.2.2三大通用属性
- id
- class
- style
这三大属性几乎可以添加到任何元素上
5.层级关系
简单说就是父>子>孙的关系，嵌套要正确
6. 网页中的文本字符
- 空格、制表符、回车、换行等都会被压缩为一个空格
- <>&等字符具有特殊意义，需要转义后才能添加到html文档
- 转义字符语法：&+字符实体名称+；（如<用
<表示）
7.文件与文件夹名称
- 全部小写
- 用.html，不要用.htm
- 用连接线-，不要用下划线_分割多个单词
8.URL的语法
8.1唯一性
- URL：统一资源定位符，具有唯一性
- 如果 URL 是以路径分隔符
/结尾, 则启用默认文件名,如index.html
8.2 URL分类
- 绝对URL，如http://php.cn
- 相对URL，如../demo.html
9.语义化优势
- 直观
- 利于SEO优化
- 代码更少
- 无障碍支持
10.元素的默认样式
- 每个元素都有浏览器厂商各自预定义好的默认样式
- 用户自定义的样式会覆盖默认样式
11.增加代码功能手抄图片
12.总结
- html5主体结构代码利用编辑器可快速写出，但需了解每个标签的用途和功能
<head>,<meta>标签需重点掌握- id、class、style三大属性适用于所有标签，必须掌握
- 要发挥语义化标签的优势，便于书写也便于阅读
