web学习---HTML总结
2021/6/15 18:32:00
本文主要是介绍web学习---HTML总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
web学习--HTML 总结
- 软件 vs code 2020以及相关插件安装
- HTML的学习总结
- 何为HTML
- 编写第一个网页
- 新建一个工程文件夹
- 新建HTML文件
- 运行第一个Web网页
- HTML的文档分析
- html元素
- head元素
- utf-8字符集编码
- 浏览器标签的图片
- 浏览器标签的名字
- body元素
- 注释
- 换行
- 水平分割线
- 输入框
- 标题大小的设置
- 超链接
- 锚点(书签)
- 图片的插入以及位置
- 表格
软件 vs code 2020以及相关插件安装
本次工程是在VS code 2020中编辑的,可以去官网下载,对于安装网上有很多教程,小编也不再重复写。
安装插件
首先点击下图中圈出来的图形
然后在文本框里面分别搜索Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence、Live server点击安装即可。
HTML的学习总结
何为HTML
HTML是超文本标记语言,我们可以使用HTML来构建我们的网页。
注意:HTML不是一门编程语言,而是一种用来构建网页框架的标记语言。
编写第一个网页
新建一个工程文件夹
点击文件,选择打开文件夹
此时我们可以新建一个文件夹,输入需要创建工程的文件夹名称
注意:工程文件夹最好不要放在C盘里;文件夹的名称最好是英文
新建HTML文件
点击下图所示的图标,创建一个后缀名为.html的文件
输入如下的内容:
<html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>页面标题</title> </head> <body> <h1>我的第一个Web页</h1> <p>当前有点丑:</p> </body> </html>
运行第一个Web网页
在HTML文档里面的空白区域单击鼠标右键,然后点击Open with Live Server
然后就可以在浏览器中看见刚刚编写的网页
HTML的文档分析
看看输入html文档里面的代码
不难看出每一对尖括号里面的内容在上下呼应
比如:和这就是一对
前面一个叫做开始标签,后面一个叫做结束标签;
在开始标签和结束标签里面就是内容;
开始标签+内容+结束标签=元素;
元素之间可以相互嵌套,HTML文档就是一个个元素组成的;
html元素
这个元素包含了整个完整的页面,其他的元素全部嵌套在其中。凡是写在元素外的内容都不会出现在网页上。
head元素
这个元素可以让你所想的包含在HTML页面中但不在HTML页面中显示的内容。
比如:编码、页面的样式、内部CSS等等
utf-8字符集编码
<meta charset="utf-8">
这个元素设置文档使用utf-8字符集编码,使用这种编码方式会少很多麻烦,因为它可以识别人类大部分的文字。
浏览器标签的图片
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
首先我们随便下载一个.ico的图片,下载的途径应该保存到我们刚刚创建的工程文件夹中;
然后把href后面的favicon修改成图片的名称;
最后看看浏览器标签的图片是否是变成刚刚下载的图片
浏览器标签的名字
<title>页面标题</title>
把页面标题修改成web学习
<title>web学习</title>
body元素
body元素 包含能在页面看到的所有内容,包括文本,图片,音频,游戏等等
注释
格式
<!-- 注释内容 --!>
在 code 软件中,输入Ctrl + /即可快捷的进行注释
换行
格式
<br>
水平分割线
格式
<hr>
输入框
格式
<input>
还有带属性的段落输入框和带属性的输入框
标题大小的设置
格式
<h1>一级标题</h1> <h2>二级标题</h2>
标题有h1到h6六种大小
超链接
格式
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
href即为要跳转去的地址 URL
target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)
超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的
锚点(书签)
锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
格式
<h2 id="C4">第四章 论零号病人的重要性</h2 <a href="#C4">跳到第四章</a>
注意这里的id值必须是唯一的,其余地方不能再出现相同的id值
思考: 经常在某些网站上看到一个浮动图标显示"回到页首",它是如何实现的?
<h1 id="C4">首页</h1 <a href="#C4">回到首页</a>
图片的插入以及位置
格式
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
src属性为要显示图片文件的位置 URL,即图片文件的 路径
alt属性当获取图片出现问题时显示的文字(占位符)
width 和 height 可为图片指定高宽度,但不建议(可能导致图片变形)
现在的图片是从网页上获取的,我们也可以下载图片到自己的工程目录下(不建议,因为这样自己的电脑可以顺利打开图片,无法保证别人的电脑有这个目录下的图片)
表格
格式:
<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>luo</td> <td>youxin</td> <td>18</td> </tr> <tr> <td>zeng</td> <td>xiang</td> <td>24</td> </tr> </table>
这篇关于web学习---HTML总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程