HTML基础

Posted 2022-09-17 sauronblog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础相关的知识，希望对你有一定的参考价值。

1.认识网页

网页的构成：文字，图片，超链接，音频，视频以及flash等构成

网页中的代码需要由浏览器来渲染和解析

2.常见的浏览器

1.IE浏览器

2.谷歌浏览器

3.火狐浏览器

4.safari浏览器

5.Opear浏览器

每个浏览器内核都包括两部分：渲染引擎(用来渲染html+css)和解析引擎(用来解析javascript代码)

3.WEB标准(重点)

WEB页面具体组成有三部分：

结构： html 标签页面的骨架

样式： css样式让页面看起来更加的美观

行为： javascript 简称js 让页面可以有动态的效果，还可以和服务器端进行数据的交互

也称为前端页面三层：结构层，样式层，行为层

4.书写第一个web页面

1.在桌面或是某个文件夹中单击鼠标右键新建一个index.txt记事本文件

2.双击打开这个记事本文件

3.在此文件中书写基本内容

4.将此index.txt文件修改为index.html，此时会发现这个普通文本文件变成了一个html页面

5.双击这个html页面,就可以在浏览器中打开查看了

5.网站的编码

国际通用的是"UTF-8" 几乎包含世界上所有的文字语言

国内通用的一般是“GBK" ,"GB2312" 对国内的文字解析更加友好

记住：以后我们的网站就统一使用"UTF-8"这个编码格式就可以了

6.常用的编辑器

sublime

webstorm

HBuilder

vscode 当前基础班阶段主要是使用vscode这款编辑器，插件非常方便，开源，免费的

7.基本的页面骨架结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

8.为什么用标签?

为了页面更加的美观，及良好的排版和后期的维护，需要使用标签对页面中的文本，图片和超链接进行一个控制。

9.h系列的标签

h系列的标签一般是用于设置标题内容

h1一般用于最大的标题或是logo，一个页面中只能有一个h1

h系列的标签只有h1---h6

h系列的标签都是块级标签，特点就是在浏览器中自己独占一行。

10.段落标签p

页面中用于分段的标签是p标签，这是一个双标签，是成对存在的

如果想在段落中对某句话，进行换行还可以加入<br/>

<br />

11.水平分割线

<hr />

12.标签间的关系

1.嵌套关系当前标签里面还有子标签，这就是一个嵌套关系

<body>
    <p>这是一个段落标签</p>
</body>

2.并列关系两者标签是同级并列的

<head></head>
<body></body>

13.标签分类

根据书写来进行的分类：

双标签

<head></head>
<body></body>

单标签

<br/>
<hr/>

文本格式化标签一般用于页面中的修饰作用，比如显示一个精灵图

<b></b>　　<strong></strong>      可以将文本内容加粗显示
<i></i>　　<em></em>                        将文本内容以斜体来显示
<s></s>　　<del></del>                        将文本内容加入中划线或删除线
<u></u>　　<ins></ins>                      将文本内容加下划线

根据页面的显示效果来分类：

块级元素: 自己独占一行,不允许别的标签在本行内显示比如: h系列标签 p 标签 div 列表 ul li ol li dl dt dd

行内元素: 一行内可以显示多个比如：b ,strong,em,s, span a

行内块元素: input button img

14.标签语义化

概括的说，就是在页面合适的位置放置合适的标签。

好处：

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

两个重要但是没有语义的标签：

div 用于标注页面中的一个大块的内容，里面可以有文本，图片，还有段落，超链接，视频...

span span一般用于标注小范围的文本内容可以对这块文本内容设置必要的样式，比如，文本大小，颜色...

15.超链接a标签的使用

a标签用于跳转到另一个页面，不但可以跳转到网络中的任意一个页面，还可以跳转到我们本项目中的任意一个页面

基本语法结构：

<a href="要跳转的目标URL" target="_self">链接内容</a>

target属性默认的取值是：_selft 还有另外一个属性 _blank 是在新的页面打开

16.图片标签img

页面中的图片要使用img标签来显示

<img src="图片地址的路径" alt="图片加载失败时的描述" title="图片的普通描述">

alt：只有图片加载失败的时候，才会显示内容，如果图片正常显示的话，则alt的内容不会显示

title: 不管图片加载失败与否,都会显示title的内容

17.图片的路径

相对路径：

以./ ../ 开头的路径称为相对路径是相对于当前的.html文件所在的目录而查找的路径;

相对路径会因为.html文件的位置变化而变化

绝对路径：

以系统盘符开头或是以域名或IP地址这样的路径设置的，称为绝对路径;

绝对路径的好处是不管.html文件位置如何变化，都会显示图片

vscode中常用的快捷键

ctrl + c 复制当前内容

ctrl + x 剪切当前内容

ctrl + v 粘贴当前内容

ctrl + / 注释某段内容

ctrl + z 撤销当前操作

ctrl + shift + d 复制当前行内容到下一行

vscode常用插件

1. Auto Close Tage 自动闭合HTML/XML标签

2. Auto Rename Tag 自动重命名配对的HTML / XML标签

3. AutoFileName 文件路径提示

4. EaseServer 让打开的文件以http的方式打开，location的前缀，而不再是file 快捷键：ctrl+shift+enter

5. open in brower 在浏览器中打开，安装后在左侧目录中右键点击会出现 open in browser 选项

6. Path Autocomplete 路径完成提示

7. Path Intellisense 文件路径智能提示

8. Sublime Material Theme sublime主题风格

9. Sublime Text Keymap and Settings Importer 类似sublime的快捷键设置

10. vscode-icons 文件图标

11. Material Icon Theme vscode图标主题,支持更换不同色系的图标

以上是关于HTML基础的主要内容，如果未能解决你的问题，请参考以下文章

HTML5零基础入门之HTML基础语法详解