前端开发学习日志

山中一小道

已于 2022-06-21 20:52:19 修改

阅读量805

点赞数 4

文章标签：学习前端 javascript

于 2022-06-20 18:15:13 首次发布

本文链接：https://blog.csdn.net/m0_61898102/article/details/125377359

版权

概论

何为HTML,CSS?

如何理解HTML,CSS,JS三者的关系？

概论

何为HTML,CSS?

HTML是超文本标记语言，而CSS为HTML提供了一种样式描述，二者都是做网站的编程语言，浏览器把代码解析后的样子就是网站。

注：一个网站由N个网页组成，每个网页都是一个.html文件。

本人基于vscode编辑器学习，前期以chrome浏览器（占据市场份额大，运用范围广）为基础针对学习。

如何理解HTML,CSS,JS三者的关系？

在我的理解中，html语言负责搭建结构，css负责对结构进行样式美化，js负责行为交互，这三者是前端开发的三大核心技术。

网站开发的分工

UI设计师：设计稿→代码的实现

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

web后端开发工程师（数据库）

HTML入门

HTML的基础结构与属性

HTML: 超文本 、标记、 语言以下逐一解读：

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

标记：也可以叫做标签，大体上可以分为单标签与双标签 特别注意：标签可以上下排列，也可以组合嵌套

一般形式：

< 单词 >      <单词></单词>

标签属性：修饰标签的一些功能，其形式大致如下：

<标签 属性1 = "值1" 属性2 = "值2">

语言：编程语言

HTML初始代码

初始代码是每个.html文件都有的代码，目的是符合HTML的规范写法

可以使用:!+Tab快捷键创建初始代码，代码形式如下：

<!DOCTYPE html><!--文档声明//-->
<html lang="en"><!--html文件的最外层标签,包裹着所有html标签-->
<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>我是一个网页的标题</title><!--设置网页的标题-->
</head>
<body>
    hello world<!-- 显示网页内容 -->
</body>
</html>

HTML注释

<!--内容-->

意义：1.把暂时不用的代码注释起来，方便日后使用

2.对开发人员进行提示

注释快捷键：1.ctrl＋/ 整行注释 2.shift+alt+a 创建注释符

HTML语义化

根据网页中内容的结构，选择合适的HTML标签进行编写

好处：1.在没有CSS的情况下，页面也能呈现出很好的内容结构

2.有利于SEO,让搜索引擎爬虫更好地理解网页内容

3.方便其他设备解析（如：屏幕阅读器、盲人阅读器）

4.便于团队维护和开发

标题与段落

区别于title，标题在这里是一个双标签，形式如下：

<h1>大家好，我是小明</h1>
    <h2>或许你会好奇我是谁，让我来告诉你吧</h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    <p>我叫李子明，我爱喝旺仔牛奶!</p>

h1是最重要的一个标题，并且一个.html文件中只能出现一个h1标签，但h2-h6可以重复出现多次。

注意：h5与h6标签在网页中不经常使用

P标签：段落标签，同样为双标签。

上述代码在网页中可以实现为：

文本修饰标签

<strong>表示强调，是一个双标签，可以达到字体加粗的效果

<em>也表示强调，但与<strong>相比稍弱，同样为一个双标签，可以达到斜体的效果

<sub>、<sup>下标文本、上标文本

<del>、<ins>删除文本、插入文本：一般情况下这二者是搭配使用的
以下是代码块与效果展示：

<p>
    <strong>这句话需要强调</strong>
    <em>这句话也需要强调，但强调性稍弱</em>
   </p>
<p>
    a <sup>2</sup>+b <sup>3</sup>=c<sup>4</sup>
    H <sub>2</sub>O
</p>
<p>
    促销：原价 <del>300</del>，现价 <ins>100</ins>
</p>

图片标签与图片属性

img:图片，是一个单标签

src:引入图片的地址

alt：当图片出现问题时，可以提示一段友好的文字

title：提示信息

width、height:控制图片的大小，单位是像素

<p>
    <img src="这里填入图片的地址" alt="图片出现问题时显示的文字"title="提示信息"width="数值大小"height="数值大小">
   </p>

引入文件的路径地址

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

在使用相对路径时，一定要注意图片的存储地址！图片离.html文件越近，相对地址越简单

