2021前端小白入门第一课

搬水泥的小匠
226 阅读3分钟

软件的介绍

1.VSCode编辑器(其他编辑器：HBuilder、HBuilderX、Sublime、WebStorm)
    VSCode编辑器字体大小的设置：左下角设置图标 - 设置 - 调整字号
2.谷歌浏览器google chrome(火狐Mozilla Firefox、IE、欧朋Opera、Safari指南针)
    把电脑默认的浏览器更改为谷歌
3.Photoshop简称ps(量图)

VSCode编辑器插件的安装

1.chinese软件进行汉化
2.open in browser浏览器打开html文件

本堂课内容

HTML + CSS + PC网页(小米官网) + HTML5 + CSS3 + 动画 + 移动端 
1.熟练应用编辑器
2.HTML创建以及文档结构介绍
3.***HTML标签

HTML超文本标记语言

超文本：网页中一般包含文字、视频、音频、图片...
标记标签<div>
HTML文件后缀名.html / .htm

HTML基本结构

<!DOCTYPE html> 文档声明,这是HTML5文件
<html lang="zh-CN"></html> 根元素
    lang属性跟语言相关,en代表English英语,zh-CN代表中文
<head></head> 页面的头部:编码、标题、关键字、描述...
    <meta charset="UTF-8"> 网页的编码方式UTF-8,万国码
    <title></title> 网页标题
<body></body> 页面的主体:html结构

标签书写形式

1.封闭类型标签
    <title></title> 开始标签和结束标签
2.非封闭类型标签(空标签)
    面试题：什么是空标签
    <meta>

标签的属性

- 属性为标签提供额外的功能
    <meta charset="UTF-8">
    <html lang="fr"></html>
- 标签可以有多个属性,多个属性空格隔开
    <div 属性1="值1" 属性2="值2" 属性3="值3"></div>
    <img 属性1="值1" 属性2="值2">

web(网页)组成

结构HTML、表现CSS、行为javascript

W3C 万维网联盟

手册 W3School
W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构；是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准；

文件的命名规范

小写英文字母、数字、_下划线、-的组合
其中不得包含汉字、空格和特殊字符
英文字母开头

HTML标签(块级元素) - 标签独占一行

1.div 容器
    - 给页面划分板块
2.标题元素
    - 标题默认自带加粗,垂直方向有间距,一级标题最大,六级标题最小
    <h1></h1> 一级标题
        页面中最大的标题,只能出现一次
        h2-h6没有次数限制
    <h2></h2> 二级标题
        大板块的标题
    <h3></h3> 三级标题
        小板块的标题
    <h4></h4> 四级标题
    <h5></h5> 五级标题
    <h6></h6> 六级标题
3.段落元素
    <p></p>
    垂直方向有段落间距
4.列表
    无序列表(默认实心圆)
        <ul type="">
            <li>无序列表1</li>
            <li>无序列表2</li>
            <li>无序列表3</li>
            <li>无序列表4</li>
        </ul>
    有序列表
        <ol>
            <li>有序列表1</li>
            <li>有序列表2</li>
            <li>有序列表3</li>
            <li>有序列表4</li>
        </ol>
    - 无序列表和有序列表通常用在：新闻列表、导航列表
    自定义列表：名词与解释、图文混排
        <dl>
            <dt>HTML</dt>
            <dd>HTML也叫超文本标记语言</dd>
        </dl>
5.水平分割线
    <hr>

HTML标签(行内元素)

- 行内元素之间不论敲多少回车或者空格，只会被浏览器解析成一个空格
1.加粗
    b,strong有强调作用
2.倾斜
    i,em有强调作用
3.下划线
    u,ins
4.删除线
    s,del,strike
5.换行
    <br>
6.span
    一般用来更改一大段文本中个别文字的样式
7.上标
    <sup></sup>
8.下标  
    <sub></sub>
9.图片
    - 图片格式
        .gif 动图,支持透明
        .jpg 有损压缩,不支持透明
        .png 无损压缩,支持透明
    <img src="" alt="" title="">
    src="" 引图片路径
    alt="" 图片加载失败时才显示的文本
    title="" 鼠标移入显示的文本 (其他标签也可以用)
10.超链接
    <a href="" target=""></a>
    href="" 引html文件路径
    target=""
        默认值,覆盖原页面
        target="_blank" 新标签页打开
    - 既是标题有又是超链接,块级元素包行内元素
        <h2>
            <a href="https://www.baidu.com/">标题</a> 
        </h2>

路径

1.绝对路径
    完整的路径
    C://images/file/girl.png
    https://
2.相对路径
    ./ 当前目录
    ../ 返回上一级
3.根目录
    /

快捷键(b站快捷键使用)

注释 ctrl+/

转义字符

空格 &nbsp;
版权 &copy;
注册 &reg;
< &lt;
> &gt;
圆点 &bull;
avatar
文章
阅读
粉丝