Blogger Information
Blog 47
fans 1
comment 0
visits 52938
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML 之 初体验(HTML是什么?)
晴天
Original
949 people have browsed it

HTML 之 初体验

HTML 是什么?

  • HTML 是超文本标记语言,不是编程语言。
  • HTML 文本是由 HTML 命令组成的描述性文本。
  • HTML 由 文本内容、外部资源引用、标记 三部分组成。
  • HTML 里的内容都是基于标签实现的。如<h2></h2>
  • HTML 里面的内容若想识别,必须给他加上标签。

HTML 的结构

  • <!DOCTYPE html>告诉浏览器这是一个 html 文档
  • <html></html> 根元素 所有 html 内容必须写在这里面
  • <head></head> 头部内容 对用户不可见
  • <body></body> 主体内容 对用户可见
  • 注意层级关系 <head></head> <body></body>必须写在<html></html>标签中
  • 头部内容 必须写在<head></head>标签中
  • 主体内容 必须写在<body></body>标签中

例如

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width;inital-scale=1.0" />
  6. <title>天天有个好心情</title>
  7. </head>
  8. <body>
  9. <h2>我爱你中国</h2>
  10. <!-- 这里可以给h2加个属性font-size 字体像素 -->
  11. <h2 style="font-size:50px;">我爱你中国</h2>
  12. <!--这样比上面的字体更大了 -->
  13. </body>
  14. </html>

详细内容如图
avatar


课外知识补充

markdown 添加网络图片方式

  1. ![avatar]()
  2. <!--()里面填写图片地址
  3. 比如上面的图片在markdown里是这么写的
  4. "![avatar](https://cdn.jsdelivr.net/gh/YanYuHanYun/image/31548b1f365edc50b7494b8f157f6dc9.jpg)"-->

关于网络文本中的字符

比如”<>””空格””&””双引号” 具有特殊意义,所以必须转义才允许添加到 html 文档中

  • 常用转义字符表
序号 字符 描述 转义字符 实体编号
1 ' ' 空格 nbsp; &#160;
2 < 小于 &lt; &#60;
3 > 大于 &gt; &#62;
4 & &符号 &amp; &#38;
5 " 双引号 &quot; &#34;
6 © 版权 &copy; &#169;
7 ® 已注册商标 &reg; &#174;
8 × 乘号 &times; &#215;
9 ÷ 除号 &divide; &#247;

比如想在 HTML 中直接输出<html>这几个字 需要这么写&lt; html &gt;
这样在网页中显示为<html>


关于 文件夹与文件的命名

  • 必须全部为小写字母 例 (china/index.html)
  • 文件命名要规范 写.html 不要写.htm
  • 分隔多个单词坚持用连接线”-“,不用下划线”_“

URL 是什么

  • URL 是统一资源定位符,具有唯一性。互联网上所有文件都有唯一一个 url
  • URL 语法 :模式/主机名/路径/文件名
    |序号|名称|描述|举例|
    |-|-|-|-|
    |1|模式|也成为协议,浏览器如何访问以什么方式访问|http、https、ftp|
    |2|主机名|以 ip 、域名表示,常用域名|https://127.0.0.1 为 ip 访问 https://www.baidu.con 为域名访问|
    |3|路径|就是访问哪个文件夹,注意层级关系,是 a 文件夹里面的 b 文件夹,文件夹与文件夹中间用”/“分割|a/b/index.html|
    |4|文件名|文件名必须加上后缀|.html、.php、.text、.png|

  • 绝对 URL 就是访问该文件的全部地址,引用本机或外部服务器上的文件
    例如”https://www.php.cn/dugu/0401.html

  • 相对 URL 是引用本机文件使用
    例如”./dugu/0401.html”

    | 序号 | 使用场景 | 举例 |
    | —— | ————————— | ——————————————————————————————————————————— |
    | 1 | 引用同一目录下文件 | 直接写文件名,如demo2.html |
    | 2 | 引用子目录下文件 | 目标文件前带上子目录名,使用目录分隔符/连接,如chapter2/demo2.html |
    | 3 | 引用上层目录的文件 | 文件名前添加二个点,同样使用目录分隔符/连接,允许逐级向上查询,如../../demo2.html |
    | 4 | 根路径/ | 为防止过多层级的向上递归查询,可以从当前服务器根目录开始查询,如/admin/books/chapter2/ |


html 的元素样式

  • 浏览器本身有默认样式,但不同浏览器有不同的默认样式
    所以我们要自定义元素样式来重置样式,以保证用户在不同的浏览器打开均可以看到相同的页面样式
  • 自定义元素样式优先级大于默认样式
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:手写作业, 还有标注, 不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post