对于相对路径，可以观察文件的存储位置确定路径关系，文件路径既可以使用反斜线\，也可以使用斜线/，注意：网络地址只能写斜线/，所以我们尽量避免写反斜线\

绝对路径：无参照物，是绝对的路径地址

<body>
    <!--<img src="./Untitled-1.html" alt="">-->
    <!--<img src="../Untitled-1.html" alt="">-->
    <img src="E:/img/liziming.jpg" alt="">
</body>

跳转链接

在这里我们引入两个重要标签，分别是<a>标签与<base>标签，知识点如下：

<a>标签是一个双标签，主要的作用是实现链接的功能

在<a>标签中有两个重要属性：href属性：链接的地址

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

练习代码如下：

 <a href="http://www.baidu.com"target="_blank">访问百度</a>
  <a href="点击图片后想要跳转的目标地址">
    <img src="图片地址" alt="">

如上所示，我们可以知道，链接不仅可以针对字符，还可以针对图片。

注意：target属性一般默认为_self，意义是在当前页面打开，通过改变为_blank可以实现在新窗口打开

<base>标签是

一个单标签，可以改变<a>标签的默认行为，通常嵌套在<head>中，例子如下：

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

合理使用<base>标签，可以大幅提高工作效率

跳转锚点

锚点的实现是基于<a>标签，所以<a>标签的使用一定要掌握好

通过使用锚点，可以实现页面内的快速跳转

实现方法一：#号 id属性代码如下

 <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#js">JavaScript</a>
    <h2 id="html">HTML超文本标记语言</h2>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <h2 id="js">js脚本</h2>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>

实现方法二： #号 name属性代码如下：

<a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#js">JavaScript</a>

    <a name="html"></a>
    <h2>HTML超文本标记语言</h2>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <a name="js"></a>
    <h2>js脚本</h2>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>
    <p>这是一段文字，模拟段落</p>

特殊符号

当我们尝试编写一些文本时，有时会出现一些输入法无法输入的字符，如注册商标号等；又或者是我们在一段文字中尝试加入多个空格时，页面并不会解析这些空格。这些字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码：

现在我们做一点应用的实际例子：

<p>
    &lt;html&gt;
  </p>
  <p>
    hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world
  </p>

在浏览器中会显示成这样：

<html>

hello     world

HTML中的列表

无序列表

列表是一种常见的展示形式，在这里我们先来认识无序列表

无序列表涉及两个重要标签，分别是<ul>,<li>，分别指列表的最外层容器，列表项

二者必须组合出现！

通过type属性可以改变标签的样式（一般由css控制)

相关的样式设置可以参考HTML <ul> 标签的 type 属性

特别注意：两个标签中间不可以插入别的标签，但是<li>内部可以有其他标签

知识点代码如下：

<!--以下是正确的写法
 <ul>
    <li>第一项</li>
    <li>第二项</li>
  </ul>-->

  <!--以下是错误的写法：
  <ul>
    <p>
        <li></li>
    </p>
  </ul>-->

  <ul type="circle">
    <li><a href="#"><strong>大家好</strong></a></li>
    <li><a href="#">我叫小明</a></li>
    <li><a href="#">今年五岁半</a></li>
    <li><a href="#">我来自中国</a></li>
    <li><a href="#">很高兴认识你们</a></li>
  </ul>

页面效果如下：

有序列表

在有序列表这里我们引入<ol>,<li>两个标签，代表的意义参考无序列表的<ul>,<li>，二者意义相同

相关规则参考无序列表，这里不过多赘述，直接上代码和实际效果

样式设置可以参考HTML <ol> 标签

注：有序列表用的较少，且无序列表可以代替有序列表，样式同样可以通过css控制

<ol>
    <li><a href="#"><strong>大家好</strong></a></li>
    <li><a href="#">我叫小明</a></li>
    <li><a href="#">今年五岁半</a></li>
    <li><a href="#">我来自中国</a></li>
    <li><a href="#">很高兴认识你们</a></li>
  </ol>

定义列表

当列表项需要添加标题以及对标题进行解释时引入

<dt>:定义专有名词或者术语

<dd>:对名词进行解释和描述

代码和效果如下：

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

嵌套列表

列表之间可以互相嵌套形成多层级列表，下面引入相关操作代码：

