掌握HTML/CSS基础：从零开始构建网站-优快云博客

本文链接：https://blog.youkuaiyun.com/sun_flower_ice/article/details/125378203

HTML,CSS是做网站的编程语言，浏览器把代码解析后的样子就是我们看到的网站。

通过鼠标右键选择查看网页源代码查看网站的原始代码。

一个网站是由许多个网页组成。

创建html文件：在此电脑磁盘中，点击鼠标右键选择新建文本文档，修改文件名为_demo.html

VS Code,全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器。

vs code编辑器：

安装插件：语言包、open in browser、view in browser

学习编辑器基本使用：

ctrl+s:保存 ctrl+a:全选 ctrl+v:粘贴 ctrl+x:剪切 ctrl+c:复制

ctrl+z:撤销 ctrl+y:前进

设置：文件->首选项->设置（大小、是否换行word wrap)

创建文件、创建文件夹、重命名和删除

shift+end:从头选中一行 shift+home:从尾部选中一行

shift+alt+下键：快速复制一行

tab:向后缩进 tab+shift:向前缩进

多光标：art+鼠标左键

ctrl+d:选择相同元素的下一个

创建一个文件夹并将文件夹拖到vs code 中创建新文件或者新文件夹，删除创建即同步

网站开发的分工

UI设计师：设计稿→代码的实现

web前端开发工程师（H5开发）

web后端开发工程师（数据库）

web前端开发工程师（hs开发）:

设计稿->代码

数据库里的数据->显示到页面

html(结构）+css (样式）

web三大核心技术：html(结构） css(样式） Javascript(行为)

html基本结构与属性：

超文本：文本内容、非文本内容(图片、视频、音频等）

标记：<单词>

语言：编程语言

标记也叫做标签：<header> <footer>

写法分成两种:单标签<header> 双标签<header></header>

创建标签的快捷键:单词+tab键-><单词>

标签是可以上下排列，也可以组合嵌套。

html常见标签：

分享网址：http://www.html5star.com/manual/html5label-meaning/

标签属性：来修饰标签的，设置当前标签的一些功能。

<标签属性="值“"属性2="值2">

创建HTML初始代码：

创建新文件并命名为创建HTML初始代码.html，输入！+tab（快速创建）

<!DOCTYPE html> //文档声明：告诉浏览器这是一个html文件

<html lang="en"> // html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站

<head>

<title>Document</title> //设置网页的标题

</head>

<body>

//显示网页内容的区域

</body>

</html>

HTML的注释：

意义：1.把暂时不用的代码注释起来，方便日后使用

2.对开发人员进行提示

注释快捷键（添加和删除）：1.ctrl＋/ 整行注释 2.shift+alt+a 创建注释符

HTML语义化：

根据网页中内容的结构，选择合适的HTML标签进行编写

好处：1.在没有CSS的情况下，页面也能呈现出很好的内容结构

2.有利于SEO,让搜索引擎爬虫更好地理解网页内容

3.方便其他设备解析（如：屏幕阅读器、盲人阅读器）

4.便于团队开发与维护

标题与段落：

标题->双标签：<h1></h1> ... <h6></<h6>

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签，但h2-h6可以重复出现多次。

h5、h6在网页中不经常使用。

</head>

<body>

<h2>很高兴认识大家</h2>

</body>

</html>

段落->双标签：<p></p>

<body>

<h2>很高兴认识大家</h2>

<p>希望和大家相处愉快</p>

</body>

</html>

文本修饰标签

强调->双标签：<strong></strong>、<em></em>

区别：

1、写法和展示效果有区别，一个加粗、一个斜体

2、strong的强调性更强，em的强调性稍弱
下标：<sub></sub>

上标：<sup></sup>

<del>、<ins>删除文本、插入文本

值得注意的是一般情况下这二者是搭配使用。

<p>

<strong>这是一段需要强调的文本</strong>

<em>这是一段需要强调的文本</em>

</p>

<p>

a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> H<sup>2</sup>0

</p>

<p>

促销：原价<del>300</del>,现价<ins>100</ins>

</p>

图片标签与图片属性

img:图片，是一个单标签

src:引入图片的地址

alt：当图片出现问题时，可以提示一段友好的文字

title：提示信息

width、height:控制图片的大小，单位是像素

引入文件的路径地址
相对路径：.在路径中表示当前路径 ..在路径中表示上一级路径

在使用相对路径时，一定要注意图片的存储地址！图片离.html文件越近，相对地址越简单

对于相对路径，可以观察文件的存储位置确定路径关系，文件路径既可以使用反斜线\，也可以使用斜线/，注意：网络地址只能写斜线/，所以我们尽量避免写反斜线\

绝对路径：无参照物，是绝对的路径地址

web前端学习日志1

网站开发的分工

图片标签与图片属性