前端基础（一）：HTML

茉栀。。。

已于 2024-01-18 14:17:02 修改

阅读量294

点赞数

文章标签：前端 html javascript

于 2022-07-19 18:36:54 首次发布

本文链接：https://blog.csdn.net/m0_61426204/article/details/125832379

版权

Web标椎

Web标椎的构成：HTML、CSS、JavaScript
（1）HTML：页面元素和内容
（2）CSS：网页元素的外观和位置等页面样式（如：颜色、大小等）
（3）JavaScript：网页模型的定义与页面交互

一、什么是HTML、CSS

它们是两种编程语言，一般情况下需要配合使用。是作为网站开发的基础语言。
浏览器把代码解析后的样子就是我们看到的网站
一个网站是由N多个网页组成的，每一个网页就是一个.html 文件

二、编辑器VS Code

VS Code,全称Visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器
安装插件：语言包、open in browser、view in browser
学习编辑器基本使用
（1）创建文件、文件夹、重命名、删除、搜索
（2）ctrl+s、ctrl+a：保存、全选
（3）ctrl+x、ctrl+c、ctrl+v：剪切、复制、粘贴
（4）ctrl+z、ctrl+y、ctrl+d：撤销、前进、选择相同元素的下一个
（5）设置：文件->首选项->设置（大小、是否换行word wrap）
（6）shift+end：从头选中一行
（7）shift+home：从尾部选中一行
（8）shift+alt+↓：快速复制一行
（9）alt+↑或↓：快速移动一行
（10）tab、tab+shift：向后缩紧、向前缩进
（11）alt+鼠标左键：多光标
学习使用Chrome浏览器（谷歌）

三、深入了解网站开发

UI设计师：设计稿
web前段开发工程师：
（1）设计稿->代码
（2）数据库里的数据->显示到页面
（3）web前端三大核心技术：html->结构、css->样式、JavaScript->交互行为
web后端开发工程师

四、HTML基础结构与属性

1、简介

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

超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>，标记也叫标签，例如：< header>、< footer>
语言：编程语言

2、标签语法

标签的写法：
（1）单标签< header>
（2）双标签< header>< /header>
（3）创建标签的快捷键：单词+tab键
标签是可以上下排列，也可以组合嵌套

<header>
    hello word
    <div> aaa </div>
    <div>aaa</div> 
</header>

<footer>hi html</footer>

HTML常见的标签：http://www.html5star.com/manual/html5label-meaning/

3、标签的属性

来修饰标签的，设置当前标签的一些功能（鼠标在点击相应单词会有标签
）
<标签属性=“值” 属性2=“值2”>

<header title="hello"> hello word</header>
<footer title="hi">hi html</footer>

4、html初始代码

每一个html文件都需要添加初始代码。初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码（要符合html文件的规范写法）
初始代码的快捷键：html:5+回车

<!DOCTYPE html>
 <html lang="en">
    <head> 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
       
    </body>
 </html>

< !DOCTYPE html>：文档声明：告诉浏览器这是一个html文件
< html lang=“en”>：html文件的最外层标签:包裹着所有html标签代码， lang="en"表示是一个英文网站，lang="zh-CN"表示中文网站
< head> ：输入网址的地方，头部设置
< meta charset=“UTF-8”>：meta元信息：是编写网页的辅助信息，此语句的辅助信息是整个网页采用国际编码，无论哪种语言都会被识别，不会出现乱码
< title>Document< /title>：设置网页的标题
< body> 显示网页内容区域< /body>

5、html注释

注释的代码，只有在文件中看得到，但是浏览器显示不出来
添加注释的快捷键
1、ctrl+/
2、shift+alt+a
意义：
1、把暂时不用的代码块注释起来，方便以后使用
2、对开发人员进行提示

<!--注释的内容-->
 例：<!--hello word-->

6、html语义化

所谓语义化指的是，根据网页中内容的结构，选择合适的html标签进行编写
好处
a、在没有CSS的情况下，页面也能呈现出很好的内容结构。
b、有利于SEO，让搜索引擎爬虫更好的理解网页。
c、方便其他设备解析（如屏幕阅读器、盲人阅读器等)。
d、便于团队开发与维护。

（1）标题（h标签）

标题->双标签：< h1>< /h1> …< h6>< /h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签，h2、h3等可以出现多次

<!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h1>标题</h1>
        <h2>标题</h2>
        <h3>标题</h3>
        <h4>标题</h4>
        <h5>标题</h5>
        <h6>标题</h6>
    </body>
 </html>

运行结果

（2）段落（p标签）

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

<!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <p>这是一个段落</p>  
    </body>
 </html>

（3）文本修饰标签

< strong>< /strong>：双标签，表示强调，会对文本进行加粗
< em>< /em>：双标签，表示强调，文本变斜体操作
< sub>< /sub>：双标签，下标文本
< sup>< /sup>：双标签，上标文本
< del>< /del>：双标签，删除文本
< ins>< /ins>：双标签，插入文本

