从0学Web「HTML基础篇」

一、 Web的构成

构成

语言

说明

结构

HTML

页面元素和内容

表现

CSS

网页元素的外观和位置等页面样式(如:颜色、大小等)

行为

Javascript

网页模型的定义和页面的交互


1. HTML的概念

HTML(Hyper Text Markup Language)中文译为:超文本标记语言 专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频等内容进行描述

1.1 创建HTML网页

在代码文件夹中鼠标右击新建文本文档命名为:文字变粗案例.txt 双击这个文件,输入代码等内容记得保存! 在文件上点击鼠标右键重命名修改文件后缀为.html 双击文字变粗案例.html,浏览器会自动打开文件并显示之前输入的内容

2. HTML页面固定结构

<html>
    <head>
        <title>网页总标题</title>
    </head>
    <body>
    网页的主题内容
    </body>
</html>

3. VS Code

3.1 VS Code的基本快捷键

  1. 快速生成标签:英文+Tab

  2. 保存文件Ctrl+S

  3. 快速查看网页效果:右击Open in Default Browser 快捷键:Alt+B

  4. 快速生成结构标签:!+Tab"!"必须是英文,文件后缀名必须是.html。

3.2 注释

为代码添加具有解释性、描述性的信息,主要用来帮助开发人员理解代码 快捷键:Ctrl+/

3.3 HTML标签的结构

<strong> 要加粗的文字 </strong>
开始标签  包裹的内容   结束标签
  1. 标签由< > / 英文单词字或字母组成,并且把标签中<>包括起来的英文单词或字母称为标签名

  2. 常见的标签由两部分组成,我们称之为:双标签,前面的部分叫开始标签,后面的部分叫结束标签,两部分之间为包裹内容

  3. 少数标签由一部分组成,我们称之为:单标签,自成一体,无法包裹内容。

3.4 HTML标签的属性

<strong class=”one”>文字要变粗</strong>
class=”one”:标签的属性
class:属性名
one:属性值

tips:

  1. 标签的属性写在“开始标签”的内部

  2. 标签上可以同时存在多个属性

  3. 多个属性之间以空格隔开

  4. 标签名与属性之间必须以空格隔开

  5. 属性之间没有顺序之分

4. HTML基础标签学习

4.1 标题标签

代码:

<body>
    普通的文字
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

代码实现的标题效果如下:
HTML标题图片.png

tips:

  1. 文字都有加粗

  2. 文字都有变大,并且从h1➡h6文字逐渐减小

  3. 标题独占一行

  4. h1标签用于特定场景,如:新闻的标题、网页logo部分

4.2 段落标签

代码:

<p>我是一段文字</p>
<body>
    <h1>前端开发</h1>
    <p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。</p>
    <p>前端开发从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。</p>
    <p>前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5,Node.js的广泛应用,各类UI框架,JS类库层出不穷,开发难度也在逐步提升。</p>
    
</body>

代码实现效果如下: HTML段落图片.png

tips:

  1. 段落之间存在间隙

  2. 段落独占一行

4.3 换行标签

代码:

<br>

tips: 单标签,直接放在要换行的文字前面

4.4 水平线标签

代码:

<hr>

tips: 单标签,放在标题和段落中间

4.5 文本格式化标签

加粗 倾斜 删除线 下划线 代码(规范使用):

    <strong>加粗</strong>
    <ins>下划线</ins>
    <em>倾斜</em>
    <del>删除</del>

另一种代码:

    <b>加粗</b>
    <u>下划线</u>
    <i>倾斜</i>
    <s>删除线</s>

tips:一般使用第一种代码,符合标签语义化,利于机器解析

4.6 图片标签

代码:

  <img src="" alt="">
4.61 图片标签的src属性

属性名:src 属性值:目标图片的路径 注意点:当前网页和目标图片在一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)

4.62 图片标签的alt属性

属性名:alt 属性值:替换文本

  • 当图片加载失败时,才会显示alt文本

  • 当图片加载成功时,不会显示alt文本

