HTML笔记

HTML

​ 引言：HTML（超文本标记语言），可以理解为是网页的一个骨架，支撑着整个网页。标签分为双标签和单标签（自闭合标签），HTML中绝大多数都是双标签；在HTML中通过CSS选择器对网页元素进行样式，通过JavaScript进行网页的交互效果。

标签名汇总

1、网页的基本HTML结构：

<!DOCTYPE html>
<html lang=”zh-CN“>
    <head>
        <meta charset="UTF-8">
        <title>.....</title>
    </head>
    <body>
        ......
        ......
    </body>
</html>

2、HTML字符编码

  • 平时编写代码时，统一采用UTF-8编码最为稳妥，因为支持大部分国家的文字和字符，被称为万国码。

  • 为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合charset属性指定字符编码。

    <head>
    <meta charset="UTF-8"/>
</head>

3、HTML设置语言

​ 主要作用：让浏览器显示对应的翻译提示、有利于搜索引擎优化。

  • 具体写法：

    <html lang="zh-CN">

  • 常用的语言：

    • zh-CN：中文-中国大陆（简体中文）
    • zh-TW：中文-中国台湾（繁体中文）
    • en-US：英语-美国
    • en-GB：英语-英国

4、语义化标签

  • 概念：用特定的标签，去表达特定的含义。
  • 原则：html标签的效果不重要，在网页中标签的语义（侧重标签意思而不是效果）很重要，因为CSS可以调整标签的效果。
  • 语义化的好处：
    • 代码结构清晰可读性强。
    • 有利于SEO（搜索引擎优化）。
    • 方便设备解析（屏幕阅读器、盲人阅读器等）。

5、块级元素和行内元素

  • 块级元素：独占一行（块级元素中能嵌套块级元素和行内元素）。
  • 行内元素：不独占一行，可以堆叠在一行里面（行内元素里面只能嵌套行内元素）。
  • h1~h6之间不能互相嵌套，p元素中不要写块级元素。

6、跳转到锚点

​ 锚点就是网页中的一个标记点，可以帮助我们定位到指定元素位置。具体使用方式：

  • 第一步：设置锚点：

    <!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>

<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>

  • 第二步：跳转锚点：

    <!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>

<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>

<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<!-- 刷新本页面 -->
<a href="">刷新本页面</a>

7、网页中的表单

​ 概念：一个包含交互的区域，用于收集用户提供的数据。

标签名 标签语义 常用属性 单/双标签
form 表单 action ：用于指定表单的提交地址（后端地址）。target ：用于控制表单提交后，如何打开页面（_self，__blank）。methon：用于控制表单的提交方式（POST、GET） 双
input 输入框 type：设置输入框的类型（text、password、radio、checkbox等...）。name：用于指定提交数据的名字 单
button 按钮 提交按钮 双

8、HTML实体

​ 在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。常用的字符实体如下：

  • 空格：&nbsp；小于号：&lt；大于号：&gt；元（￥）：&yen；版权（coperight）：&cope；乘号：&times；除号：divide；

  • 完整实体列表，请参考：HTML Standard (whatwg.org)

9、meta 元信息

<!-- 配置字符编码 -->
<meta charset="utf-8">

<!-- 针对 IE 浏览器的兼容性配置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对移动端的配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 配置网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 配置网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 针对搜索引擎爬虫配置 -->
<meta name="robots" content="index、noindex、follow、nofollow、all、none、noarchive、nocache">

<!-- 配置网页作者 -->
<meta name="author" content="tony">

<!-- 配置网页生成工具 -->
<meta name="generator" content="Visual Studio Code">

<!-- 配置定义网页版权信息 -->
<meta name="copyright" content="2023-2027©版权所有">

<!-- 配置网页自动刷新 -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
posted @ 2024-04-08 22:19  CloudWK  阅读(1)  评论(0)  编辑  收藏  举报