第一个网页
文章目录
- 第一个网页
- 注释
- 元素(标签,标记)
- 元素的嵌套
- 标准的文档结构
- 语义化
- 什么是语义化
- 为什么需要语义化?
- 文本元素
- h
- p
- span
- pre
- HTML 实体
- a元素
- href 属性
- target属性
- 路径的写法
- 站内内资源和站外资源
- 绝对路径和相对路径
- Emmet
注释
-
注释不参与运行
-
书写方式(html)
-
<!-- comment -->
元素(标签,标记)
<a href="http://www.duyiedu.com">杜伊教育</a>
-
整体: element
-
element = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性
-
属性的分类
-
- 局部属性: 某些元素特有属性
- 全局属性: 所有元素都有的属性
-
空元素
-
<meta charset="UTF-8">
元素的嵌套
- 父元素,子元素, 后代元素,祖先元素, 兄弟元素
标准的文档结构
-
HTML: 页面, html文档
-
文档声明: 告诉浏览器当前文档使用的HTML标准为HTML5
-
-
<!DOCTYPE html>
-
-
根元素: 一个页面最多只有一个,这个元素是其他元素的父元素或者祖先元素
-
-
<html lang="en"> .........en --> English, zh-CN(cmn-hans) --> 汉语 </html> -
lang属性: language, 全局属性, 表示该元素内部使用的文字是使用哪一种自然语言书写而成
-
-
文档头: 其内部内容不会显示在页面上
-
-
<head> ......... </head>
-
-
文档的元数据: 附加信息
-
-
<meta><meta charset="UTF-8"> <!-- charset: 指定网页内容编码 --><meta http-equiv="X-UA-Compatible" content="IE=edge">内核用edge<meta name="viewport" content="width=device-width, initial-scale=1.0">适配手机端
-
-
网页标题
-
-
<title>Document</title>
-
-
文档体:
-
-
<body><!-- 超链接 --><a href="http://www.duyiedu.com" title="bsdcsjb">杜伊教育</a><h1 title="this is my first page.">第一个网页</h1><img src="https://img2.baidu.com/it/u=3992703645,2278223385&fm=26&fmt=auto&gp=0.jpg"> </body>
-
语义化
什么是语义化
- 每一个html元素都有具体的含义
- a元素: 超链接
- p元素: 段落
- h1元素: 一级标题
- 所有元素与展示效果无关
- 元素展示到页面中的效果完全由CSS决定
- 浏览器带有默认的CSS样式, 所以每个元素有一些默认样式
- 选择什么元素取决于内容的含义, 而不是显示出来的效果
为什么需要语义化?
- 为了搜索引擎优化(SEO)
- 搜索引擎: 百度, Bing, Google
- 工作原理: 每隔一段时间抓取页面的源代码,
- 为了让浏览器理解网页
- 安装插件:阅读模式, 语音模式
文本元素
h
<h1> .... <h6>: 表示一级到六级标题
p
-
段落
-
乱数假文: 没有任何实际含义的文字
span
-
无语义, 仅用于样式的设计
-
某些元素(块级元素)显示时会独占一行, 某些元素(行级元素)不会
pre
-
pre:预格式化文本元素, (无语义) -
空白折叠: 在源代码中的空白字符包含: 空格, 换行, 制表, 在页面显示时会被折叠为一个空格
-
在pre元素中的内容不会出现空白折叠
-
在pre元素中的内容会按照源代码展示, 通常用于显示一些代码在网页上
-
pre元素功能本质: 有一个默认的CSS属性
-
code元素: 表示代码区域, 一般套在 pre元素外面
HTML 实体
- 实体字符, HTML Entity
- 实体字符通常用于在页面中显示一些特殊符号
-
- &单词
- &#数字
-
- 小于:
<< - 大于:
>> - 空格:
- 版权符号:
©© - 分数:
¾¾ - &符号:
&&
- 小于:
a元素
- 超链接
href 属性
-
hyper reference : 通常用于表示跳转地址
-
- 普通链接: 跳转地址
<a href="http://www.baidu.com">百度</a>- 锚链接: 跳转到某个锚点
<a href="#chapter1">章节1</a> <h2 id="chapter1">章节1</h2><p>Lorem ipsum dolor sit amet cons<p> -
id属性: 全局属性, 表示元素在文档中的唯一编号
-
- 功能链接
-
点击后触发某种功能
-
执行js代码
-
-
<a href="javascript:alert('hello')">探出:你好</a>
-
-
发送邮件(要求有邮件发送软件e.g.:exchange)
-
-
<a href="mailto:1965503815@qq.com">点击给我发送邮件</a>
-
-
拨号(要求计算机上安装有拨号软件, 或者是移动端访问)
-
-
<a href="tel:183075884">点击给我打电话</a>
-
target属性
- 表示跳转窗口位置
- target属性取值:
-
_self:default, 在当前页面打开_blank: 在新窗口中打开
路径的写法
站内内资源和站外资源
- 站内资源: 当前网站资源
- 站外资源: 别人网站的资源
绝对路径和相对路径
-
站外资源: 绝对路径, 直接复制粘贴
-
站内资源: 相对路径
-
绝对路径书写格式: url地址:
-
-
协议名://主机名:端口号/路径 schema://host:port/path协议名: http, https, file 主机名: 域名, IP地址 端口号: http, 默认端口号为80https, 默认端口号443e.g.: https://www.bilibili.com/video/BV1yx411d7Rc http://www.renren.com:80/ https://www.baidu.com:443/ http://127.0.0.1:5500/HTMLcore/4.%20a%E5%85%83%E7%B4%A0/target%E5%B1%9E%E6%80%A7.html
-
-
当跳转目标和当前页面的协议相同时, 可以省略
-
相对路径书写格式:
-
以
./开头, 表示当前资源所在目录 -
以
../开头, 表示返回上一级目录 -
相对路径中,
./可以省略 -
<a href="./subhtmls/xx.html">tst</a><a href="./../1. 第一个网页/index.html">我的第一个网页</a>
![[Abp vNext 源码分析] - 19. 多租户](http://pic.xiahunao.cn/[Abp vNext 源码分析] - 19. 多租户)