4.63 图片标签的title属性

属性名:title 属性值:提示文本

  • 当鼠标悬停时,才显示的文本

  • title属性不仅仅用于图片标签,还可以用于其他标签 代码:

  <img src="" alt="" title="">
  鼠标停在图片上面会显示出来的文字

  <h1 title="这是一个标题">一级标题</h1>
  也可以用于其他鼠标可以悬停的地方
4.64 图片标签的width和height属性

属性名:width和height 属性值:宽度和高度(数字)

  • 如果只设置width和height其中一个,另一个没设置的自动等比例缩放(此时图片不会变形)

  • 如果同时设置了width和height两个,若设置不当此时图片可能会变形

4.7 路径

场景:页面需要加载图片,需要先找到对应的图片

路径可分为:

  • 绝对路径(了解)

  • 相对路径

绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径 例如:

  • 盘符开头:D:\day01\images\1.jpg

  • 完整网络地址:http://www.itcast.cn/2018czgw/images/logo.gif(了解)

相对路径(常用):从当前文件夹开始出发找目标文件的过程

  • 当前文件:当前的html网页

  • 目标文件:要找的图片 相对路径分类:

  • 同级目录:当前文件和目标文件在同一目录中 代码:直接写目标文件的名字

    代码一:<img src="目标图片.gif">
    代码二:<img src="./目标图片.gif">
    VS Code快捷操作:直接敲./后,会自动提示统计目录中有哪些文件,直接选择即可
    
  • 下级目录:我在客厅,你在卧室,我要找你

    代码步骤:
    1.先知道在哪个文件夹里面➡文件夹名字
    2.进入这个文件夹 ➡/
    3.此时看到的目标文件直接喊他➡直接写目标文件名字
    VS Code快捷操作:直接敲 ./ 即可
    
  • 上级目录:我在卧室,你在客厅,我要找你

    代码步骤:
    1.先出当前文件夹,到上一级目录➡ ../
    2.此时看到目标文件直接喊他➡直接写目标文件
    VS Code快捷操作:直接敲 ../后,会自动提示上级目录下有文件,直接选择即可
    

4.8 音频标签

代码:

<audio src=" "></audio>

属性名

功能

src

音频的路径

controls

显示播放的控件

autoplay

自动播放(部分浏览器不支持)

loop

循环播放

tips:目前音频标签只支持MP3、WAV、OGG格式

4.9 视频标签

代码:

<video src=""></video>

属性名

功能

src

视频的路径

controls

显示播放的控件

autoplay

自动播放(谷歌浏览器中需要配合muted实现静音播放)

loop

循环播放

tips:视频标签目前只支持MP4、WebM、OGG

4.10 链接标签(a链接、超链接、锚链接)

代码:

外部链接:
<a href="https://bilibili.com">点击去B站</a>

内部链接:
<a href="./15视频标签.html">点击去上一个笔记</a>

a标签特点:

  • a标签默认文字下有下划线

  • a标签从未点击过,默认颜色是蓝色

  • a标签点击过之后,颜色变为紫色(清除浏览器记录可以重新变为蓝色)

4.101 链接标签的target属性

属性名:target 属性值:目标网页的打开形式

取值

效果

_self

默认值,在当前窗口中跳转(覆盖原网页)

_blank

在新窗口中跳转(保留原网页)

空链接:

<a href="#">空连接</a>

功能:

  • 点击之后回到网页顶部

  • 开发中不确定该链接最终跳转位置,可以用空链接先占位置

5. HTML列表标签

5.1 无序列表

代码:

<ul>
     <li>苹果</li>
     <li>香蕉</li>
     <li>橘子</li>
     <li>西瓜</li>
     <li>葡萄</li>
</ul>

5.2 有序列表

代码:

<ol>
    <li>华为</li>
    <li>苹果</li>
    <li>小米</li>
    <li>三星</li>
</ol>

注意:无序列表和有序列表的ul或ol标签只能包裹li标签,而li标签可以包裹任意内容

