web——web认知、html认知
作者：小 琛
欢迎转载，请标明出处
文章目录
-
- 什么是web标准
- html入门
-
- 骨架结构
- 标签排版
-
- 换行与水平线
- 标题与段落
- 插入图片
- 插入音视频
- 网页间的链接
- 综合例子
什么是web标准
目的：再不同浏览器打开，页面效果一致。
为实现该目的，设定了web标准，web标准即内容由三大模块组成：
- 结构使用HTML：完成页面元素和内容的组合
- 表现使用CSS：完成页面样式的渲染，令页面更加优美
- 行为使用JavaScript：完成页面模型与页面交互
就像一只鸟，HTML画出了鸟的骨架，CSS为它增加了丰富且漂亮的羽毛，JS则令这个鸟能动起来
html入门
目的：对该语言有基本认知，可以完成一些简单的页面组合
骨架结构
基本骨架结构：html标签、head标签（title标签）、body标签
在vscode中，新建一个html文件，输入!(英文感叹号)，键盘敲击Tab，会自动生成一个框架。
标签排版
对于标签而言，有单标签和双标签，区分可采用以下原则：若该内容，需要确定头和尾，例如对某些字体加粗，要确定从哪个字开始到哪个字结束，为双标签；若某些操作，不需要自主确定头和尾。例如换行。则为单标签。
换行与水平线
两者均为单标签
换行： < 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>
运行结果：
标题与段落
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>
段落的使用：< 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>
插入图片
在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>
插入音视频
在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>
点击跳转到图片.html后
