文章目录
1.什么是HTML、CSS?
（html与css相互配合）
- 是做网站的编程语言。
- 浏览器把代码解析后的样子就是我们看到的网站，如何看到网页的原始代码呢？通过鼠标右键查看与网页源代码。
- 如何去写代码？写到哪里呢？
- 一个网站是由N多个网页组成的。 每一个网页就是一个.html文件
- 比喻:网站就像电视剧，由很多集组成。
2.VSCode编辑器？
-
VS cobe下载地址:
地址
- 如何安装插件？ 主要插件:语音包(Chinese)、open in browser、view in borwser
- 方法、作用(由于软件下载好后，其内容全部都是英语，这时咱们可以在最左侧图标找到扩展，在里面搜索安装一些插件，Chinese插件可以将内容改为中文，open in browser插件可以在编辑器点击鼠标左键找到Open ln Default Browser打开( 运行) 编写好的html文件。view in borwser插件可以在编辑器菜单上点击鼠标左键找到View ln Browser打开(运行)编写好的html文件（两者作用都一样，只是打开方式不一样）)
- 学习编辑器基本使用？
- 设置:文件(在左上角)->首选项->设置（字体大小，、是否换行（自动折行）word wrap）
- 创建文件、创建文件夹、重命名和删除
- 快捷键
- ctrl+s:保存
- ctrl+a:全选
- ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴
- ctrl+z、ctrl+y:撤销（后退一步)、前进（前进一步）
- shift+end:从头选中一行
- shifr+home尾部选择一行
- shift+allt+↓:快速复制一行
- alt+↑或↓:快速移动一行
- tab:向后缩进
- tab+shift:向前缩进
- 多光标:alt+鼠标左键
- ctrl+d:选择相同元素的下一个
3.chrome浏览器？(谷歌浏览器)
-
Chrome下载地址:
地址
4.深入了解网上开发？
一个网页是由下面三种职位相互合作开发
- UI设计师:设计稿
- web前端开发工程师(H5开发):将设计稿转成代码、将数据库里的数据显示到页面、HTML+CSS(HTML:结构、CSS:样式)
- wen后端开发工程师:把网站产生很多数据存储起来
5.web前端的三大核心技术？
- HTML:结构
- CSS:样式
- JavaScriot:行为
6.HTML基本结构和属性？
- HTML:超文本，标记语言。
- 超文本:文本内容+非文本内容(图片、视频、音频等)
-
标记:<单词>
标记叫做标签:比如
<header>
<footer>
写法分成两种:
1. 单标签
<img>
2. 双标签
<header></header>
- 语言:编程语言
- 创建标签的快捷键:单词+tab键可以转换为<单词>(如果是单标签会转换为单标签，如果是双标签会转换为双标签)
- 标签是可以上下排列，也可以组合嵌套
-
HTML常见标签:
HTML5元素标签含义大全
- 标签的属性:来修饰标签的，设置当前标签的一些功能。
- <标签 属性=“值” 属性2=“值2”>
7.HTML初始代码？
- 每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法。
- ！+tab建:快速的创建html的初始代码
<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文档
<html lang="en"> html文件的最外层标签。包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> 元信息:是编写网页中的一些赋值信息。charset="UTF-8"国际编码,让网页不出现乱码情况。charset属性规定html文档的字符编码,防止乱码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
8.HTML注释？
- 写法:<！– 注释的内容 –>在浏览器中看不到，只能在代码中看到注释的内容。
- 意义:
- 把暂时不用的代码注释起来，方便以后使用。
- 对开发人员进行提示
- 快捷添加注释与删除注释:
- ctrrl+/
- shift+alt+a
9.标题与段落？
-
标题是双标签:
<h1></h1>
…
<h6></h6>
- 在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签。
- h5、h6标签在网页中不经常使用。
-
段落是双标签:
<p></p >
10.文本修饰标准？
-
强调->双标签:
<strong></strong>``<em></em>
- 区别:
-
写法与展示效果是有区别的，
<strong></strong>
对加粗
<em></em>
字体斜体 -
<strong></strong>
强调性更强。
<em></em>
强调性稍弱
强调性稍弱
-
下标文本:
<snb></sub>
-
上标文本:
<sup></sup>
-
删除文本:
<del></dei>
-
插入文本:
﹤ins></ins>
- 注:一般情况下，删除文本都是和插入文本配合使用的
- 图例
-
a
2
+b
2
=c
2
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
- H2O
H<snb>2</snb>O
-
促销:原价
300
，现价
100
。
促销:原价<del>300</del>，现价<ins>100</ins>。
11.图片标签？
-
<img>
(单标签)向网页中镶入一部图像，具有以下属性。
- src:引入图片的地址
- alt:当图片出现问题的时候，可以显示一段友好的提示文字
- title:提示信息，当我们把鼠标放到标签上时，该提示信息就会显示出来。(所有html标签都可以拥有)
- width、height:控制图片的大小，单位是像素(直接输入数字)。建议设置该属性，这样可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
- 写法:
< img src="图片地址" alt="图片出现问题，代替图片的文字" width="***" height="***">
12.引入文件的地址路径
相对路径
-
以引用文件之网页所在位置为参考基础，而建立出的目录路径。
. 在路径中表示当前路径，通常情况下可省略
. . 在路径中表示上一级路径 - 图像文件和html文件位于同一文件夹：只需输入图像文件 的名称即可，如< img src=”logo.gif” />。
- 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如< img src=”img/img01/logo.gif” />。
- 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/”，如果是上两级，则需要使用 “…/ …/”，以此类推，如< img src=”…/logo.gif” />
绝对路径
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
- 编写文件的时候，绝对路径在电脑的任何一个文件中都能够找到（需要写全部的路径，从什么盘开始）
- 格式比喻：
- D:/Hbulider/HBuilder/tools/nview/index.js（文件绝对路径）
-
http://c.biancheng.net:80/view/7410.
html
（网络绝对路径）
13.链接标签？
-
<a></ a>
双标签
- href属性:链接属性
- target属性:可以改变链接打开的方式，默认情况下:在当前页面打开_self 新窗口打开_blank(如果只想要在当前页面打开，可以不用设置target属性)
-
<base>
单标签:作用就是改变链接的默认行为(该标签是写在初始标签中的标签中的) - 图例
<!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>Document</title>
<base target=_blank>(在这里)
</head>
<body>
</body>
</html>
14.跳转锚点
- 跳转锚点:在页面内跳转到指定地点
-
跳转锚点也是用
< a>< /a>
标签实现，有两种实现方式：
- #+ id属性（id必须是唯一的）
- 图例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=
版权声明：本文为m0_59418670原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。