5.3 自定义列表

场景:在网页底部的导航中通常会使用自定义列表实现 标签组成:

标签名

说明

dl

表示自定义列表的整体

dt

表示自定义列表的主题

dd

表示自定义针对主题的每一项内容

显示特点:dd会默认显示缩进效果 注意:

  • dl标签只允许包裹dt和dd标签

  • dt和dd标签可以包含任何内容

代码:

    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>

6. HTML表格标签

6.1 表格的基本标签

标签名

说明

table

表格整体,可用于包裹多个tr

tr

表格每行,可用于包裹td

td

表格单元格,可用于包裹内容

基础代码:

    <table>
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>小梦</td>
        <td>100</td>
        <td>小梦真帅</td>
    </tr>
    <tr>
        <td>小蓝</td>
        <td>90</td>
        <td>小蓝真蓝</td>
    </tr>
    <tr>
        <td>小白</td>
        <td>80</td>
        <td>小白真白</td>
    </tr>
    </table>

实现效果:

基础表格实现效果.png

6.2 表格的相关属性

属性名

属性值

效果

border

数字

边框宽度

width

数字

表格宽度

height

数字

表格高度

加上属性后代码:

    <table border="1" width="300" height="100">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>小梦</td>
        <td>100</td>
        <td>小梦真帅</td>
    </tr>
    <tr>
        <td>小蓝</td>
        <td>90</td>
        <td>小蓝真蓝</td>
    </tr>
    <tr>
        <td>小白</td>
        <td>80</td>
        <td>小白真白</td>
    </tr>
    </table>

效果:

表格属性.png

6.3 表格标题和表头单元格标签

场景:在表格中表示整体大标题和一列小标题

标签名

名称

说明

caption

表格大标题

表示表格整体大标题,默认在表格整体顶部居中位置显示

th

表头单元格

表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

属性:rowspan,合并单元格 代码:

    <table border="1" width="300" height="300">
        <caption><h3>学生成绩单</h3></caption>
        <!-- 表格的头部 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评价</th>
            </tr>
        </thead>
        <!-- 表格的身体 -->
        <tbody>
            <tr>
                <td>小明</td>
                <!-- 保留 -->
                <td rowspan="2">100</td>
                <td>厉害</td>
            </tr>
            <tr>
                <td>小黑</td>
                <!-- 删除 -->
                <!-- <td>100</td> -->
                <td>真行</td>
            </tr>
        </tbody>
        <!-- 表格的底部 -->
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
                <!-- <td>郎才女貌</td> -->
            </tr>
        </tfoot>
    </table>

效果:

合并单元格.png

7. HTML表单标签

7.1 input系列标签

场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页 标签名:input

  • input标签可以通过type属性值的不同,展示不同效果 type属性值:

    标签名

    type属性值

    说明

    input

    text

    文本框,用于输入单行文本

    input

    password

    密码框,用于输入密码

    input

    radio

    单选框,用于多选一

    input

    checkbox

    多选框,用于多选多

    input

    file

    文件选择,用于之后上传文件

    input

    submit

    提交按钮,用于提交(配合form标签)

    input

    reset

    重置按钮,用于重置(配合form标签)

    input

    button

    普通按钮,默认无功能,之后配合js添加功能(配合form标签)

代码:

    昵称:<input type="text">
    <br>
    密码:<input type="password">
    <br>
    性别:<input type="radio"> 男
    <br>
    爱好:<input type="checkbox"> 敲代码
    <br>
    上传文件:<input type="file"> 
    <br>
    <input type="submit"> <input type="reset"> <input type="button">

效果:

