Web前端从入门到入土

板板子

已于 2022-11-19 18:37:36 修改

阅读量1.3k

点赞数

文章标签：前端 css html

于 2022-10-20 19:32:23 首次发布

本文链接：https://blog.csdn.net/weixin_73958978/article/details/127433488

版权

拨云见雾

文章目录

拨云见雾

一、什么是HTML,CSS？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS
它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的初始语言。一个网站是由多个网页组成的每一个网页都是一个.html文件。

二、宇宙第一编辑器VS Code

2.1下载

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

2.2VS Code快捷键

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

三、Chrome浏览器

下载地址goole chrome
百度统计所占份额百度
市场常见五大浏览器：IE浏览器（Internet explorer）、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、苹果浏览器（Safari）、欧朋浏览器（Opera）

四、深入了解网站开发

UI设计师：设计稿
Web前端开发工程师（H5开发）：

      设计稿->代码  
     数据库里的数据->显示到页面

Web后端开发设计师：负责后台储存数据

五、Web三大核心技术

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

六、HTML基础结构与属性

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

6.1 结构

超文本：文本内容+非文本内容（图片、视频、音频等）
语言：编程语言
标记：格式：<单词> 标记又叫标签
分类：单标签 <header>
双标签<header></header>
创建标签的快捷键：单词+ tab键-> <单词>
标签可以上下排列，也可以组合嵌套。

6.2标签的属性

来修饰标签的，设置当前标签的一些功能。
<标签属性=‘‘值’’&emsp属性2=“值2”>
HTML常见标签：

七、HTML初始代码

每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。

7.1如何快速创建html初始代码？

! + tab键

7.2初始代码

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

八、HTML中的注释

8.1 写法

<!--注释的内容-->   在浏览器中看不到注释的内容，只能在代码中看到注释的内容。

8.2快捷键

快速删除注释：shift + alt + a
快速添加注释：ctrl + /

8.3意义

1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。

九、 HTML语义化

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

9.1好处

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

十、标题及段落

h标签，p标签
标题双标签 <h1></h1>-------<h6></h6>从上至下逐级递减在一个网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签，h5,h6标签在网页中不经常使用
段落双标签 <p></P>

十一、文本修饰标签

11.1 标签

强调 ->双标签：<strong></strong> <em></em>
区别：1.写法和展示效果是有区别的，strong是对文本加粗，em是对文本斜体
2.strong的强调性更强，em强调性更弱
下标：<sub></sub>
上标：<sup></sup>
删除文本：<del></del>
插入文本：<ins></ins>
注：一般情况下，删除文本都是和插入文本配合使用。

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

img -> 单标签<img>
src :引入图片的地址。
alt :当图片出现问题的时候，可以显示一段友好的提示文字。
title :提示信息
width 、height :显示图片的大小（可要可不要，加上使空间固定，使段落之间位置不会变化，更美观）

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

1.相对路径：. 路径中表示当前路径
. .在路径中表示上一级路径
例：<img scr="../"被设置链接的图片的地址"alt="">
注：初学者推荐使用相对路径更容易移植代码，找到相关文件
2.绝对路径：能够找到文件所在的位置
例：<img scr="E:/"被设置链接的图片的地址"alt="">
注：网络地址只能写斜线/不能写反斜线\。

十四、链接跳转

<a>标签：双标签 <a></a>
herf属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开：_black
<base>标签：单标签作用：改变链接的默认行为写在<head>当中

十五、跳转锚点

在页内进行跳转
实现一： #号
id属性
实现二： #号
name属性
注：name属性加给的是a标签

十六、特殊符号

编写一些文本时经常会遇到无法输入的字符，如®(注册商标）、©(版权符) 等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

格式：& + 字符
作用：解决冲突（左右尖括号添加多个空格的实现）

特殊字符

十七、列表标签

17.1无序列表

<ul>、<li> ：列表的最外层容器、列表项
注：ul和li必须是组合出现的，要符合嵌套规范，它们中间不允许添加其他标签
type属性：改变前面标记的样式（一般都是用CSS去控制）

17.2有序列表

<ol>、<li>：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表
type属性：改变前面标记样式（一般都是用CSS去控制）

17.3定义列表

<dl> : 定义列表
<dt> :专业术语或名词
<dd>:对名词进行解释，描述

十八、嵌套列表

列表之间可以相互嵌套，形成多层级的列表

 <ul>
    <li>
        辽宁省
        <ul>
            <li>沈阳</li>
            <li>大连</li>
            <li>丹东</li>
        </ul>
    </li>
    <li>
        河南省
        <ul>
            <li>郑州</li>
            <li>开封</li>
            <li>洛阳</li>
        </ul>

</li>
</ul>

十九、表格标签

:表格的最外层容器
:定义表格行
:定义表头
:定义表格单元
:定义表格标题
语义化标签：tHead、tBody、tFood
注：在一个table中，tBody是可以出现多次的，但tHead、tFoot只能出现一次

<table>
           <caption>天气预报</caption>
     <thead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
        

        <tr>
            <td>2022年10月22日</td>
            
            <td>天气晴朗，适合出行</td>
        </tr>
        <tr>
            <td>2022年10月23日</td>
            <td>阴，不适合出行</td>
        </tr>
    </table>

二十、表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式（left center right）
valign:上下对齐方式（top middle bottom)

