（HTML+css）学习小征程！！！

黄大帅@lz

已于 2023-01-02 11:21:04 修改

阅读量1.4k

点赞数

分类专栏：前端（html+css+js）文章标签： html css 学习

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

本文链接：https://blog.csdn.net/gua_Piter/article/details/127350695

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一：第一章初识！（拨云见日）

1.1 HTML和CSS定义：

@HTML 称为超文本标签语言，是一种标识性的语言，用于创建网页和Web应用程序。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
@CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

个人理解:HTML是网页内容的载体，通过css辅助修饰建造一个或多个体系，共同组成一个完整的网页

1.2VSCode编辑器：（https://code.visualstudio.com/)

常见的快捷键

ctrl+s:保存；
ctrl+x: 剪切；
ctrl+z/y : 撤销/前进；
alt+ ↑/↓： 快速移动一行
shift+end: 从头选中一行；
shift+home：从尾巴选中一行；
是shift+alt+↓：快速复制一行
alt+鼠标左键；多光标（同时操作多个标点)
ctrl+d：选择相同元素下一个
tab+alt+w:快速加入标签
ctrl+enter：快速加入下一行

1.3html,css,js关系：

在这里插入图片描述

简单的说：网站由 **html(结构)，css(样式)和js(行为)**共同组成的，他们相互作用共同构成一个完美的网站！！！

二：第二部分实际操作！！！！

入门开始（html）

<!DOCTYPE html>  说明这是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>
    
</body>
</html>

>title:主要是管理此部分 **>title**:主要是管理此部分

三：具体化操作小技巧（详情）

3.1标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta cahrset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是一个标题</h1>   
    <h2>这是一个标题</h2>   
    <h2>这是一个标题</h2>   
    <h3>这是一个标题</h3>   
    <h4>这是一个标题</h4>   
    <h5>这是一个标题</h5>   
    
</body>
</html>

出来的结果如图：

在这里插入图片描述

在一篇文章里面不能出现两个h1，其他的可以出现多个

3.2 段落

HTML主要是通过 p 来定义。即：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta cahrset="UTF-8">
    <title>Document</title>
</head>
<body>
   <p>这是一段</p>
   <p>这是一段</p>
   <p>这是一段</p>
   <p>这是一段</p>
   <p>这是一段</p>
    
</body>
</html>

3.3链接

一般是通过标签a来表示。即：

a–双标签
href属性:链接的地址
target属性：改变打开的方式，默认为当前窗口打开 -self ；新窗口打开**-blank**
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>

    <img src="./-3d9c5e6c3d9f803b.jpg"alt="这是我女朋友"width="300"height="200"title="这是我女朋友">
    <!-- >img--  单标签 -->
<!-- > src: 引入图片的地址 -->
<!-- > alt: 当图片出现问题的时候，可以显示一段提示文字 -->
<!-- > title：提示信息（鼠标移动到图片上会出现提示信息） -->
<!-- > width，height：图片大小调试 -->

</body>
</html>

注意引入文件的路径：

@1:相对路径
./ 在路径中表示当前路径
…/ 在路径中表示另外一个文件夹中

@2:绝对路径
eg : E/ke/qf_dl20190151/20125125/img/animal/jpg

3.4 图片的引入

img-- 单标签
src: 引入图片的地址
alt: 当图片出现问题的时候，可以显示一段提示文字
title：提示信息（鼠标移动到图片上会出现提示信息）
width，height：图片大小调试

eg：

<!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>

    <img src="./-3d9c5e6c3d9f803b.jpg"alt="这是我女朋友"width="300"height="200"title="这是我女朋友">
</body>
</html>

3.5锚点跳转

法一：

<a href="#1">X</a>
<a href="#2">XX</a>
<a href="#3">XXX</a>
<h2 id="1">X</h2>
<p>段落</p>
<p>段落</p>
<h3 id="2">XX</h3>
<p>段落</p>
<p>段落</p>
<h4 id="3">XXX</h4>
<p>段落</p>
<p>段落</p>

法二：

<a href="#1">X</a>
<a href="#2">XX</a>
<a href="#3">XXX</a>

<a name="1"></a>
<h2>X</h2>
<p>段落</p>
<p>段落</p>
<a name="2"></a>
<h3>XX</h3>
<p>段落</p>
<p>段落</p>
<a name="3"></a>
<h4>XXX</h4>
<p>段落</p>
<p>段落</p>

3.6特殊字符

特殊字符查询

4列表

4.1无序列表

ul与li之间不能有其他的字符，但是li里面可以有其他的字符

<ul>
    <li>项</li>
    <li>项</li>
</ul>

4.2有序列表

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

4.3定义表格

<dl>
<dt> 项目</dt>
  <dd>描述项目</dd>
<dt>项目2</dt>
  <dd>描述项目</dd>
</dl>

4.4表格标签+表格属性

–表格标签

table：表格里的最外层容器
tr：定义表格行
th：定义表头
td：定义表格单元
caption：定义表格标题（一般在最前面）