<body>
        a <sup>2</sup>+b <sup>2</sup>=c <sup>2</sup>
        H <sub>2</sub>O
        <p>
          促销：原价<del>300</del>,现价<ins>100</ins>  
        </p>
    </body>

运行结果：

（4）图片标签与图片属性

< img>：单标签，图片
src：引入图片地址
alt：在图片有问题时，可以显示一段友好的提示文字
title：提示信息，鼠标放在图片上时会有提示信息
width、height：图片的大小

<body>
    <img src="https://c-ssl.duitang.com/uploads/blog/202108/03/20210803132259_7a574.png" alt="图片" title="这是一张图片的提示信息" width="500" height="600">
</body>

（5）引入文件的地址路径

相对路径
.表示在路径中表示当前路径：同一目录中，同一级，./
…表示在路径中表示上一级路径，…/

<body>
    <img src="./IMG_20220429_180552.jpg" alt="图片" title="这是一张图片的提示信息" width="500" height="600">
</body>

绝对路径
（1）https://c-ssl.duitang.com/uploads/blog/202108/03/20210803132259_7a574.png
（2）E：/ke/qf_dl201901/20190108/mg/animal/dog.jpg

7、跳转链接

一个页面跳转到另外一个页面

（1）< a>< /a>：双标签

href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下是在当前页面打开，target的值是_self，新窗口打开值为_blank

<body>
    <!-- <img src="./IMG_20220429_180552.jpg" alt="图片"> -->

    <a href="http://www.baidu.com">访问百度</a>
    
    <a href="http://www.qfedu.com" target="_blank">
        <img src="./IMG_20220429_180552.jpg" alt="图片" >  <!--给图片加链接 ,点击图片就会到达链接处  -->
    </a>
</body>

（2）< 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="./IMG_20220429_180552.jpg" alt="图片"> -->

    <a href="http://www.baidu.com">访问百度</a>
    
    <a href="http://www.qfedu.com">
        <img src="./IMG_20220429_180552.jpg" alt="图片" >  <!--给图片加链接  -->
    </a>
</body>
</html>

< base target=“_blank”>：此语句可以使a标签不用加target属性就可以使链接在新窗口打开，改变了默认行为

8、跳转锚点

在一个页面内进行跳转

（1）#号

id属性

<body>
    <a href="#html">html</a>
    <a href="#css">css</a>
    <a href="#js">js</a>

    <h2 id="html">html超文本标记语言</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="css">css</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="js">js</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
</body>

（2）#号

name属性（加给的是a标签）

<body>
        <a href="#html">html</a>
        <a href="#css">css</a>
        <a href="#js">js</a>

        <a name="html"></a>
        <h2>html超文本标记语言</h2>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <a name="css"></a>
        <h2 >css</h2>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <a name="js"></a>
        <h2>js</h2>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
        <p>模拟的段落</p>
    </body>

9、特殊符号

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

<body>
    <p>
        &lt;html &gt;
    </p>
</body>

运行结果：< html>

10、列表标签

无序列表

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

注：ul、li必须是组合出现，它们之间是不能有其他标签的，li中间可以有

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

运行结果：

type属性：改变前面标记的样式（一般都是用css去控制）

disc：默认值，实心圆
circle：空心圆
square：实心方块
…

 <ul type="circle">
        <li>第一项</li>
        <li>第二项</li>
    </ul>

运行结果：

有序列表

< ol>、< li>：列表的最外层容器、列表项

注：

有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表。
ol、li必须是组合出现，它们之间是不能有其他标签的，li中间可以有
type属性：改变前面标记的样式（一般都是用css去控制）
1：默认值，数字有序列表（1、2、3）
a：按照字母顺序排列的有序列表，小写（a、b、c）
A：按照字母顺序排列的有序列表，大写（A、B、C）
i：罗马字母，小写
I：罗马字母，大写

定义列表

列表项需要添加标题和对标题进行描述的内容时使用定义列表
（1）< dl>：定义列表
（2）< dt>：定义专业术语或名词
（3）< dd>：对名词进行解释和描述

<body>
   <dl>
    <dt>html</dt>
    <dd>超文本标记语言</dd>   
    <dt>css</dt>
    <dd>层叠样式表</dd>  
    <dt>javascript</dt>
    <dd>网页脚本语言</dd>  
    
   </dl> 
</body>

运行结果：

嵌套列表

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

<body>
<ul>
    <li>
        辽宁省
        <ul>
            <li>沈阳</li>
            <li>大连</li>
            <li>丹东</li>
        </ul>
    </li>
    <li>
        山东省
        <ul>
            <li>济南</li>
            <li>青岛</li>
            <li>烟台</li>
        </ul>
    </li> 
   </ul>
