Web前端从入门到精通（第一周）

最新推荐文章于 2022-10-28 12:43:34 发布
最新推荐文章于 2022-10-28 12:43:34 发布
阅读量728 收藏 1
点赞数
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x040123/article/details/127405894
版权

Web前端从入门到精通（第一周）

一、HTML+CSS系列教程之导学

1.拨云见日

  • 基础：HTML、CSS
  • 切图流程:传统切图、智能切图、公司流行切图
  • 实战阶段:PC企业站布局、PC游戏站布局

2.溯本求源

  • 基础扩展:扩展HTML、扩展CSS
  • HTML5新语法、CSS3新语法
  • 不同浏览器之间的兼容问题和解决方案（兼容与hack）

3.风生水起

  • 流行布局:弹性布局（Flex)、网格布局（Grid）、移动端布局（流式布局、rem布局）、响应式布局（用一套代码适应多种不同的设备）
  • 响应式布局的框架：Bootstrap（可快速搭建一个网页）

4.巧夺天工

  • 工程方面：预编译CSS、postcss
  • CSS架构（划分文件）
  • 高级功能
  • CSS与JS交互

二、什么是HTML和CSS

1.拨云见日

了解什么是HTML、CSS?

它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。

浏览器把代码解析后的样子就是我们看到的网站。如何看到网站的原始代码呢？通过鼠标右键选择查看网页源代码。

如何去写代码？写到哪里？
一个网站是由N个网页组成的。每个网页 .html文件

  • 练习：查一查什么是HTML、什么是CSS。
    HTML:HTML
    CSS:CSS

三、宇宙第一编辑器 VS Code

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

学习编辑器基本使用？

设置：文件 ->首选项->设置（大小、是否换行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：选择相同元素的下一个

四、Chrome浏览器

Chrome下载地址：https://www.google.cn/intl/zh-CN/chrome/

百度统计浏览器市场份额：https://tongji.baidu.com/data/browser

五、深入了解网站开发

开发网站的职位：

  • UI设计师：设计稿
  • web前端开发设计师（H5开发）
    设计稿->代码
    数据库里的数据->显示到页面
    HTML+CSS
    HTML：结构
    CSS：样式
  • web后端开发设计师

六、Web前端的三大核心技术

HTML
CSS
JavaScript（与用户交互）

七、HTML基本结构与属性

1.超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言。

  • HTML：超文本 标记 语言
    超文本：文本内容+非文本内容（图片、视频、音频等）
    标记：<单词>
    语言：编程语言

  • 标记也叫做标签：
    < header >
    < footer >
    写法分成两种：
    单标签< header >
    双标签< header >< /header >
    （header、footer都是双标签）
    创建标签的快捷键：tab+单词-><单词>

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

  • HTML：在这里插入图片描述

  • 标签的属性：来修饰标签的，设置当前标签的一些功能。
    <标签 属性=“值” 属性2=“值2”>

八、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"国际编码，让网页不出现乱码的情况
    < title>Document< /title > 设置网页的标题
    < /head>
    < body>
    显示网页内容的区域
    < /body>
    < /html>

九、HTML中的注释

注释的代码，只有在文件中看得到，但是浏览器显示不出来

  • 写法：< !–注释的内容-- >
  • 意义：1.把暂时不用的代码注释起来，方便以后使用。
    2.对开发人员进行提示。
  • 快捷添加注释与删除注释：
    1.ctrl+/
    2.shift+alt+a

十、HTML语义化

HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。
好处：

  • 在没有CSS的情况下，页面也能呈现出很好的内容结构。
  • 有利于SEO,让搜索引擎爬虫更好的理解网页。
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
  • 便于团队开发和维护。
    网页标题：https://h5o.github.io/

十一、标题与段落

标题->双标签：< h1 >< /h1 > …< h6 >< /h6 >
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
段落->双标签：< p >< /p >
标题与段落

十二、文本修饰标签

  • < strong >：表示强调，会对文本进行加粗（双标签）
    在这里插入图片描述
  • < em >：表示强调，会对文本进行斜体（双标签）
    在这里插入图片描述
    区别：
    1 .写法和展示效果是有区别的，一个加粗、一个斜体
    2 .strong的强调性更强，em的强调性稍弱。
  • < sub >、< sup >：下标文本、上标文本（双标签）
    在这里插入图片描述
  • < del >、< ins >：删除文本、插入文本
    在这里插入图片描述
    注：一般情况下，删除文本都是和插入文本配合使用的。

十三、图片标签与图片属性

< img >：图片（单标签）
src：引入图片的地址。
alt：当图片出现问题的时候，可以显示一段友好的提示文字。
title：提示信息
width、height：图片的大小

