HTML基础知识认识
1.网页的组成
- 任何一个页面都有三部分组成
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 文本内容 | 用户看到的网页文本,资讯等 |
| 2 | 其它文件的引用 | 如图片,视频,音频等 |
| 3 | 标记 | 对文本以及引用文件的正确描述 |
<p>我是php中文网第十一期在线教学的学生，周同学</p><imgsrc="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,.htmwindows95 后面的版本长度就不受限制了，前面的必须是三个长度- 文件名：
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/
如果 URL 是以路径分隔符
/结尾, 则启用默认文件名,如index.html
访问同一个网站的文件,应该始终坚持使用相对 URL 地址
9.关于 html 标签语义化的优势
- 主要是为了 SEO 的优化
- 更加直观
- 代码更少
- 无障碍支持
10.html 元素的默认样式
- 为什么同样的内容,添加不同的标签,在浏览器中呈现出不同的显示效果呢?
- 原因是浏览器为这么元素预定了一张样式表,即每个元素都有默认样式
- 不幸的是, 不同浏览器厂商之间因为商业利益或竞争关系,这些元素在不同浏览器表现并不完全相同
- 所以,我们需要使用自定义的样式表,来重置元素的样式,让它们在所有浏览器中看上去是完全一样的
- 用户自定义的样式规则, 优先级要高于默认样式, 这是应该的,也是合理的
学习体会
- 现在看来还比较简单
- 老师讲的比较认真仔细，听起来比较听的懂
- 接下来还需要更加努力
作业手写图片和截图
