前端开发学习日志

目录

概论

何为HTML,CSS?

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

网站开发的分工

HTML入门

HTML的基础结构与属性

HTML初始代码

HTML注释

HTML语义化

标题与段落

文本修饰标签

图片标签与图片属性

引入文件的路径地址

跳转链接

跳转锚点

特殊符号

HTML中的列表

无序列表

有序列表

定义列表 

嵌套列表 

表格与表单

表格标签

表格属性

表单标签

表格表单组合使用

div标签与span标签


概论

何为HTML,CSS?

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

:一个网站由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>

定义列表 

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

<dl>:定义列表,类似<ul><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>:定义表格标题

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

<tHead>,<tBody>,<tFoot>

注意:语义化标签只代表规范化,不具备效果!

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

<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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值