Web前端笔记

西红柿番茄tomato

已于 2022-11-16 17:35:46 修改

阅读量244

点赞数

文章标签： html css 前端

于 2022-11-09 22:14:43 首次发布

本文链接：https://blog.csdn.net/good_good_good_/article/details/127653986

版权

Web前端

1.介绍

1.拨云见日

HTML
CSS

1.什么是HTML,CSS?

是做网站的编程语言。

浏览器把代码解析后的样子就是我们看到的网站。

如何看到网站的原始代码呢？通过鼠标右键查看网页源代码。

2.如何写代码？写到哪里呢？

一个网站是由多个网页组成的。每一个网页 .html文件
切图流程（传统流程，智能流程…）
PC企业站布局
PC游戏站布局

2.溯本求源

扩展HTML
扩展CSS
HTML5新语法
CSS3新语法
兼容与hack（不同浏览器）

3.风生水起

弹性布局
网格布局
移动端布局
响应式布局（一套代码适应不同的设备）
Bootstrap

4.巧夺天工

预编译CSS
postcss（怎样工程化操作）
CSS架构（如何划分文件，文件需求点，每一个文件怎样配合以及使用）
高级功能
CSS与JS交互

2.编辑器 VS Code

1.安装插件：

语言包
open in browser
view in browser
*[open in browse、view in browser]：用于运行所写的网页。

2.编辑器的基本使用

设置：文件→首选项→设置（大小、是否换行 word wrap）
创建文件、文件夹、重命名、删除、搜索

快捷键

ctrl+s：保存
ctrl+a：全选
ctrl+x：剪切
ctrl+v：粘贴
ctrl+z、ctrl+y：撤销，前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行

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

alt+鼠标左键：多光标
ctrl+d：选择下一个相同元素

3.Chrome浏览器

用途：把编好的html代码解渲染成一个网页

4.网站开发

UI设计师：设计稿

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

设计稿→代码
数据库的数据→显示到页面
写HTML+CSS
HTML：结构
CSS：样式（美化）

web后端开发工程师

5.web三大核心技术

HTML

CSS

Javascript

一、HTML

1.HTML基本结构和属性

HTML：超文本标记语言

超文本：文本内容+非文本内容（图片、视频、音频）

标记：<单词>

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

两种写法：
单标签 < header>
双标签 < header>< /header >
创建标签的快捷键：单词+tab键→<单词>

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

HTML常见标签：

标签的属性：修饰标签，设置当前标签的一些功能。
属性语法格式:<标签属性=“值” 属性2=“值2”>

语言：编程语言

2.HTML初始代码（会手写）

每个.html文件都有的代码叫做初始代码（要符合html文件的规范写法）。
快捷键：！+tab键：快速创建html的初始代码

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

3.HTML注释

写法：<!- -注释的内容–>：在浏览器中看不到，只可在代码中看到注释内容

意义：

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

快捷添加注释与删除注释：

1.ctrl+/
2.shift+alt+a

4.标题与段落

1.标题→双标签：< h1>< /h1>…< h6>< /h6>(标题等级1~6)
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1的标签。（其他的可以重复）
h5,h6标签在网页中不经常使用。
2.段落→双标签：< p>< /p>

5.文本修饰标签

强调→双标签：< strong>< /strong>、< em>< /em>
- 区别：1.写法和展示效果有区别：前者加粗，后者斜体
  2.strong强调性更强，em强调性稍弱

下标：< sub>< /sub>
上标：< sup>< /sup>
删除文本：< del>< /del>
插入文本：< ins>< /ins>
* 注：一般情况下，删除文本都是和插入文本配合使用的。

6.图片标签

img→单标签

src：引入图片的地址。
alt：当图片出现问题时，可以显示一段友好的提示文字。
title：提示信息
width.height：图片的大小

7.引入文件的地址路径

1.相对路径：

. 在路径中表示当前路径
. .在路径中表示上一级路径

2.绝对路径

注：尽量使用"/"斜线

8.跳转链接