</body>

运行结果：

11、表格标签及属性

表格标签

（1）< table>：表格的最外层容器
（2）< tr>：定义表格行
（3）< th>：定义表头
（4）< td>：定义表格单元
（5）< caption>：定义表格标题
注：之间是有嵌套关系的，要符合嵌套规范

<body>
    <table>
        <caption>天气预报</caption>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        <tr>
            <td>2022年7月17日</td>
            <td><img src="./1.png" alt=""></td>
            <td>天气晴朗，会出现彩虹</td>
        </tr>
        <tr>
            <td>2022年7月18日</td>
            <td><img src="./2.png" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>
    </table>
</body>

运行结果：
在这里插入图片描述
（6）语义化标签：
< tHead>头部、< tBody>身体、< tFood>尾部

注：

不具备效果，只是为了表格更加规范
在一个table中 tBody是可以出现多次的，tHead、tFood只能出现一次

<body>
    <table>
        <caption>天气预报</caption>
    <tHead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </tHead>
    <tBody>
        <tr>
            <td>2022年7月17日</td>
            <td><img src="./1.png" alt=""></td>
            <td>天气多云，会出现彩虹</td>
        </tr>
        <tr>
            <td>2022年7月18日</td>
            <td><img src="./2.png" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>
    </tBody>
    </table>
</body>

运行结果：与上相同

表格属性

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

<body>
<table border="1" cellpadding="10" cellspacing="10">
        <caption>天气预报</caption>
    <tHead>
        <tr align="right" valign="top">
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </tHead>
    <tBody>
        <tr valign="top">
            <td>2022年7月17日</td>
            <td>白天</td>
            <td><img src="./1.png" alt=""></td>
            <td>天气多云，会出现彩虹</td>
        </tr>
        <tr>
            <td>2022年7月18日</td>
            <td>白天</td>
            <td><img src="./2.png" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>
    </tBody>
    </table>
    
</body>

运行结果：

12、表单标签

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

<body>
    <form action="http://www.baibu.com"><!-- 最终要提交的地址 -->
      <h2>输入框</h2>
      <input type="text" placeholder="请输入用户名">  <!-- placeholder:使得框上会有提示信息 -->
      <h2>密码框</h2>
      <input type="password" placeholder="请输入密码">
      <h2>复选框</h2>
      <input type="checkbox" checked>苹果<!-- checked:默认会被选中 -->
      <input type="checkbox">香蕉
      <input type="checkbox" disabled>葡萄<!-- disable:不能被选中 -->
      <h2>单选框</h2>
      <input type="radio" name="gender">男
      <input type="radio" name="gander">女
      <!-- 通过name让它们变成一组，否则会出现男女两个都会被选中的状态 -->
      <h2>上传文件</h2>
      <input type="file">
      <h2>提交按钮和重置按钮</h2>
       <input type="submit">
      <input type="reset">
    </form>
</body>

运行结果：

（3）< textarea>:多行文本框
（4）< select>、< option>：下拉菜单

<h2>多行文本框</h2>
      <textarea  cols="30" rows="10"></textarea>
      <h2>下拉菜单</h2>
      <select size="2"><!-- size：可以同时显示两项选择  multiple:多选-->
        <option selected disabled>请选择</option><!-- selscted:初始被选中 -->
        <option>上海</option>
        <option>北京</option>
        <option>徐州</option>
      </select>

运行结果：

（5）< label>：辅助表单，让可选择的范围变大，不仅点击按钮可以选择，点击男女也可以实现选择

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

注：

表格表单可以组合使用，表格有嵌套规范，表单没有

<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息 </td>  <!-- 4行 -->                  <td colspan="2">总体信息 </td>
                    <td colspan="2">总体信息 </td>  <!-- 2列 -->                <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>
</body>

运行结果：

13、< div> 与< span>

（1） < div>
div（块）∶
div全称为division，“分割、分区”的意思，< div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div>标签中，< div>中还可以嵌套多层< div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

（2）< span>（内联）
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行

<body>
    <div>这是一个块</div>
    <span>这是一个内联</span>
</body>

运行结果：
这是一个块
这是一个内联

茉栀。。。

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端基础（一）：HTML

文章目录

Web标椎

一、什么是HTML、CSS

二、编辑器VS Code

三、深入了解网站开发

四、HTML基础结构与属性

1、简介

2、标签语法

3、标签的属性

4、html初始代码

5、html注释

6、html语义化

（1）标题（h标签）

（2）段落（p标签）

（3）文本修饰标签

（4）图片标签与图片属性

（5）引入文件的地址路径

7、跳转链接

8、跳转锚点

9、特殊符号

10、列表标签

无序列表

有序列表

定义列表

嵌套列表

11、表格标签及属性

表格标签

表格属性

12、表单标签

13、< div> 与< span>