HTML基础篇(一)

67 阅读2分钟

一、准备工作

  1. 安装编辑软件和Chrome浏览器

image.png

  1. 创建指定目录存放代码文件**

image.png

image.png

二、围绕如何学习HTML

  1. 是什么?

HTML 是一种网页开发的标准语言,我们可以叫做超文本标记语言。

  1. 为什么?

因为浏览器在展示图文信息的时候,需要容器/骨架承载图文内容。

通俗点理解就是需要HTML来搭建网页的结构(划分页面的结构)。

  1. 怎么用?

基础模板:

<!DOCTYPE html> <!-- 声明文档类型 --> 
<html lang="zh"> <!-- 根元素 --> 
<head> <!-- 网页头部标签 (不可视化部分) --> 
    <meta charset="UTF-8"> <!-- 描述网页的信息 字符编码设置为UTF-8 --> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- 针对移动端设置视口相关信息,例如:设备宽度,初始化字体比例--> 
    <title>网页标题</title><!-- 浏览器topbar显示标题 --> 
</head> 
    <body> <!-- 网页主体(视化部分) --> 
        <h1>hello world !</h1> 
        <div class="text5">5</div> 
    </body> 
</html>

使用标签时要注意的地方

  1. 双标签符合开闭原则 <开始标签>
  2. 单标签 <单标签>
  3. 标签的字母是小写的
  4. <标签 标签属性=“值”>

类名和ID命名时需要注意:

4.1 注意采用字母开头,不可以采用数字或者特殊开头

4.2 不可以采用特殊符号命名 @!#%&*

4.3 可以采用数字结尾 text1 box1

4.4 类名属性可以采用驼峰命名 loginButton indexHeader indexList

也可以采用短横线 ‘-’来命名 login-button index-header index-list

4.5 ID名称建议采用驼峰命名 loginButton indexHeader indexList

4.6 不推荐使用中文命名,不是不能使用中文命名

特别说明

html 不是编程语言,css 也不是编程语言。

html 超文本标记语言。标签就是标记

例如: div span img ......

<!-- 注释: 说明描述作用、不被浏览器解析 Ctrl + / 组合 --> 
<h1>hello world # 1</h1> 
<!-- <h2>hello world # 2</h2> -->

这一篇内容先到这里,下一节继续...