< a>标签→双标签：< a>< /a>
- 属性：1.href属性：链接的地址
  2.target属性：可以改变链接打开的方式，默认情况下，在当前页面打开 _self；
  新窗口打开 _blank。
< base>标签→单标签：改变链接的默认行为。
链接练习：
1.分别建立一个首页，列表页，详情页，相互跳转，每个页面至少一张图片，图片在images文件夹内，列表和详情页在html文件夹内，首页在根目录下。

2.首页（index.html）

3.列表页（list.html）

4.详情页(detail.html)

9.跳转锚点

方式一：#号 id属性
方式二：#号 name属性
区别：id可以直接插在h2里面，name则是在h2上头再开一个a标签，在a标签里实现。

10.特殊符号

1.&+字符
2.作用：解决冲突左右尖括号，添加多个空格的实现
3.

特殊符号	含义	特殊符号代码
	空格符	& nbsp;
©	版权	& copy;
®	注册商标	& reg;
<	小于号	& lt;
>	大于号	& gt;
&	和号	& amp:
¥	人民币	& yen;
°	摄氏度	& deg;

11.列表标签

1.无序列表

< ul>< li>：列表的最外层容器，列表项

注：ul和li必须是组合出现的，他们之间不能有其他标签。

例：
注：图中链接地址用“#”占位代替。

2.有序列表（用的少）

< ol>< li>：列表的最外层容器，列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可代替有序列表。

3.定义列表

< dl>:定义列表
< dt>：定义专属术语和名词（就是标题）
< dd>：对名词进行解释和描述（就是解释一下标题）

4.嵌套列表

列表之间可以相互嵌套，形成多层级列表。
1.例（< ul>< li>）：
2.例（< dl>< dt>< dd>）

12.表格

1.表格标签
< table>< tr>< th>< td>< caption>
注：它们之间有嵌套关系，要符合嵌套规范。
例：
语义化标签：tHead,tBody,tFood
注：在一个table中，tBody是可以出现多次的，tHead和tFood只能出现一次。
例子：
2.表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式

13.表单

form：表单的最外层容器

1. input(单标签)：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件。如：输入框、密码框、复选框…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="这里填写提交的地址">
        <h2>输入框：</h2>
        <input type="text"placeholder="请输入用户名"><!--placeholder用于表示输入框中的提示语-->

        <h2>密码框：</h2>
        <input type="password"placeholder="请输入密码">

        <h2>单选框：</h2>
        <input type="radio"name="#">男
        <input type="radio"name="#">女  <!-- 加上name表示这两个是一组单选 -->

        <h2>复选框：</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄

        <h2>复选框：</h2>
        <input type="checkbox"checked>苹果  <!-- checked用于表示默认选中某选项 -->
        <input type="checkbox">香蕉
        <input type="checkbox"disabled>葡萄 <!-- disabled用于表示禁止点击的选项 -->

        <h2>上传文件</h2>
        <input type="file">

        <h2>提交和重置</h2>
        <input type="submit">
        <input type="reset">
    </form>  <--form为表单的最外层容器-->
</body>
</html>

表单input标签总结：

tyoe属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

1. 表单相关标签

< textarea>：多行文本框

里面的cols指列数，row指行数。

< select>< option>：下拉菜单

seleted（加在option之后）：用于表示当前下拉菜单初始的一项。
size=“数字”（加在select之后）：用于表示下拉菜单选项的个数
multiple（加在select之后）：用于方便多选

多选：按住ctrl+鼠标左键
ps：多选文件，多选选项都可。

< label>

   <h2>单选框：</h2>
    <input type="radio"name="#"id="man"><label for="man">男</label>
    <input type="radio"name="#"id="woman"><label for="woman">女</label>

注：id与label for对应。

14.表格表单组合使用

表格：

总	用户	注册
体	用户名：	请输入用户名
信	密码：	请输入密码
息	提交按钮	重置按钮

 <title>Document</title>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tbody align="center">
            <tr>
                <td rowspan="4">总体信息</td>
                <td colspan="2">用户注册</td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                </td>
            </tr>
        </tbody>
        </table>
    </form>
</body>
</html>