Web技术之HTML

最新推荐文章于 2023-04-21 21:31:59 发布
最新推荐文章于 2023-04-21 21:31:59 发布
阅读量179 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dingzz_/article/details/114826247
版权

HTML学习总结

一、HTML概述

一个网页就好像一幢房子，HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。综上，HTML其实就是网页的结构+内容。

1、新建网页

代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>
</html>

在这里插入图片描述

二、HTML简单应用

HTML元素：
1、html /html:根元素，其它元素都嵌套到其中。
2、 a /a:超链接元素
3、 h1 /h1:一级标题
4、th /th:表头（加粗）
5、td /td:表格等
6、br, hr, input，img:空元素
其中一个属性必须包含如下内容：
①一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格)
②属性名称，后面跟着一个 = 号。
③一个属性值，由一对引号 “” 引起来。

1、增加注释

现在让我来加一个不显示的注释试试~
打开页面发现页面确实没有改变，成功！
在这里插入图片描述

2、增加空元素

代码如下：

<!-- 换行 -->
<p>我可以<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>

在这里插入图片描述

3、增加六级标题

代码如下：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

在这里插入图片描述

4、不同的文本格式

代码如下：

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

在这里插入图片描述

5、增加超链接

代码如下：

<p> 以下是一个超链接展示</p>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>

在这里插入图片描述

6、插入图片

文件路径如下：
①img src=“picture.jpg”
该图片文件与当前文档在同一目录中
②img src="./images/picture.jpg"
该图片文件在当前目录下的images目录中
③img src="…/picture.jpg"
该图片文件在上一级目录中

我的代码如下：

<img src="tx1.jpeg" alt="MDB Logo" width="300" height="600">

在这里插入图片描述

7、表格和列表

代码如下：

<ul>  <li>Coffee</li> 
 <li>Tea</li>  <li>Milk</li>
 </ul><ul type="square">  
 <li>Coffee</li> 
 <li>Tea</li> 
 <li>Milk</li>
 </ul><ol> 
 <li>Coffee</li> 
 <li>Tea</li>  
 <li>Milk</li></ol>  
 <ol type="a">   
  <li>Coffee</li>    
  <li>Tea</li>    
  <li>Milk</li>  
  </ol>

在这里插入图片描述

8、制作简易表单

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

在这里插入图片描述

小结

本次实验跟着指导步骤做没有遇到什么大问题，除了一开始因为文件命名问题没有在浏览器打开页面外，一切都很顺利，放入了自己喜欢的图片很开森，明天再继续做，bye~