input效果.png

  • input文本框常用属性:

    属性名

    属性值

    placeholder

    占位符,提示用户输入内容的文本

    拓展:value属性和name属性作用介绍 value属性:用户输入的内容,提交之后会发送给后端服务器 name属性:当控件的含义,提交之后可以告诉后端发送过去的数据是什么含义 后端接受到的数据的格式是:name的属性值=value的属性值 代码:

        昵称:<input type="text" placeholder="请输入昵称" 
        value="这是帅哥" name="wikiname">
    
  • input密码框常用属性:

    属性名

    属性值

    placeholder

    占位符,提示用户输入内容的文本

    注意点:type属性值不要拼错或者多加空格,否则相当于设置了默认值状态:text➡文本框

      密码:<input type="password" placeholder="请输入密码">
    
  • input单选框常用属性:

    属性名

    说明

    name

    分组,有相同name属性值的单选框为一组,一组中同时只能有一个被选中

    checked

    默认被选中

    注意点:name属性对于单选框有分组功能,有相同name属性值的单选框为一组,一组只能同时有一个被选中

      性别:<input type="radio" name="sex" checked> 男
      <input type="radio" name="sex"> 女
    
  • input复选框常用属性:

    属性名

    说明

    checked

    默认选中

     爱好:<input type="checkbox" checked> 敲代码 
     <input type="checkbox"> 看书 
     <input type="checkbox"> 听音乐
    
  • input文件选择常用属性:

    属性名

    说明

    multiple

    多文件选择

    上传文件:<input type="file" multiple> 
    

7.2 button系列标签

type属性值:

标签名

type属性值

说明

button

submit

提交按钮,点击之后提交数据给后端服务器

button

reset

重置按钮,点击之后恢复表单默认值

button

button

普通按钮,默认无功能,配合js添加功能

注意:

  • 谷歌浏览器button默认是提交按钮

  • button标签是双标签,更便于包裹其它内容:文字、图片等

  • 重置按钮使用要配合form标签

    <form>
        昵称:<input type="text" placeholder="请输入昵称">
        <br>
        <button type="submit">
            button提交按钮
        </button>
        <br>
        <button type="reset ">
            button重置按钮
        </button>
        <br>
        <button type="button">
            button普通按钮
        </button>
    </form>

7.3 select下拉标签

标签组成:

  • select标签:下拉标签的整体

  • option标签:下菜单的每一项

常见属性:

  • selected:下拉菜单中的默认选中

    所在城市:<select>
             <option>上海</option>
             <!-- 默认选中北京 -->
             <option selected>北京</option>
             <option>广州</option>
             <option>深圳</option>
             </select>

7.4 文本域标签

场景:在网页中提供可输入多行文本的表单控件 标签名:textarea 常见属性:

  • cols:规定了文本域中可见宽度

  • rows:归档了文本域中可见行数

注意点:

  • 右下角可以拖拽调整大小

  • 实际开发时针对于样式效果推荐用CSS设置

    <textarea cols="60" rows="30"></textarea>

7.5 label标签

场景:用于绑定内容与表单标签的关系 标签名:label 使用方法1:

  1. 使用label标签把内容(如:文本)包裹起来

  2. 在表单标签上添加id属性

  3. 在label标签的for属性中设置对应的id属性值

    <input type="checkbox" id="one"> <label for="one">敲代码</label>

使用方法2:

  1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来

  2. 需要把label标签的for属性删除即可

    <label>
        <input type="checkbox"> 读书
    </label>

8. 语义化标签

8.2 没有语义的布局标签

场景:实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签 div标签:一行只显示一个(独占一行) span标签:一行可以显示多个

    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>

8.3 有语义的布局标签

标签名

语义

header

网页头部

nav

网页导航

footer

网页底部

aside

网页侧边栏

section

网页区块

article

网页文章

注意点:以上标签显示特点和div一致,但是比div多了不同的语义 有语义的布局标签.png

9. 字符实体

9.1 HTML中的空格合并现象

场景:如果在HTML代码中同时并列出现多个空格、换行、缩进等,最终浏览器指挥解析出一个空格

9.2 常见字符实体

场景L:在网页中展示特殊符号效果时,需要使用字符实体替代 结构:&英文; 常见字符实体:

显示结果

描述

实体名称

空格

&nbsp ;

<

小于号

&lt ;

>

大于号