十四、引入文件的地址路径

相对路径

  • . 在路径中表示当前路径
  • . . 在路径中表示上一级路径
    在这里插入图片描述
    绝对路径
    可以在前面写上所在的位置（如C盘写C：/）或者直接写 /
    尽量避免写反斜线

十五、跳转链接

从一个页跳转到另外一个页
< a >标签（双标签）
两个重要属性：

  • heaf属性：链接的地址
  • target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _ self ,新窗口打开_ blank
    < base >标签（单标签）：作用就是改变链接的默认行为的。

十六、跳转锚点

在当前页内进行跳转
两种实现方式：

  • 实现一：#号+id属性
  • 实现二：#号+name属性 （注意name属性加给的是a标签）

十七、特殊符号

  • 概念：编写一些文本时，经常会遇到输入法无法输入的字符，如注册商标、版权符等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
    常见特殊符号表
    在这里插入图片描述
  • &+字符
  • 作用：解决冲突。左右尖括号、添加多个空格的实现
  • &lt；&gt；&nbsp；

十八、无序列表

注：HTML中列表分为三大类：无序列表、有序列表、定义列表

  • 无序列表采用的标签是< ul >、< li >的组合
    < ul >、< li >：列表的最外层容器、列表项（符合嵌套的规范）
    注：ul和li必须是组合出现的，他们之间是不能有其他标签的。

  • type属性：改变前面标记的样式（一般都是用CSS去控制）
    https://www.w3school.com.cn/tags/att_ul_type.asp

十九、有序列表

  • 有序列表采用< ol >、< li > 的组合
    < ol >、< li >：列表的最外层容器、列表项
    注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
  • type属性：改变前面标记的样式（一般都是用CSS去控制）
    https://www.w3school.com.cn/tags/att_ol_type.asp

二十、定义列表

定义列表主要是来描述列表项的，它是由一个标题和一个解释内容组成的一个列表。

  • 定义列表涉及到三个标签：
    < dl >：定义列表
    < dt >：定义专业术语或名词
    < dd >：对名词进行解释和描述
    在这里插入图片描述
    在这里插入图片描述
    https://www.csdn.net/