叮-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web技术基础——HTML
weixin_47357131的博客
03-27 265
目录Web技术开发HTMLHTML简介基础插件下载结构分析1.元素2.注释3.空元素4.属性5.标题6、超链接7.图片及文件路径img8.表格9.列表10.表单11.预设格式 Web技术开发 Web技术用来设计开发网页，主要分为两部分：前端开发、后端开发 ，二者合起来就是全栈开发。 前端开发主要有：HTML、CSS、JS（Java Script）、Angular； 后端开发主要有NestJs； 开发工具：VS Code最新版、Chrome浏览器。 HTML HTML简介 HTML是一种超文本标记语言，也就是
web中HTML的基础知识点
m0_73473737的博客
11-02 390
html基础知识
WEB前端开发技术与HTML基础
12-05
《Web前端开发技术》是一门专业基础性课程，是后续计算机语言程序和软件开发类课程的基础，也是为了让大学一年级学生提早学会的一门入门级技术操作性课程。
Web技术基础学习——HTML
weixin_46584792的博客
05-14 352
目录1.HTML简介2.文档结构3.文档结构分析4.文档相关说明5.标题6.文本格式7.超链接 1.HTML简介 HTML是超文本标记语言（HyperText Markup Language），构建Web页面即网页。 HTML定义网页内容的含义和结构；CSS描述网页的表现与展示效果；JavaScript描述功能与行为。 W3C万维网联盟，制定网页开发的标准，使同一个网页在不同的浏览器中有相同的效果。遵循W3C的规范。 2.文档结构 在code中新建工作目录，新建HTML文件，在该文件夹下新建后缀为h
Web技术之html篇初步（个人详细总结）
weixin_45680700的博客
03-10 195
Web技术之html篇初步一：何为Web技术？二：学习Web的第一步：html三：html中常见元素汇总前言：功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 录标题) 文章目录一：何为Web技术？二：学习Web的第一步：html
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
WEB服务器端技术
weixin_44752664的博客
04-11 1万+
WEB服务器端技术 客户端是与用户交互的唯一接口，对于软件测试人员来说不可掉以轻心，那么服务器端又需要我们了解哪些技术呢？ 事实上，对于Web系统来说，相比于客户端技术，服务器端技术更是深不可测，其各类技术，系统架构，处理方式等千变万化。服务器端的技术进步，同样要求软件测试技术的同步前进，也更加要求软件测试人员能够跟上技术的步伐，否则测试将很难开展。 虽然服务器端技术很复杂，作为测试人员，我们不能望而却步，否则我们的测试如何进步？本节就来为大家作一个整体的梳理，将服务器端的各类技术作一个总结： WW
Web交互技术概述
qq_45832807的博客
11-09 3263
一，web的概念 web即全球广域网，也称万维网，也是一种分布式架构和建立在internet上的网络服务，它分享在网络上的各个web服务器中的所有互相连接的信息，使浏览者可以在internet上面查找和浏览信息。 万维网由蒂姆 伯纳斯-李创建，1990年他和他的团队又相继确定了超文本标记语言（HTML）,超文本传输协议（HTTP）和统一资源定义符（URL）,作为万维网的基本概念。 HTML 被称...
web技术导论
qq_42576843的博客
06-18 2625
一、考试题型 1.简答题（50分） 2.阅读程序写结果（20分） 3.程序编程题（30分） 二、名词解释 HTTP:超文本传输协议（Hypertext Transfer Protocol） WWW:万维网 (World Wide Web) TCP/IP:传输控制协议/互联网络协议,是Internet最基本的协议 （Transmission Control Protocol/Internet Protocol) URL:统一资源定位符（Uniform Resource Locator） URI:资
Web3技术入门向科普
shaozheng0503的博客
04-21 6897
Web3是指下一代互联网，区别于传统的Web2。Web3的主要特点是去中心化和安全性。在传统的Web2中，我们是通过中央服务器来实现各种在线活动的，如发送电子邮件、购物、社交等等。这些活动的数据和信息都存储在中央服务器上，由中央机构来管理和维护。而在Web3中，我们是通过区块链技术来实现这些活动的。区块链是一个去中心化的数据库，它将数据和信息存储在许多节点上，不再需要中央机构来管理和维护。这样可以保证数据和信息的安全性和透明度，同时也避免了中央机构的单点故障。
web开发之技术简介
12-16
在"0100_第一部分：序言"中，可能详细介绍了Web开发的历史背景，包括Tim Berners-Lee创建万维网的起源，以及Web技术的发展历程，如何从静态HTML页面发展到现在的动态、交互性强的Web应用。 此外，序言还可能概述了...
HTML-Web前台技术
12-13
HTML-Web前台技术
web技术导论复习大纲
04-02
Web 技术导论复习大纲 ...Web 技术导论是 Web 开发的基础，涵盖了 URL、B/S 模式、站点的主目录和虚拟目录、IIS 上的 Web 应用站点部署、HTML 文档、表单、层叠样式单 CSS、JavaScript 脚本等多个方面的知识点。
Web技术教程
09-19
Web技术是互联网的基础，它涵盖了从网页设计到服务器端编程的各种知识领域。本教程资源包含两版W3CSchool的手册，以及DHTML手册和...总之，Web技术是一个广阔且不断发展的领域，这些教程将为你开启这一领域的学习之旅。
Web基础知识与常用技术
lvxingzhe3的博客
03-20 6110
Web基础知识与常用技术
磁力链磁力链磁力链.txt
最新发布
07-22
磁力链
“人力资源+大数据+薪酬报告+涨薪调薪”
07-22
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
安装graphviz和pygraphviz
07-22
pygraphviz 是一个Python库，它是Graphviz图形可视化软件的Python接口。Graphviz是一个开源的图形可视化软件，广泛用于创建和编辑有向图和无向图。pygraphviz使得Python开发者能够轻松地创建和操作图形，以及执行图形的布局和可视化。 一、pygraphviz的主要功能 创建和编辑图形：pygraphviz允许开发者通过Python代码来创建图形，包括添加节点、边等元素，并且可以编辑这些元素的属性，如颜色、形状、标签等。 图形布局：pygraphviz支持多种图形布局算法，如dot、neato、circo等，开发者可以根据需要选择合适的算法来优化图形的布局。 图形可视化：pygraphviz可以将创建和编辑好的图形保存为图片文件，支持多种图片格式，如PNG、JPEG等，方便开发者进行展示和分享。
BrainF**k Devlopment Toolkit
07-22
BrainF**k Devlopment Toolkit(BFDTK)，可用于开发BrainF**k程序。
HTML5与Web技术精华讲解
而在客户端，前端技术主要包括HTML、CSS和JavaScript，它们负责网页的展示和交互。 HTML基础知识部分讲解了HTML的基本元素和语法。HTML标签用于组织网页内容，例如`<div>`、`<span>`、`<p>`、`<img>`、`<table>`、`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值