Web前端第一周

Ruuuuvh

已于 2022-11-25 23:47:48 修改

阅读量1.1k

点赞数

文章标签：前端

于 2022-10-20 16:03:59 首次发布

本文链接：https://blog.csdn.net/Ruuuuvh/article/details/127378909

版权

板块布局

一、 HTML+CSS系列教程①之拨云见日

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

二、 HTML+CSS系列教程②之溯本求源

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

三、 HTML+CSS系列教程③之风生水起

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

四、 HTML+CSS系列教程④之巧夺天工

预编译CSS
postcss
CSS构架
高级功能
CSS与JS交互

一、HTML

1.什么是HTML、CSS？

是做网站的编程语言。

浏览器把代码解析后就是我们所看到的网站。
网站原始代码→鼠标右键查看网页源代码

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

.html文件

3.VS Code编辑器

VS code下载地址：vscode

4.编辑器的基本使用

设置：文件-首选项-设置（大小、是否换行word wrap）

Ctrl+S:保存
Ctrl+A:全选
Ctrl+X/C/V:剪切、复制、粘贴
Ctrl+Z/Y：撤销、前进
Shift+Alt：从头选中一行
Shift+home：从尾部选中一行
Shift+Alt+↓：快速复制一行
Alt+↑/↓：快速移动一行
Tab：向后缩进
Tab+Shift:向前缩进
多光标：Alt+鼠标左键
Ctrl+D：选择相同元素的下一个

5.Web前端三大核心技术

HTML：技术
CSS：样式
JavaScript：行为

6. HTML的基本结构和属性

HTML：超文本标记语言

超文本：文本内容+非文本内容（图片、视频、音频等）
标记（标签）：<单词>

写法：①单标签 <header> ②双标签<header></header>
创建标签的快捷键：Tab+单词→<单词>
可上下排列，也可组合嵌套。
属性：修饰标签，设置当前标签的一些的功能

<标签属性=“值” 属性2=“值2”>

语言：编程语言

HTML常见标签：

7.HTML初始代码

每个.html文件都有的代码，要符合html文件的规范写法

！+Tab：快速的创建html的初始代码

初始代码：

<!DOCTYPE html>       文档声明：告诉浏览器这是一个html文件
<html lang="en">      html文件的最外层标签：包裹着所有html标签代码
                      lang="en"英文网站
                      lang="zh-CN"中文网站

<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>
    
</body>
</html>

8.HTML注释

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

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

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

Ctrl+/
Shift+Alt+A

9.HTML语义化

html语义化好处

10.标题与段落

标题→双标签：<h1></h1> … <h6></h6>
一个网页中h1标题最重要且只有一个，.html文件中只能出现一次h1标签

段落→双标签：<p></p>

11.文本修饰标签

强调→双标签：<strong></strong>、<em></em>

区别：①写法和展示效果一个加粗、一个斜体
②strong的强调性更强，em强调性稍弱

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

12.图品标签和图片属性

img→单标签

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

13.引入文件的地址路径

（1）相对路径：
.在路径中表示当前路径
. .在路径中表示上一级路径
（2）绝对路径：目录下的绝对位置

14.链接标签

a→双标签<a></a>

href属性：链接的地址
target属性：可以改变链接打开的方式

①默认情况下：在当前页面打开_self
②新窗口打开：_blank

②例如

<!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>
    <!-- <a href="http://www.baidu.com">访问百度</a>
    <a href="https://www.bilibili.com">
        <img src="./img/QQ图片20221008152340.jpg" alt="">
    </a> -->
    <a href="http://www.baidu.com"target="_blank">访问百度</a>
</body>
</html>

base→单标签：改变链接的默认行为（作用）
例：

<!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>
    <base target="_blank">
</head>
<body>
    <!-- <a href="http://www.baidu.com">访问百度</a>
    <a href="https://www.bilibili.com">
        <img src="./img/QQ图片20221008152340.jpg" alt="">
    </a> -->
    <!-- <a href="http://www.baidu.com"target="_blank">访问百度</a> -->
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.baidu.com">访问百度</a>
</body>
</html>

15.跳转瞄点

（1）#号+id属性
（2）#号+name属性（注：name属性加给的是a标签）

16.特殊符号

特殊符号表格

&+字符 解决冲突

17.列表标签

无序列表→ul li 符合嵌套的规范

正确写法：

<ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>

注：ul和li必须组合出现，且之间不能有任何标签
~~错误写法：~~

<ul>
        <p>
            <li>第一项</li>
        </p>
    </ul>

type属性：改变前面标记的样式（一般用CSS去控制）
ul
有序列表→ol li 一般用得比较少，可以用无序列表来实现

<ol type="1">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

定义列表→dl dt dd 列表项需要添加标题和对标题进行描述的内容

<dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>网页脚本语言</dd>
    </dl>

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

18.表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
语义化标签：<tHead>、<tBody>、<tFood>
注：在一个table中，tBody可以出现多次，tHead、tFood只能出现一次
<border>:表格边框
<cellpadding>:单元格内的空间
<cellspacing>:单元格之间的空间
<rowspan>:合并行
<colspan>:合并列
<align>:左右对齐方式
<valign>:上下对齐方式

<!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>
    <table border="1" cellpadding="15">
        <caption>天气预报</caption>
        <tr>
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        <tr>
            <td rowspan="2">2022年10月26日</td>
            <td>白天</td>
            <td><img src="./img/QQ图片20221026142322.png" alt=""></td>
            <td>有小雨，不宜出游</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./img/QQ图片20221026142322.png" alt=""></td>
            <td>有小雨，不宜出游</td>
        </tr>
        <tr>
            <td rowspan="2">2022年10月25日</td>
            <td>白天</td>
            <td><img src="./img/QQ图片20221026142448.png" alt=""></td>
            <td>天气晴朗，适宜出游</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./img/QQ图片20221026142448.png" alt=""></td>
            <td>天气晴朗，适宜出游</td>
        </tr>
    </table>
</body>
</html>

天气预报

19.表单标签

<form>:表单的最外层容器
<input>（单标签）:用于收集用户信息，根据不同的type属性值，展示不同的控件

<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>
        <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>
</body>
</html>