HTML基础知识
网页得组成部分
| 序号 |
内容 |
描述 |
| 1 |
文本 |
用户看到得文字，数字 |
| 2 |
外部引用 |
引用得图片，视频，音频等 |
| 3 |
标签 |
用来描述文本和引用 |
- 所有得网页都是由着三部分组成，已纯文本得形式
- 任何可以编辑纯文本得编辑器都可以写html得文档
- 默认教程HTML5
总结：网页由着三部分组成
2. HTML设计思想
- html文档中得以切都是基于标签实现得
- 标签跟超市得标签类似，可以在众多商品中，一眼辨别这是啥
- html 是超文本标记语言
| 术语 |
描述 |
| 超文本 |
带有超链接得文本 |
| 标记 |
描述内容得标签 |
| 语言 |
html不是编程语言指数书写html文档得工具 |
3. 基本得html页面
<!-- 告诉浏览器文档类型为html，doctype为文档类型得意思 --><!DOCTYPE html><!-- 向浏览器声明代码是用英语写得 --><html lang="en"> <!-- 头部部分供浏览器和搜索引擎使用，在网站页面不显示 --><head> <!-- 声明字符集为utf-8通用字符 --> <meta charset="UTF-8"> <!-- 可是窗口宽度自适应，显示尺寸为1：1 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- --> <title>这里是页面标题</title></head><body> <P>内容 </P></body></html>
4. 元素属性值
4.1 元素
| 元素 |
标签 |
语法 |
内容 |
| 非空元素 |
双标签 |
<p>我得爱好编程</p> |
<起始标签>内容<结束标签> |
| 空元素 |
单标签 |
<img scr="logo.jp" alt="图片的描述"> |
<标签> |
空元素有时候也会用到双标签例如<script>
4.2属性和值
4.2.1 基本语法
- 属性：必须写到起始标签，属性值和属性名两部分组成
- 语法：
属性名="属性值",属性名只写小写，属性值加上双引号。 - 案列：
<input type="password" maxlength="20">
| 序号 |
值得类型 |
描述 |
| 1 |
字符串 |
<P class="active">...</p> |
| 2 |
预定义值 |
<input type="text"> |
| 3 |
指定格式 |
<a href="https://www.baidu.com"></a> |
| 4 |
数值 |
<table width="20"></table> |
| 5 |
布尔值 |
<input type="email" requierd> |
布尔类型得值是可选得，只要元素中出现该属性他取真值
4.2.2 三大通用属性
| 序号 |
属性名 |
描述 |
举例 |
| 1 |
id |
元素得唯一标识 |
<div id="wrap">..</div> |
| 2 |
class |
给元素添加类样式 |
<div class="box">...</div> |
| 3 |
style |
设置当前元素得样式 |
<div style= "background=green"></div> |
这几个属性几乎添加到任何元素上
5.层级关系
- 元素可以包含其他元素，被包含得叫做子元素，子元素又可以包含其他元素。以此类推。
- 元素层级结构必须包含正确得嵌套关系
6.网页中的文本字符
- 多个空格，制表符，回车符，换行符都会被压缩为一个空格
<,>,$具有特殊意思，需要转意后才能写在html文档中
7.文件与文件夹名称
- 全部使用小写字母：
demo1.html - 扩展名用.html
- 连线使用-
8 url
8.1 语法
- url：统一资源定位符，互联网上任何一个文件都有一个唯一的 URL
- url 语法
http://模式/主机名/路径/文件名
| 序号 |
名称 |
描述 |
举例 |
| 1 |
模式 |
也叫做协议，浏览器按照什么协议访问 |
https，http，ftp，mailto |
| 2 |
主机名 |
域名或者ip |
127.0.0.1，www.baidu.com |
| 3 |
路径 |
正斜线分割的字符串反应文件的位置 |
theme/language |
| 4 |
文件名 |
带有跨站名的文档名 |
log.jpg |
如果url以/结尾，则访问默认主页，一般为index.html index.php
d
8.2 绝对URL
| 序号 |
使用场景 |
举例 |
| 1 |
被引用的目标与当前位置无关 |
www.baidu.com/img/logo.jpg |
| 2 |
应用其他服务器上的文件 |
www.toutiao.com/img/logo.jpg |
8.3 相对URL
- 不是介绍具体的一个真实地址，而是在某个参照物的什么地方
| 序号 |
使用场景 |
举例 |
| 1 |
访问当前目录下文件，直接写文件名称 |
demo1.html |
| 2 |
引用子目录得文件，目录名称+分隔符+文件名称 |
img/logo.jpg |
| 3 |
引用上级目录，用../+文件名称。可以逐级向上查询../../logo.jpg |
| 4 |
根路径/ |
防止递归向上多层级得查询可以从当前服务器得跟目录查询 |
访问同一个网站得文件坚持使用相对URL
9.html标签语义化得优势
| 序号 |
优点 |
描述 |
| 1 |
更直观 |
<article>比<div class="article">更加简洁直观 |
| 2 |
有利于seo |
搜索引擎更喜欢语义化，有利于网站排名 |
| 3 |
代码更少 |
加载速度快，维护简单 |
| 4 |
无障碍支持 |
对于屏幕阅读器，语义化很重要 |
10.元素得默认样式
