HTML入门

标签

  1. 标签:又称元素,是HTML的基本组成单位
    1. 双标签(绝大多数都是双标签):<标签名>标签体
      1. 第一个标签叫起始标签,第二个标签叫结束标签
      2. 例:尚硅谷,让天下没有难学的技术!
    2. 单标签:<标签名/>
      1. /可以省略
      2. 例:
  2. 标签名不区分大小写,但推荐小写,因为小写更规范
  3. 标签之间的关系:并列关系、嵌套关系,可以使用 tab 键进行缩进
    <marquee>
    	尚硅谷,让天下没有难学的技术!
    	<input>
     marquee>
     <input>
    

标签属性

  1. 用于给标签提供附加信息
  2. 可以写在起始标签或单标签中,形式如下:<标签名 属性名="属性值" 属性名="属性值">
    <marquee loop="1" bgcolor="orange">尚硅谷,让天下没有难学的技术!marquee>
    <input type="password">
    
  3. 有些特殊的属性,没有属性名,只有属性值,如:
  1. 不同的标签,有不同的属性;也有一些通用属性(在任何标签内都能写)
  2. 属性名、属性值不能乱写,都是W3C规定好的
  3. 属性名、属性值,都不区分大小写,但推荐小写
  4. 双引号,也可以写成单引号,甚至不写,但推荐写双引号
  5. 标签中不要出现同名属性,否则后写的会失效,例如:

基本结构

  1. 想要呈现在网页中的内容写在body标签中
  2. head标签中的内容不会出现在网页中
  3. head标签中的title标签可以指定网页的标题
<html>
    <head>
        <title>网页标题title>
    head>
    <body>
        ......
    body>
 html>

注释

  1. 特点:注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见
  2. 作用:对代码进行解释和说明
  3. 写法

<marquee loop="1">尚硅谷marquee>

<marquee>尚硅谷123marquee>
  1. 注释不可以嵌套

文档声明

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

  2. 写法

    1. 旧写法:要依网页所用的HTML版本而定,写法有很多
      1. 参考:W3C QA - 可在 Web 文档中使用的 Doctype 声明的推荐列表
    2. 新写法:W3C 推荐使用 HTML 5 的写法
    DOCTYPE html>DOCTYPE HTML>doctype html>
    
  3. 文档声明必须在网页的第一行,且在html标签的外侧

字符编码

  1. 计算机对数据的操作
    1. 存储时,对数据进行:编码
    2. 读取时,对数据进行:解码
  2. 编码、解码,会遵循一定的规范 —— 字符集
  3. 常见的字符集
    1. ASCII:大写字母、小写字母、数字、一些符号,共计128个
    2. ISO 8859-1:在 ASCII 基础上,扩充了一些希腊字符等,共计是256个
    3. GB2312:继续扩充,收录了 6763 个常用汉字、682个字符
    4. GBK:收录了的汉字和符号达到 20000+ ,支持繁体中文
    5. UTF-8 :包含世界上所有文字与符号
  4. 为了让浏览器在渲染html文件时,不犯错误,可以通过meta标签配合charset属性指定字符编码
 <head>
    <meta charset="UTF-8"/>
 head>

设置语言

  1. 主要作用
    1. 让浏览器显示对应的翻译提示
    2. 有利于搜索引擎优化
  2. 具体写法:
  3. lang属性的编写规则
      1. 语言-国家/地区
      2. zh-CN :中文-中国大陆(简体中文)
      3. zh-TW :中文-中国台湾(繁体中文)
      4. zh :中文
      5. en-US :英语-美国
      6. en-GB :英语-英国
    1. 语言—具体种类(已不推荐使用)
      1. zh-Hans :中文—简体
      2. zh-Hant :中文—繁体
    2. W3School 上的说明:《语言代码参考手册》、《国家/地区代码参考手册》
    3. W3C官网上的说明:《Language tags in HTML》

标准结构

  1. HTML标准结构如下
DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>

<body>

body>

html>

VSCode 删除行快捷键:Ctrl+Shift+K

  1. 输入!,随后回车即可快速生成标准结构
  2. 配置VScode 的内置插件 emmet ,可以对生成结构的属性进行定制
  3. 在存放代码的文件夹中,存放一个 favicon.ico 图片,可配置网站图标

你可能感兴趣的:(html,windows,microsoft)