前端基础HTML4(2)

157 阅读3分钟

一、标签

标签(也叫元素),需要小写

例如:

<marquee> 跑马灯(弹幕滚动) </marquee> 

1、独有属性要看标签

2、通用属性可以给所有标签加,例如id给标签打标识

3、有些属性值不需要属性名,例如 <input disabled>

4、标签内的属性名不能重复,重复后以第一个出现的为主

二.HTML基本结构

<html>
    <head>
           <title>我的网页</title>
    </head>
    <body>
            <marquee loop="3">你好</marquee>  <!-->marquee标签现已废除<-->
            <!-->这是一个注释<-->
    </body>
</html>
  1. 在网页中,如何查看某段结构的具体代码? 右键检查
  2. 【检查】 和 【查看网页源代码】的区别?
  • 【查看网页源代码】看到的是:程序员编写的源代码。
  • 【检查】看到的是:经过浏览器 “处理” 后的源代码。 image.png

image.png

  • 备注:日常开发中,【检查】用的最多。
  1. 网页的 基本结构 如下:
  • 想要呈现在网页中的内容写在 body 标签中。
  • head 标签中的内容不会出现在网页中。
  • head 标签中的 title 标签可以指定网页的标题。

三.HTML注释

特点:注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见。

作用:对代码进行解释和说明。

写法:

<!-- 下面的文字只能滚动三次 -->

<marquee loop="3">芜湖~</marquee>

<!-- 下面的文字可以无限滚动 -->

<marquee>芜湖~</marquee>

四.HTML文档声明

作用: 告诉浏览器当前网页的版本。

HTML5写法:

<!DOCTYPE html><!DOCTYPE HTML><!doctype html>

注意:文档声明,必须在网页的第一行,且在html标签的外侧。

五.HTML字符编码

  1. 计算机对数据的操作:
  • 存储时,对数据进行:编码
  • 读取时,对数据进行:解码
  1. 编码、解码,会遵循一定的规范 —— 字符集
  2. 常见的字符集有:
1. ASCII :大写字母、小写字母、数字、一些符号,共计128个。
2. ISO 8859-1 :在 ASCII 基础上,扩充了一些希腊字符等,共计是256个。
3. GB2312 :继续扩充,收录了 6763 个常用汉字、682个字符。
4. GBK :收录了的汉字和符号达到 20000+ ,支持繁体中文。
5. UTF-8 :包含世界上所有语言的:所有文字与符号。—— 很常用。
  1. 使用原则
原则1:存储时,务必采用合适的字符编码 。
否则:无法存储,数据会丢失!

原则2:存储时采用哪种方式编码 ,读取时就采用哪种方式解码。
否则:数据错乱(乱码)!

保证所有的输入,都能正常存储和读取,现在几乎全都采用: UFT-8 编码。
编写 html 文件时,也都统一用 UFT-8 编码。
  1. 标准写法

最稳妥的写法是统一采用UTF-8编码。

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

<head>

<meta charset="UTF-8"/>

</head>

六.HTML设置语言

主要作用

  • 让浏览器显示对应的翻译提示。
  • 有利于搜索引擎优化。

具体写法

<html lang="zh-CN">

lang属性的编写规则

1. 第一种写法(语言-国家/地区),例如:
zh-CN :中文-中国大陆(简体中文)
zh-TW :中文-中国台湾(繁体中文)
zh :中文
en-US :英语-美国
en-GB :英语-英国
2. 第二种写法(语言—具体种类)已不推荐使用,例如:
zh-Hans :中文—简体
zh-Hant :中文—繁体
3. W3School 上的说明:《语言代码参考手册》、《国家/地区代码参考手册》
4. W3C官网上的说明:《Language tags in HTML》

六.HTML标准结构

HTML标准结构如下

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>我是一个标题</title>
    </head>
    <body>
    </body>
</html>

在VScode中可以直接输入"!",回车快速生成标准结构。

  • 配置VScode的内置插件emmet,可以对生成结构的属性进行定制。

image.png

  • 在存放代码的文件夹中,存放一个favicon.ico图片,可配置网站图标。