HTML基础(1)

时间 2019-12-16

标签 html 基础栏目 HTML 繁體版

原文原文链接

1.认识网页

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

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

2.常见的浏览器

1.IE浏览器html

2.谷歌浏览器前端

3.火狐浏览器java

4.safari浏览器web

5.Opear浏览器浏览器

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

3.WEB标准(重点)

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

结构： html 标签页面的骨架webstorm

样式： 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图标主题,支持更换不一样色系的图标