–表格属性

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOCUMENT</title>
    </head>
    <body>
        <table border="1" cellpadding="30" cellspacing="30">
            <caption><strong>天气预报</strong></caption>
            <tHead>
            <tr align="ringht">
                <th colspan="2">日期</th>
                <th>天气预报</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>白天</td>
                <td rowspan="2">2019年1月1号</td>
                <td><img src="./-3d9c5e6c3d9f803b.jpg"width="50"height="50"></td>
                <td>天气晴,可以出行</td>
            </tr>
            <tr>
                <td>黑夜</td>
                <td><img src="./-3d9c5e6c3d9f803b.jpg"width="50"height="50"></td>
                <td>天气晴,可以出行</td>
            </tr>
            <tr>
                <td>白天</td>
                <td rowspan="2">2019年1月2号</td>
                <td><img src="./-3d9c5e6c3d9f803b.jpg"width="50"height="50"></td>
                <td>天气晴,可以出行</td>
            </tr>
            </tr>
            <tr>
                <td>黑天</td>
                <td><img src="./-3d9c5e6c3d9f803b.jpg"width="50"height="50"></td>
                <td>天气晴,可以出行</td>
            </tr>
            </tr>
        </tBody>
        </table>
    </body>
</html>

4.5表单标签

form：表单的于搜集用户信息，根据不同的type属性值，展示不同的效果，如输入框，密码箱，复选框等。

type属性：
1.text：普通的文本输入
2.password：密码输入框
3.checkbox：复选框
4.radio：单选框
5.file：上传文件
6.submit：提交按钮
7.reset：重置按钮`
8.textarea：多行文本
9.select，option：下拉菜单，一般都合在一起用
label：辅助菜单；即：在选择的时候可以点击文字即可选中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>document</title>
    </head>
    <body>
        <form action="www.baidu.com">
            <h2>输入框：</h2>
            <input type="text" placeholder="请输入用户名">
            <h2>密码框：</h2>
            <input type="password" placeholder="请输入密码">
            <h2>多选框：</h2>
            <input type="checkbox"checked>苹果         
            <input type="checkbox">葡萄         
            <input type="checkbox" disabled>香蕉
            <h2>单选框</h2>
            <input type="radio" name="123" id="man"><label for="man">man</label>
            <input type="radio" name="123" id="woman"><label for="woman">woman</label>
            <h2>喜欢的城市</h2>
            <select multiple>
                <option selcted disabled>请选择</option>
                <option>成都</option>
                <option>长沙</option>
                <option>上海</option>
            </select>
            <h2>喜欢的人</h2>
            <select size="4">
                <option selcted disabled>请选择</option>
                <option>周杰伦</option>
                <option>李白</option>
                <option>瓦德</option>
            </select>
            <h2>上传文件</h2>
            <input type="file">
            <h2>提交和重置</h2>
            <input type="submit">
            <input type="reset">      
        </form>
    </body>
</html>

还可以利用：
multiple：多选（ctrl+鼠标）
size：显示具体的项目多少

4.6 表单+表格

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOCUMENT</title>
    </head>
    <body>
        <form>
            <table border="1"cellpadding="30">
                <tBody>
                    <tr align="center">
                        <td rowspan="4">总体信息</td>
                        <td colspan="2">用户注册</td>
                    </tr align="right">
                    <tr >
                        <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;
                        <input type="reset">
                    </td>
                    </tr>
                </tBody>

            </table>
        </form>
    </body>
</html>

4.7 div 和 span

div：划分区域，划分为一个个独立的区域
span：内联，之间相互联系

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOCUMENT</title>
    </head>
    <body>
        <div>
            <h2><a href="https://www.runoob.com/html/html5-intro.html"><span>HTML5</span> 教程 | 菜鸟教程</a></h2>
            <P>什么是 HTML5?HTML5 是下一代 HTML 标准。HTML , HTML 4.01的上一个版本诞生于 1999 …</P>
            <P>HTML5 是如何起步的 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web …</P>
            <P>HTML5 !DOCTYPE>!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简 …</P>
            <P>最小的HTML5文档。下面是一个简单的HTML5文档 …</P>
            <a href="https://www.runoob.com/html/html5-intro.html">请在runobo.com查看</runobo></a>

        </div>
        <div>
            <h2><a href="https://www.w3school.com.cn/html/html5_intro.asp"><span>HTML5</span> 简介</a></h2>
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAm"height="80"width="80">
            <p>HTML5 是跨平台的被设计为在不同类型的硬件PC 、平板、手机、电视机等等）之上运行。 注释： 在下面的章节中，您将学到如何“帮助”老版本的浏览器处理 HTML5。 HTML5 中的新内 …</p>
        </div>
    </body>
</html>

黄大帅@lz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
（HTML+css）学习小征程！！！

HTML 称为超文本标签语言，是一种标识性的语言，用于创建网页和Web应用程序。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。@CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
复制链接

扫一扫