web前端学习第一周

X-Rayyyyy

已于 2022-10-23 10:48:30 修改

阅读量1.9k

点赞数

文章标签：前端学习

于 2022-10-20 10:34:48 首次发布

本文链接：https://blog.csdn.net/m0_74101828/article/details/127370650

版权

HTML＋CSS系列教程

拨云见日

HTML CSS 切图流程 PC （企业布局和游戏站布局）

溯本求源

拓展HTML ，CSS。
HTML5 新语法
CSS3 新语法
兼容与hack

风生水起

弹性布局网格布局移动端布局响应式布局 Bootstrap

巧夺天工

预编译CSS postcss CSS架构高级功能

一.拨云见日具体讲解

1.什么是HTML、CSS?
在这里插入图片描述
简而言之，做网站的编程语言。
（1）HTML的全称为超文本标记语言，是一种标记语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
（2）层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

2.如何去写代码？写到哪里呢？
一个网站N多个网页组成。右键可以查看源代码。后缀 . html文件

二.宇宙第一编译器vscode

设置：文件->首选项->设置 (大小、是否换行 word wrap)
创建文件、创建文件夹、重命名和删除
ctrl + s:保存
ctrl + a全选
ctrl + x、ctrl + c、ctrl + v：复剪切、复制、粘贴
ctrl + z、ctrl + y:撤销、前进
shift + end:从头选中一行
shift + home:从尾部选中一行
shift + alt + ↓：快速复制一行
alt + ↑或↓：快速移动一行
tab：向后缩进
tab + shift ：向前缩进
多光标：alt + 鼠标左键
ctrl + d:选择相同元素的下一个

三.Chome浏览器

市场份额超过百分之50

四.深入了解网站开发

在这里插入图片描述
团队配合

五.web前端三大核心技术

HTML ：结构
CSS : 样式
JAVASCRIPT : 行为

六.HTML基本结构与属性

重点：超文本！！！
在这里插入图片描述
html常见标签网址 https://www.html5star.com/maual/html5label-meaning/
标签的属性：来修饰标签的，设置标签功能。
<标签属性=“值” 属性2=“值2” >

七.HTML的初始代码

 ！＋tap  快速创建初始代码
 <!DOCTYPE html> 声明文档类型,告诉浏览器这是一个html文件。
<html> html文件的最外层标签,包含着所有的html标签代码。
补充：属性 lang=“en” (language=“english”)简写,声明这是一个英文网站 lang=“ZH-CN” 声明这个网站是中文网站。
<head>网页的头部内容,网页标题,引入外部文件（css代码一般都写在这里）
<meta charset="UTF-8">元信息,编码网页中的一些辅助信息,并不会展现在网页中。(目的是让网页不出现乱码的情况)
<title>Document </titlle>设置网页标题
</head>
<body>
 显示网页内容的区域 
 </body>
 </html>

八.HTML的注释

注释代码，只有在文件中看的到，在网页中看不见
<！–注释的内容–>
在这里插入图片描述

九.HTML的语义化

根据网页中内容的结构，选择合适的HTML标签进行编写。
在这里插入图片描述

十.标题与段落

<body>
<!--<h1>标题</h1>>
<h2>标题</h2>
<p>这是一个段落</p>-->

十一.文本修饰标签

1.强调（双标签）
(加粗)：<steong></strong>
(斜体)：<em></em>
（*strong的强调性比em更强）
2.下标(双标签)：<sub></sub>
   上标(双标签)：<sup></sup>
3.删除文本(双标签)：<del></del>
插入文本(双标签)：<ins></ins>