x040123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
我的HTML基础总结-2
m0_49935332的博客
11-04 498
1.HTML 段落与文字 1.HTML中的段落标记 <p>段落的内容</p> 特点:1.自成一行，会占满整行，在它的后面出现的内容将会在下一行显示。          2.段落与段落之间会有空行。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>p 标记&
Web前端从开始到入门（1）
SHniangJiu的博客
10-19 901
Web前端从开始到入门
HTML入门基础2
最新发布
m0_71154850的博客
10-28 2814
table>、和是HTML表格最基本的3个标签，其他标题标签、表头单元格可以没有，但是这3者必须要有。语法：、表头（thead）、表身（tbody）和表脚（tfoot）4部分。没有顺序，每个li标签、li标签独占一行（块 元素）语法：语法：有顺序，每个li标签独占一行（块元素）
html中table如何占位,HTML中table标签如何跨行跨列详解
weixin_42097819的博客
05-30 1549
原标题：HTML中table标签如何跨行跨列详解标签table：以前非常流行于网页的布局，现在主要用于后台页面的制作，还有做一些记录数据的表格，所以在很多数据表格中有些栏目要求合并显示，这时就要用到table的跨行跨列方法才能达到那种需求。首先，我们来看一下表格的结构，效果如下图所示 知道表格的一些结构后，我相信大家对表格的代码编写一定很熟悉，下面就先从简单的跨行跨列讲解：跨2列的例子： 效果如下...
html之表格标签
chaowang111的博客
10-20 559
表格标签中的table标签：代表整个表格，也就是一对table标签就是一个表格。tr标签：代表整个表格中的一行数据，一对tr标签就是表格中的一行。td标签：代表表格中一行中的一个单元格，也就是说一对td标签就是一行中的一个单元格。
精品课件 Python从入门到精通 第20章 Web编程（共14页）.pptx
10-17
Python从入门到精通系列课程中，你将逐步学习这些概念，并通过实践项目深化理解，如使用Flask框架创建Web应用，或者实现一个简单的e起去旅行网站。通过这个过程，你不仅能够掌握Python的Web编程基础，还能了解到如何...
Web-前端html+css从入门到精通 140. 斜切的导航.zip
05-23
在Web前端开发中，HTML（超文本标记语言）和CSS（层叠样式表）是构建网页界面的基础。本课程“Web-前端html+css从入门到精通 140. 斜切的导航”着重讲解如何利用CSS实现具有斜切效果的导航栏，这种效果可以为网页...
Java Web从入门到精通光盘18-21
11-29
【Java Web从入门到精通光盘18-21】是一个涵盖了Java Web开发基础到进阶的教程资源，旨在帮助初学者系统学习并掌握这一领域。在这个光盘中，你可能会遇到一系列关于Web应用程序开发的知识点，包括但不限于以下内容：...
Web-前端html+css从入门到精通 152. 背景尺寸位置裁切等.zip
05-23
本课程聚焦于“Web前端html+css从入门到精通”，具体关注的是第152课的内容——背景尺寸、位置及裁切等高级技巧。这些知识点对于任何希望在前端领域深化理解的开发者来说都是至关重要的。 HTML（HyperText Markup ...
PHP从入门到精通3 随书光盘
04-17
《PHP从入门到精通3》是一本旨在帮助初学者快速掌握PHP编程技能的教程，随书光盘提供了丰富的学习资源，使读者能够结合理论与实践，深入理解PHP语言的核心概念和实际应用。以下是对该书及光盘内容的详细解析： 1. *...
HTML表格合并行和列
大河之犬的博客
09-29 2万+
在设计表格时，有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似Word的表格合并），这个时候就需要用到“合并行”或“合并列”
html如何让＜li＞在同一行
热门推荐
haoihfoiahf的博客
09-28 2万+
html与css创建网页中，我们有时候想让li元素在同一行显示，像这样： 但是由于li是块元素,所以默认情况当我们使用li，它会自动换行，像这样： 为了让元素到同一行，我们需要创建css文件，并且使用float使元素变为同一行： 在css的中添加：float:left,添加之后会变成这样： 因为没有调整padding，所以选项的文字连续在一起，并且导致项目符号重叠在文字上，这时候可以根据个人需要，调整css中的的padding（内边距），就可以调整字体间距的大小例如添加： 之后，网页就变成了： 之
什么是HTML和CSS？
极限突破者的博客
07-05 8033
🏆本文讲解了HTML与CSS的概念与关系，并以某宝网站为例，记录学习笔记
HTML文本格式化
FZUMRWANG的博客
01-30 645
HTML 可定义很多可供格式化输出的元素，比如粗体和斜体字 HTML文本格式化实例 如何在一个HTML文件中对文本进行格式化 &lt;html&gt; &lt;body&gt; &lt;b&gt;This text is bold&lt;/b&gt; &lt;br /&gt; &lt;strong&gt;This text is strong&lt;/strong&gt; &lt;br /
html片段转换成dom对象,如何将html表列转换为表行，dom对象，php
weixin_31896061的博客
06-05 216
我有一个html表，我想将其列转换为行。列可以包含计划文本，表单元素(输入，选择，复选框)或html标记(span，div)。考虑下面的html：如何将html表列转换为表行，dom对象，phpCell 1Cell 2Cell 3Cell 4Cell 5Cell 6DOM操作之后，我需要以下条件：Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6$rows = $xpath-...
html自定义列表一行排列,WEB前端设计完美的自定义列表dl，dt，dd
weixin_32522079的博客
06-24 1990
经常会在网页上看见类似这样的页面效果：下面就应用无懈可击的WEB设计方案来实现它：(HTML代码添加在BODY之中，CSS代码添加在之间，一定要编辑在之间)HTML代码：class="box-left">href="images/moon1.jpg"target="_blank">src="images/suo-moon1.jpg" width="200" height="200"/&...
html如何一行显示,html – 同一行的中心和显示
weixin_31289735的博客
07-08 1313
我正在尝试显示两个< div>元素在同一条线上,但在中心.为了使它们居中,我不得不设置保证金：auto;但是,为了让两个人在同一条线上,我必须做以下任何一种情况：>设置显示：内联; (取消对中)>设置浮动：左;两者(取消对中)>设置显示：table-cell; (取消对中)我能做些什么来让两个div都在中心？或者我应该使用其他东西来做到这一点？我试过< span...
html怎么把按钮排在一行,html – 如何对齐一行列中的按钮
weixin_29767773的博客
06-19 1856
试试这个：HTMLTitleParagraphs of various lenthParagraphs of various lengthParagraphs of various lengthCTATitleParagraphs of various lenthParagraphs of various lengthParagraphs of various lengthCTATitlePara...
Ajax入门到精通：构建交互式Web应用的桥梁
对于初学者和有一定Ajax基础的学习者来说，"Ajax从入门到精通--第一章"是一份非常有价值的资源。作者作为Ajax专家，首先会介绍Ajax的基本概念，包括XMLHttpRequest对象，这是Ajax的核心组件，负责在后台与服务器通信...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值