web技术基础—HTML

最新推荐文章于 2023-12-22 11:38:57 发布

直至植

最新推荐文章于 2023-12-22 11:38:57 发布

阅读量579

点赞数

分类专栏： web技术基础文章标签： html

本文链接：https://blog.csdn.net/qq_44644740/article/details/114587555

版权

web技术基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

Web开发
HTML
总结

Web开发

web技术用来设计开发网页，主要分为两部分：前端开发、后端开发 ，二者合起来就是全栈开发。
前端开发主要有：HTML、CSS、JS（Java Script）、Angular；
后端开发主要有NestJs；
开发工具：VS Code最新版、Chrome浏览器。

HTML

HTML简单介绍

超文本标记语言——HyperText Markup Language

HTML是一种超文本标记语言，也就是用来定义内容结构，搭建一个网页的基础。在这里与前端开发的CSS以及JS是不可或缺的三个组成部分。
HTML相当于结构；
CSS相当于美工；
JS相当于行为。

HTML初步搭建

使用工具

VS Code用来撰写，使用HTML5；Chrome浏览器用来实时查看网页。

基础设置

在VS code中先安装各种所需的插件，比如open in browser等，之后再在电脑中新建文件夹，
在这里插入图片描述

结构分析

html由元素elements构成，元素包含开始标签、结束标签、内容。
其中有一些规定好的，如下：

<head>，<title>，<body>，<header>，<footer>……

<!DOCTYPE html>: 声明文档类型；
<html></html>: <html>元素。包含全部页面，可以嵌套其他的元素；
<head></head>: <head>元素。 类似于C语言编程中的头文件，不会在浏览器中的html页面显示。
<meta charset="utf-8">: 设置文档使用utf-8字符集编码，用来识别文本内容。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 浏览器标签图标显示图。
<title></title>: 页面标题，也就是浏览器收藏标签。
<body></body>: <body>元素。 html的主体内容。

打开web文件夹后新建myproject.html文件，对于一些规定的元素的使用，可以通过例子来看，如下：

a.元素
在这里插入图片描述
之后在已经安装了open in browser插件的情况下在 code 的编辑区右键点击在浏览器中打开，如下：

b.注释

特殊的记号<!--和-->

在这里插入图片描述
验证：

c.空元素
这里的空元素只有一个开始标签，用来在此元素所在位置插入/嵌入一些东西，如下：

<br>, <hr>, <input>, <img>, <a>……
也就是换行，分割线与输入行,图片等等。

在这里插入图片描述
验证：

d.属性
属性包含元素的额外信息，并不会在浏览器中显示出来。

<input type="text">
<input type="password">

在这里插入图片描述
验证：

e.标题heading

<h1> ~ <h6>从小到大六级标题。

在这里插入图片描述
验证：

f.超链接
拿百度为例，去访问到另一个页面。

<a href="https://www.baidu.com/" target="_blank">百度一下</a>
href URL（Uniform Resorce Locator)，即统一资源定位符，也就是常说的网址。
target属性为_blank表示在新的页面打开超链接，点击“百度一下”即可跳转。

在这里插入图片描述
验证：

在本页面内进行标题跳转：

<h2 id="C4">第四章 ONE DAY</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->锚点，用于标记页面的某个元素或位置。在本页面内跳转，也叫做书签。
使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可,注意id是唯一的。

在这里插入图片描述
验证：

g.图片
这里事先把图片存在同一文件夹下，既可以直接调用相对路径，如下：

<img src="picture.jpg"alt="MDB Logo">
src属性是图片的路径
alt属性是当前图片获取失败时显示的占位符。

在这里插入图片描述
验证：

这里需要说明，图片路径的问题，这里的图片文件路径与其他地方没有什么不同，都是要分绝对路径与相对路径，比如：

绝对路径：
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
相对路径：
 <img src="picture.jpg"alt="MDB Logo">

h.表格 Table

<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）<table>
    <tr>
      <th>Firstname</th>
    </tr>
    <tr>
      <td>Jill</td>
    </tr>
    <tr>
      <td>Eve</td>
     </tr>
  </table>

在这里插入图片描述
验证：

i.列表 List
分为无序列表和有序列表。

无序列表使用<ul>标签；
有序列表使用<ol>标签。

在这里插入图片描述
验证：

j.表单 Form
使用表单（form）进行信息的选择或者填写。提交信息，表单中没有name属性的元素将不会提交。

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
……
</form>

在这里插入图片描述
验证：

k.区块与内联及预设格式

区块元素在浏览器显示时，以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。
内联元素一个接一个进行显示，不会新起一行。

在这里插入图片描述
验证：

使用pre标签在网页中展示一首诗或一些特别格式的文

在这里插入图片描述
验证：

特殊字符的显示，有的时候代码需要显示，例如空格是&nbsp；特殊字符可参考ISO-8859-1 字符实体手册

在这里插入图片描述

验证：在这里插入图片描述

预留思考

一、如何用图片作为超链接？

 <a href="http://www.baidu.com">
        <img src="picturethree.jpg" />
    </a>

代码修改后具体实现如下：
在这里插入图片描述

验证：
在这里插入图片描述

二、对于小尺寸的图片，如何用 base64 编码进行图片的插入显示？
将图片转换为base64编码后直接插入，具体实现如下：
在这里插入图片描述
验证：

总结

以上就是我对于web前端开发的HTML的初步学习。

直至植

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web技术基础—HTML

文章目录Web开发HTMLHTML简单介绍HTML初步搭建使用工具基础设置结构分析预留思考总结Web开发web技术用来设计开发网页，主要分为两部分：前端开发、后端开发，二者合起来就是全栈开发。前端开发主要有：HTML、CSS、JS（Java Script）、Angular；后端开发主要有NestJs；开发工具：VS Code最新版、Chrome浏览器。HTMLHTML简单介绍超文本标记语言——HyperText Markup LanguageHTML是一种超文本标记语言，也就是用来定义
复制链接

扫一扫

专栏目录