<ul>
    <li>
        江苏省
        <ul>
            <li>南京市</li>
            <li>扬州市</li>
            <li>苏州市</li>
        </ul>
    </li>
    <li>
        山东省
        <ul>
            <li>烟台市</li>
            <li>青岛市</li>
            <li>烟台市</li>
        </ul>
    </li>
    <dl>
        <dt>中国</dt>
        <dd>
            <dl>
                <dt>江苏省</dt>
                <dd>南京市</dd>
                <dd>扬州市</dd>
                <dd>苏州市</dd>
            </dl>
            <dl>
                <dt>山东省</dt>
                <dd>烟台市</dd>
                <dd>青岛市</dd>
                <dd>烟台市</dd>
            </dl>
        </dd>
    </dl>
</ul>

效果展示如下：

表格与表单

表格标签

在表格便签这里，我们引入以下几个标签：

<table>:最外层容器

<tr>:定义表格行

<th>:定义表头

<td>:定义表格单元

<caption>:定义表格标题

除此外还有三个语义化标签：

注意：语义化标签只代表规范化，不具备效果！

下面我们来展示相关知识点代码以及效果图：

<table>
    <caption>天气预报</caption>
    <tHead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </tHead>
   <tBody>
     <tr>
           <td>2022年6月21日</td>
           <td>晴朗</td><!--可以通过img标签直接插入图片-->
           <td>适合出行</td>
     </tr>
     <tr>
           <td>2022年6月22日</td>
           <td>小雨</td><!--可以通过img标签直接插入图片-->
           <td>出门请带伞</td>
     </tr>
   </tBody>
   <tFoot>
    <!--也是tr,td的语句-->
   </tFoot>
</table>

表格属性

表格属性通常有以下几种：

border:表格边框

<cellpedding>：单元格内的空间

<cellspacing>：单元格之间的空间

<rowspan>：合并行

<colspan>：合并列

<align>：左右对齐方式：left,right,center

<valign>：上下对齐方式：top,middle,bottom

表单标签

在表单标签这一块，我们先介绍两个比较重要的标签

<form>标签：表单最外层容器

<input>标签：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，比如输入框、密码框、复选框等

下面来介绍几个不同的type属性：

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

下面直接上代码和效果展示：

<form action="提交的地址">
    <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>

了解完上述两个重要标签后，我们来了解下面三个标签

<textarea>：多行文本框

<select>,<option>：这是一对组合标签，起到下拉菜单的作用

<label>：辅助表单

话不多说，直接上代码和效果图：

 <h2>多行文本框</h2>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select name="" id="">
        <option selected disabled>请选择</option>
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">苏州</option>
        <option value="">南京</option>
    </select>

这里有几个属性可以让我们的代码更加精细：

checked:选定
selected:设置默认选项
disabled：锁定，使选项不能选择
size：可以设置显示项数，默认值为1
multiple：设置多选

当然，还有更多的属性，这里不一一例举。

表格表单组合使用

表格表单互相组合形成数据展示效果，在写的时候我们注意，表格有嵌套规范，表单没有，所以再正常情况下我们优先写表单，实战如下：

<form action="">
      <table border="1" cellpadding="30">
          <tBody>
             <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="4">
                    <input type="submit">
                    <input type="reset">
                </td>
            </tr>
           </tBody>       
      </table>
  </form>

效果如下：

在我学习的过程中，我在这部分遇到了一点问题，如果我把代码中的一部分改为

<tr>
                <td rowspan="4">总体信息</td>>
             </tr>
             <tr>
                <td colspan="2">用户注册</td>
             </tr>

显示效果就会变为：

这是由于另起的tr会另外计算一行，所以实际上这里有五行，“总体信息”只能占四行

div标签与span标签

<div>表示一个“块”，有划分区域的作用，相当于一块区域容器，可以容纳各类网页元素，即HTML中大多数标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割为独立的部分，以此实现网页的规划与布局。

<span>是一个“内联”，用于修饰文字。

注意：<div>，<span>没有任何默认样式，需配合CSS使用

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

截至到这里，HTML的基础部分到此结束，CSS部分由于篇幅关系会开一篇新的日志记录！

山中一小道

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端开发学习日志

个人学习向记录，欢迎各路大佬指正
复制链接

扫一扫