HTML、CSS学习①

TheBestHL

已于 2022-10-20 22:52:49 修改

阅读量240

点赞数

文章标签： css html 学习

于 2022-10-18 11:12:12 首次发布

本文链接：https://blog.csdn.net/TheBestHL/article/details/127382683

版权

HTML、CSS学习①

什么是HTML、CSS？
- 如何去写代码？写到哪里？
- - 深入了解网站开发（均以Chrome浏览器为例）
  - - web前端的三大核心技术
    - - HTML基础结构与属性
      - HTML初始代码

什么是HTML、CSS？

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。
CSS又称为层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

如何去写代码？写到哪里？

在记事本中写代码即可，代码写好之后将记事本的后缀名(.txt)更改为.html打开就可以了。(当然，这种方法效率较低，也不方便，不推荐)
一个网站是由N个网页组成的，每一个网页都是一个.html文件。
编辑代码较为常用的有VSCoad编辑器，无论是小白还是大神，使用的都以VSCoad居多。
VSCoad启动之后需要前往扩展去下载中文插件
VSCoad部分快捷键
Ctrl+s:保存 Ctrl+a:全选 Ctrl+x:剪切 Ctrl+v:粘贴
Ctrl+c:复制 Ctrl+z:撤销 Ctrl+y:前进
shift+end:从头选中一行 shift+home:从尾选中一行 shift+alt+↓:选中当前行并向下复制
Alt+方向键（上或下）:可以快速上下移动当前行
tab:向后缩进 tab+shift:向前缩进 alt+鼠标左键: 多光标
ctrl+d:选择相同元素的下一个

深入了解网站开发（均以Chrome浏览器为例）

一个大型网站的开发，需要团队的配合，各个岗位不可或缺。
UI设计师：设计稿
web前端开发工程师(H5开发)
设计稿 → 代码
数据库里的数据 → 显示到桌面
HTML + CSS
HTML：结构
CSS：样式

    web后端开发工程师

web前端的三大核心技术

HTML：结构
CSS：样式
JavaScript：行为

HTML基础结构与属性

超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用。是网页制作必备的编程语言。

HTML：超文本标记语言

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

标记(也叫标签)：<单词> 例: <‘header’> <‘footer’>
写法分成两种：
单标签 <‘header’>
双标签 <‘header><’/header’>
创建标签的快捷键：单词 + tab键 → <单词>
标签可以上下排列，也可以组合镶嵌。
HTML常见标签：
在这里插入图片描述
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签属性=“值” 属性2=“值2”>
语言：编程语言

HTML初始代码

每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。
每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法。
! + tab键：快速的创建html的原始代码。
例：

<!DOCTYPE html>   文档声明：告诉浏览器这是一个html文件
<html lang="en">  html文件的最外层标签：包裹着所有的html标签代码
lang="en"表示这是一个英文网站 lang="zh_CN"表示一个中文网站
    <head>
        <meta charset="UFT-8"> 原信息：是编写网页中的一些赋值信息 
        charset="UTF-8"国际编码，让网页不出现乱码的情况
        <title>Document</title>> 设置网页的标题
        </head>
        <body>
        显示网页内容的区域
        </body>
       </html>