HTML 基础
1. 网页的组成
任何一个页面都有 3 部分
- 文本内容:用户可见的内容, 如:新闻正文, 电话号码, 导航文字等
- 其他资源的引用:图片, 视频, 音频…
- 标记:对其他资源的描述
<p>我是一行文本</p><img src="logo.png" alt="logo" />
2. HTML 的设计思想
- 标签:类似于超市中放的商品标牌, 通过标签可以知道它标识的是什么商品.
- 超文本:是指包括超链接的文本(
<a>标签) - 预定义标记:用来描述内容的固定标签, 也叫内置标记, 内置标签. 跟自定义标记相对应.
- 语言:html 并不是编程语言, 它是标记语言.只是用来书写 HTML 文档的工具
3. HTML 的页面结构
<!DOCTYPE html><!-- 通知浏览器, 我是一个HTML5文档 --><html lang="en"><!--html:根标签, 俗称:根元素;lang="en": 告诉浏览器本文档的主要语言是英文(中文:zh-CN)--><head><!-- head中的内容, 用户不敢兴趣, 或者不需要用户看到, 给浏览器/开发者看到 --><!-- 元数据:用来解释数据的数据, 相当于给理发师理发的理发师, 个人理解:描述HTML文档本身的属性数据 --><meta charset="UTF-8" /><!-- 通知浏览器, 当前文档的字符集是UTF-8, 基本包含了地球上的所有语言 --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--viewport:视口/可视区屏幕, 针对移动端而言的.width=device-width:当前宽度跟设备宽度一致.initial-scale=1.0:初始缩放比例, 1.0表示不缩放.1比1显示.--><title>我是页面标题</title><!-- 当前页面的标题, 在浏览器的标签页显示 --></head><body><!-- body中的内容是用户真正看到的内容 -->EMMET:可以用来快速书写HTML, css文档的工具. <br />技巧:HTML:5,!+tab键=>能快速生成HTML文档结构</body></html>
4. 元素, 属性和值
4.1 元素
非空元素, 如
<p>元素, 用双标签标识, 即开始标签和结束标签中间的内容是非空的.如:<p>我是一段文本</p>空元素, 用单标签, 其内容来自外部资源的引用.如:
<img src="a.jpg"/>
4.2 属性和值
- 属性:是在起始标签中对标签内容进行描述的工具
- 值:属性的值.
- 值的类型:
- 预定义值, 如颜色值 green 等;
- 字符串, 如下面例子中 class 属性的值 “active” 就是字符串, 支持自定义;
- 指定格式值, 如:
<a>标签的href属性值, 必须写 url 格式的字符串值; - 数字值:1,2,3,4,5,6…3.14159265;
- 布尔值, 如:required, checked 和 selected.在起始标签中写这个属性名, 或者属性名=”属性名”(如:required=”required”), 则代表这个属性的值为 true, 不写这个属性名, 则代表这个属性的值为 false
- 例子 1:
<p style="color: green" class="active">我被 style 属性的color样式设置成绿色了</p> - 例子 2:
<a href="http://www.baidu.com">我的href属性的值必须是url格式的字符串</a>
- 值的类型:
几乎所有元素都可以设置的属性:
id,class,nametips: 点击文本框标题, 文本框自动获得焦点的方法:设置 label 的 for 属性的值和文本框的 id 属性的值相等, 如下:
<label for="input_id">我是标题</label> <input id="input_id" type="text" />
5. 网页中的实体字符
- 空白的处理:空格, 制表符, 换行符==>这些无论写多少个, 都只算一个
- 部分实体字符需要转码, 否则显示不出来, 下面是列出的部分实体字符
=> 一个空格<=> 小于号, 左尖括号>=> 大于号, 右尖括号- …不会了, 等老师发
6. 文件和文件夹规范
- HTML 文件中的标记部分全部使用小写, 大写也可以, 但约定用小写.
- 扩展名约定使用
.html, 尽量不用.htm,.htm这个太老了, dos 时代遗留下来的东西. - 文件名中, 如果是两个单词组成的, 用短横线连接两个单词, 如:
my-homepage.html - 属性值, 多个单词的属性值约定用短横线连接, 少用下划线, 如:
<div class="main-title">.特别的,name属性值因为要以变量名的形式要提交到后台, 而一般后台脚本语言都不支持带短横线变量名, 所以name属性就使用下划线.
7. URL
7.1 语法
- URL:统一资源定位符. 类似地球仪用经纬度定位位置;互联网中用 ip 定位主机位置. 互联网上的任何一个文件/资源必须要用一个唯一的访问地址, 这个就是 URL.
- URL: 以
http://www.php.cn/course/379.html为例http/https: 协议, 模式. 服务器不知道开放哪个端口来接收你的请求, 所以需要达成协议, 约定 http 协议的请求, 服务器就使用 80 端口接收;https 协议请求, 就使用 443 端口接收.除此之外, 还有 ftp 协议, 使用 21 端口接收.邮件协议, 使用 25 端口接收.www.php.cn: 域名/主机名, 服务器的名字, 要给自己的网站起一个牛 X 的名字.TIPS:ip 可以认为是服务器的身份证号.course/379.html: 访问的资源在服务器上的真实路径.- 上面的 URL 地址, 是绝对地址, 因为使用协议+主机名+路径, 可以精确的指向某台服务器主机上的某个文件.
- 相对地址: 相对于当前文档位置的地址.假设本文档所在的目录有一个子目录 course, 子目录中有一个文件叫 hello.html, 则 hello.html 相对于当前文档位置的相对地址为: course/hello.html. 经百度, /course/hello.html 和 course/hello.html 还有区别, 二者相对的位置貌似有所不同, 请老师指点.
8. 个人心得
- 经过学习, 我觉得, HTML文档就像一个工程项目图. 浏览器就是工程施工队. HTML文档中的用标签描述的内容, 类似工程图中的各个部件的规格描述.给浏览器渲染HTML页面的过程, 就像工程施工队根据工程项目图施工的过程.浏览器渲染HTML页面的结果, 会得到精美的网页, 而工程施工队施工的结果, 会得到各种建筑.