&gt ;

&

和号

&amp ;

"

引号

&quot ;

'

撇号

&apos ;(IE不支持)

¢

分(cent)

&cent ;

£

镑(pound)

&pound ;

元(yen)

&yen ;

欧元(euro)

&euro ;

§

小节

&sect ;

©

版权(copyright)

&copy ;

综合案例-免费注册网站:

    <form>
       <h1>青春不常在,抓紧谈恋爱</h1>
       <hr>
       昵称:<input type="text" placeholder="请输入昵称">
       <br>
       <br>
       性别:<input type="radio" name="sex">男 <input type="radio" name="sex">女
       <br>
       <br>
       生日:<input type="date">
       <br>
       <br>
       城市:
       <select>
           <option>上海</option>
           <option selected>北京</option>
           <option>广州</option>
           <option>深圳</option>
           <option>河南</option>
       </select>
       <br>
       <br>
       婚姻状况:<input type="radio" checked name="婚姻状况"> 未婚 <input type="radio" name="婚姻状况"> 已婚 <input type="radio" name="婚姻状况"> 保密
       <br>
       <br>
       <label>
           兴趣爱好:<input type="checkbox"> 抽烟 <input type="checkbox"> 喝酒 <input type="checkbox"> 烫头
       </label>
       <br>
       <br>
       个人介绍:
       <br>
       <br>
       <textarea cols="30" rows="10"></textarea>
       <br>
       <br>
       
       <h2>我承诺:</h2>
       <ul>
           <li>年满18岁</li>
           <li>抱着严肃的态度</li>
           <li>真诚寻找另一半</li>
       </ul>
       <br>
       <br>
       <input type="checkbox">我同意所有条款
       <br>
       <br>
       <input type="submit" value="免费注册"> 
       
       <input type="reset" value="点击重置">
   </form>

实现效果:

青春不常在.png

综合案例今日搜索热词:

    <h1>今日搜索热词</h1>
    <hr>
    <h2>1、东京奥运会中国金牌数量目前排行第一</h2>
    <p>东京奥运会本定在2020年举行,因为疫情影响,推迟到了2021年,详情可见百度:<a href="https://www.baidu.com/s?wd=%E4%B8%9C%E4%BA%AC%E5%A5%A5%E8%BF%90%E4%BC%9A&rsv_spt=1&rsv_iqid=0xc96ffb3000004c40&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=26&rsv_sug1=16&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=5402&rsv_sug4=5402" target="_blank">东京奥运会</a>
        <br><a href="./综合案例2音频网页.html" target="_blank">点我播放音频</a>
    </p>
    <h2>2、奥运选手们加油!</h2>
    <p>近日,<a href="https://baike.baidu.com/item/%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E7%B2%BE%E7%A5%9E/85972?fromtitle=%E5%A5%A5%E8%BF%90%E7%B2%BE%E7%A5%9E&fromid=1376190&fr=aladdin" target="_blank">奥运精神</a>鼓舞众多奥运选手全力以赴,不断创造历史,让我们为奥运选手加油!</p>
    <br><a href="./综合案例2视频.html">点我播放视频</a>

实现效果: 今日热词.png

综合案例-音频网页:

    <h1>好听的音频</h1>
    <audio src="./music.m4a" controls autoplay>你听了吗</audio>

实现效果:

音频效果.png

综合案例-优秀学生成绩单:

    <table border="1" width="300" height="100">
        <caption><h3>优秀学生成绩单</h3></caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td rowspan="2">三年二班</td>
            </tr>
            <tr>
                <!-- <td>高三</td> -->
                <td>赵四</td>
                <td>120</td>
                <!-- <td>三年二班</td> -->
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">你们都很优秀</td>
            </tr>
        </tfoot>
    </table>

实现效果:

优秀学生成绩单.png


以上笔记为本人闲来无事学习黑马程序员HTML5+CSS3+移动Web前端全套所记 如有帮助,请点赞支持。


本文章使用limfx的vscode插件快速发布