web——web认知、html认知

发布时间：2023-02-21 10:30

作者：小琛
欢迎转载，请标明出处

文章目录

- 什么是web标准
- html入门
- - 骨架结构
  - 标签排版
  - - 换行与水平线
    - 标题与段落
  - 插入图片
  - 插入音视频
  - 网页间的链接
- 综合例子

什么是web标准

目的：再不同浏览器打开，页面效果一致。

为实现该目的，设定了web标准，web标准即内容由三大模块组成：

结构使用HTML：完成页面元素和内容的组合
表现使用CSS：完成页面样式的渲染，令页面更加优美
行为使用JavaScript：完成页面模型与页面交互

就像一只鸟，HTML画出了鸟的骨架，CSS为它增加了丰富且漂亮的羽毛，JS则令这个鸟能动起来

html入门

目的：对该语言有基本认知，可以完成一些简单的页面组合

骨架结构

基本骨架结构：html标签、head标签（title标签）、body标签

在vscode中，新建一个html文件，输入!(英文感叹号)，键盘敲击Tab，会自动生成一个框架。
$\"web——web认知、html认知_第1张图片\"$

标签排版

对于标签而言，有单标签和双标签，区分可采用以下原则：若该内容，需要确定头和尾，例如对某些字体加粗，要确定从哪个字开始到哪个字结束，为双标签；若某些操作，不需要自主确定头和尾。例如换行。则为单标签。

换行与水平线

两者均为单标签

换行： < br >
水平线：< hr >

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>换行与水平线title>
head>
<body>
    这句话之后换行<br>
    这行下面加水平分割线
    <hr>
body>
html>

运行结果：
$\"web——web认知、html认知_第2张图片\"$

标题与段落

html中设定了六级标题，分别用
< h1>< /h1>
< h2>< /h2>
< h3>< /h3>
< h4>< /h4>
< h5>< /h5>
< h6>< /h6>
标题大小逐级递减

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>测试标题title>
head>
<body>
    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>
    <h4>四级标题h4>
    <h5>五级标题h5>
    <h6>六级标题h6>
body>
html>

$\"web——web认知、html认知_第3张图片\"$

段落的使用：< p> < /p>。标签中间插入文字，段落会实现自动换行。
插入字体后，使用快捷键Alt+z，可以实现自动换行，令代码美观

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>测试段落title>
head>
<body>
    <p>对于标签而言，有单标签和双标签，区分可采用以下原则：若该内容，需要确定头和尾，例如对某些字体加粗，要确定从哪个字开始到哪个字结束，为双标签；若某些操作，不需要自主确定头和尾。例如换行。则为单标签。p>
    <p>下一个段落p>
body>
html>

$\"web——web认知、html认知_第4张图片\"$

插入图片

在vscode中输入图片的英文：img之后会有 < img src=“” alt=“”>

属性	含义
src	图片的路径
alt	替换文本，当图片无法显示时，替换
title	提示文本，鼠标悬停图片，显示
width、height	图片的高、宽

src的路径可以为相对路径和绝对路径，一般使用相对路径
高和宽一般只设置一个，另一个自主生成，这样可以保证图片不扭曲

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Documenttitle>
head>
<body>
    
    
    <img src=\"./1.jpg\" alt=\"雷霆三少\" title=\"雷霆三少\" width=\"200\">
    <hr>
    <img src=\"./2.gif\" alt=\"刘星\" title=\"刘星\" height=\"100\">
body>
html>

$\"web——web认知、html认知_第5张图片\"$

插入音视频

在vscode输入音视频的英文，audio、video之后：
< audio src=“”>
< video src=“”>

属性	含义
src	音视频的路径
controls	加入后，页面会有播放控制器
autoplay	自主播放
loop	循环播放

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Documenttitle>
head>
<body>
    <audio src=\"./周杰伦 - 听妈妈的话.mp3\" controls autoplay>audio>
    <video src=\"./视频.mp4\">video>
body>
html>

网页间的链接

在vscode输入a，出现：< a href=“”>< /a>

属性	含义
href	路径
target	覆盖属性

href：路径可以为某一个网址的url，例如https://www.baidu.com，也可以为一个相对路径，例如该项目中的某一个html
target属性代表点击链接后，出现的网页会覆盖现在的网页还是新打开一个网页，默认为_self即覆盖，若要修改，则改为_blank

DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=a, initial-scale=1.0\">
    <title>Documenttitle>
head>
<body>
    
    <a href=\"https://fanyi.baidu.com/?aldtype=16047#en/zh/video\">跳转到百度a>
    <br>
    
    <a href=\"./图片.html\" target=\"_blank\">跳转到图片.htmla>
    <br>
    <a href=\"#\">空链接a>
    <a href=\"\">a>
body>
html>