二十一、表单标签

1.表单input标签

<form>:表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如：输入框、密码框、复选框等（单标签）

在这里插入图片描述

2.表单相关标签

<textarea>:多行文本框
<select><option>:下拉菜单
<label>:辅助表单

<form action="http://www.baidu.com"><!-- 提交数据到百度上去 -->
        <h2>输入框:</h2>
        <input type="text">
        <h2>密码框:</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>

二十二、表格表单组合实例

表格表单之间可以相互组合形成数据展示效果
注意要符合嵌套规则

<form action=""> 
   <table border="1" cellpadding="30">
      <tbody>
        <tr align="center">
            <td rowspan="4">总体信息</td>
            <td colspan="2">用户注册</td>
        </tr>
        <tr align="right">
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>

        </tr>
        <tr align="right">
            <td>密码：</td>
            <td><input type="password" placeholder="请输入密码"</td>
        </tr> 
        <tr align="center">
            <td colspan="2">
                <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset">

            </td>
        </tr>
      </tbody>
   </table>
</form>

在这里插入图片描述

二十三、div和span

div(块）：
span (内联) ：用来修饰文字的，

 <div>
    <h2><a href="#">扬州 千锋教育官网<span style="color: greenyellow">html</span>-学员们信赖的IT培训机构入口</a></h2>
    <a href="#"><img src="https://ms.bdimg.com/pacific/0/pic/-2043055832_-580489177.jpg?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00" alt=""></a>
    <p><千锋教育官网 产研学相结合的14大IT课程助推新基建技术驱动新动能千锋教育官网 千锋教育整合互联网核心技术,坚持全程面授的教学模式></p>
    <a href="#">http://www.mobiletrain.org/page/it/?nanjing=mopinpaibdtg=pinpaipc=1808163666&jzl_kwd=140505814404&jzl_ctv=51717774389&jzl_mtt=1&jzl_adt=cl1&jzl_ch=11&jzl_act=2770118&jzl_cpg=113048638&jzl_adp=254823117&jzl_sty=50&jzl_dv=1</a>
  </div>

二十四、CSS基本语法

格式：选择器{属性1:值1；属性2: 值2}
单位：px -> 像素（pixel)、 % -> 百分比
基本样式：weidth（宽）、background-color(背景色）、height(高）、
CSS注释：/*CSS注释的内容*/

<style>
        div{
     width: 25%;height: 100px;background-color: aquamarine;}
        span{
      background-color: blue;}
     </style>
      <div>这是一个块</div>
      <div>又是一个块</div>
      <span>这是一个内联</span>

在这里插入图片描述

二十五、内联样式和内部样式

内联（行内行间）样式：在HTML标签上加上style属性来实现的
内部样式：在<style>标签内添加的样式
注：内部样式的优点，可以复用代码。
区别：内部代码可以复用，符合w3c的规范标准，尽量让结构和样式分开处理。

<style>
        div{
      width: 100px;height: 100px;background-color: red;}
      </style>
      <div style="width: 100px;height: 100px;background-color: brown ;">这是一个块</div>
      <div style="width: 100px;height: 100px;background-color:cornflowerblue "></div>
      <div>这是一个块</div>
      <div>另外一个块</div>

二十六、外部样式及两种写法

外部样式：引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址，通过@imput方式引入外部样式（这种方式有很多内容不建议使用）

<!--<link rel="styleness" href="./common.css">-->
      <title>Document</title>
      <style>
        @import url('./common.css');
      </style>
      <body>
        <div>这是一个块</div>
      </body>

二十七、 CSS中颜色表示法

1.单词表示法：red、blue、green、yellow
2.十六进制表示法：#000000(表示最小值，黑色)、#ffffff(表示最大值，表示白色)
3.rgb三原色表示法：取值范围0～255
rgb(255,255,255);
4.获取颜色的工具：获取颜色的下载地址添加链接描述
photoshop工具

二十八、CSS背景样式

28.1样式

background-color 背景色
background-image 背景图
url背景地址）
默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat(x,y都进行平铺，默认值）
no-repeat 都不平铺
background-position :背景位置
x y :number(px、%）| 单词
x : left、center、right
y :top、center、bottom
background- attachment ：背景图随滚动条移动的方式
1）scroll ：默认值（背景位置是按照当前元素进行偏移的）
2）fixed （背景位置是按照浏览器进行偏移的）

二十九、背景实现视觉差效果

<style>
        body{
     height:2000px}
        div{
     width:300px ;height: 300px;background-color:red ;background-image: url(.img/tree.jfif);background-repeat: repeat-x;background-position: 100px 50px;}
</style>
<body>
    <div></div>
</body>

三十、CSS 边框样式

30.1边框样式

border-style :边框样式
solid:实线，dashed:虚线，dotted:点线
border-width :边框大小 px …
border-color : 边框颜色 red #f00 …
边框也可以针对某一边框进行单独设置：border-left-style 中间是方向 left ,right,top,bottom

<style>
      /* div{ height: 300px;width: 300px;border-style: solid;background-color: aqua;border-width: 1px;} */
      /* div{ height: 300px;width: 300px;border-style: dashed;background-color: aqua;border-width: 30px;}*/
      div{
      width: 300px;height: 300px;border-style: dotted;border-right-width: 10px;
       border-right-color: green;border-top-style: solid;border-top-width: 10px;border-top-color: red;}
   </style> 

<body>
    <div></div>
</body>

在这里插入图片描述

30.2边框实现三角形

 <style>
        div{
      width: 0px;height: 0px ;
        border-top-color: white;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: white;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: white;
        border-left-style: solid;
        border-left-width: 30px;}
    </style>
    <body>
        <div></div>
    </body>

在这里插入图片描述

颜色：透明色 transparent

<style>
        body{
      background-color: green;}
        div{
      width: 0px;height: 0px ;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: transparent;
        border-left-style: solid;
        border-left-width: 30px;}
    </style>
    <body>
        <div></div>
    </body>

三十一、CSS文字样式

31.1字体样式

1.font-family:字体样式
英文字体：Arial、‘Times New Roman’
中文字体：微软雅黑、宋体
2.中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
衬线体与非衬线体
注意点：1.多个字体类型的设置目的（使设置的字体类型能适应更多的设备）
2.引号的添加目的（有的字体中间有空格用引号表示它们是一个整体）

 <style>
    div{
      font-family: Arial;}
    div{
      font-family: Georgia, 'Times New Roman', Times, serif;}
    
</style> 
<body>  
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>

在这里插入图片描述

31.2字体大小

-1. font-size:字体大小
默认大小：16px
写法：number(px) |单词（small、large…不推荐使用）
在这里插入图片描述

2.font-weight:字体粗细
模式：正常（normal）加粗（ bold）
写法：单词（normal，bold）｜ number（100、200······900,100—500都是正常的，600—900都是加粗的）
3.font- style：字体样式
模式：正常（normal）斜体（italic）
写法：单词（normal、italic）
注：oblique也是表示斜体，用的比较少，一般了解即可。
区别：1.italic 带有倾斜属性字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的姿态也可以设置倾斜操作。
4.font-color:字体颜色

三十二、CSS段落样式

32.1样式

1.text-decoration :文本装饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何修饰：none
注：添加多个文本修饰：line-through underline overline
2.text-transform:文本大小写（针对英文段落）
小写：lowercase
大写：upcase
注针对首字母大写：capitalze

<style>
    p{
      width: 300px; text-decoration:  underline overline; }
    p{
      width: 300px;  text-transform: lowercase;}
</style>
<body>
    <p>Visual Studio 2022 for Mac 完全融入了 macOS 体验， 整个 IDE 均使用原生控件，具有全新的深色模式和原生 macOS 辅助功能工具。</p>
    <p>jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjvjbhjsk</p>
</body>

在这里插入图片描述

3.text-ident:文本缩进
首行缩进
em单位：相对单位，lem永远都是字体大小相同
4.text- align：文本对齐方式
对齐方式（left、right、center、justify（两端对齐））
5.line- height：定义行高
什么是行高，一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的，根据当前字体的大小不再不断的变化
取值：1.number(px) ｜ scale（比例值，跟文字大小）
6.letter-spacing:字之间的间距
7.word- spacing：词之间的间距（针对英文段落）
8.对于英文和数学不能自动折行问题：
1.word-break :break-all ;（非常强烈的折行）
2.word-wrap :break-word ;(不是非常强烈的折行会产生一些空白区域）

<style>
   /* p{ width: 300px; text-decoration:  underline overline; }*/
   /* p{ width: 300px;  text-transform: lowercase;}*/
  /* p{  text-align: justify;}*/
   /*p{  text-align: 30px;}*/
  /* p{ line-height: 40px;}*/
  div{
      width: 300px;height: 300px;border: 1px solid red ;word-break: break-all;}

```html
</style>
<body>
    <p>Visual Studio 2022 for Mac 完全融入了 macOS 体验， 整个 IDE 均使用原生控件，具有全新的深色模式和原生 macOS 辅助功能工具。当我听说她被捕时，我感到很惊讶，因为我认为她是那种害怕自己影子的胆小鬼。</p>
    <p>jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjvjbhjsk</p>
</body>
<div>
    Visual Studio 2022 for Mac 完全融入了 macOS 体验， 整个 IDE 均使用原生控件，具有全新的深色模式和原生 macOS 辅助功能工具。当我听说她被捕时，我感到很惊讶，因为我认为她是那种害怕自己影子的胆小鬼。
    jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjv
</div>

32.2文本与段落的综合练习

<style>
    div{
      width: 800px;}
     h1{
      text-align: center;color: #ff6600;}
     h2{
      color: #00a0ff;}
     #p1{
      font-style: italic; font-weight: bold;}
     #p2{
      color: #66ff00 ;line-height: 30px;text-indent: 2em;

最低0.47元/天解锁文章

板板子

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Web前端从入门到入土

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
复制链接

扫一扫