Web 开发1.1 -HTML基础1

最新推荐文章于 2024-08-11 00:51:52 发布
最新推荐文章于 2024-08-11 00:51:52 发布
阅读量152 收藏
点赞数
分类专栏： web开发 文章标签： html web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Thf13798008757/article/details/108575966
版权

文章目录

Web 开发的标准

  • 结构标准：XML, HTML, XHTML
  • 表现标准：CSS
  • 行为标准：DOM, JavaScript

HTML基础

什么是 HTML？

HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
HTML 四个基本标签

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落
HTML 段落是通过 <p> 标签进行定义的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接
HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.w3school.com.cn">This is a link</a>

HTML 图像
HTML 图像是通过 <img> 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

HTML 文档 = 网页

HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页
  • Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

HTML 元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签元素内容结束标签
<p>This is a paragraph</p>
<a href=“default.htm” >This is a link</a>
<br />

（<br />就是没有关闭标签的空元素（<br> 标签定义换行））

HTML元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

HTML属性

属性为 HTML 元素提供附加信息。
定义

  • HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

  • 属性总是以名称/值对的形式出现，比如：name=“value”。

  • 属性总是在 HTML 元素的开始标签中规定。

例子

  1. HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

    <a href=“http://www.w3school.com.cn”>This is a link

  2. <h1> 定义标题的开始。

    <h1 align=“center”> 拥有关于对齐方式的附加信息。

    结果： “拥有关于对齐方式的附加信息。”在一行中间

  3. <body> 定义 HTML 文档的主体。

    <body bgcolor=“yellow”> 拥有关于背景颜色的附加信息。

    结果： “拥有关于对齐方式的附加信息。”的背景色是黄色

  4. <table> 定义 HTML 表格。

    <table border=“1”> 拥有关于表格边框的附加信息。

HTML样式

style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。	

<html>
	<body style="background-color:PowderBlue;">
	
	<h1>Look! Styles and colors</h1>
	
	<p style="font-family:verdana;color:red">
	This text is in Verdana and red</p>
	
	<p style="font-family:times;color:blue">
	This text is in Times and blue</p>
	
	<p style="font-size:30px;color:grey">This text is 30 pixels high</p>
	
	</body>
</html>

在这里插入图片描述

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色：

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

在这里插入图片描述

HTML 样式实例 - 字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

在这里插入图片描述

HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式：

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

在这里插入图片描述

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
例子
  1. 创建超级链接： 本例演示如何在 HTML 文档中创建链接。
<html>

<body>

<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>

在这里插入图片描述

  1. 将图像作为链接：本例演示如何使用图像作为链接。
<html>

<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>

在这里插入图片描述

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签
HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

<a href="http://www.w3school.com.cn/">Visit W3School</a>

上面这行代码显示为：Visit W3School这个网页

点击这个超链接会把用户带到 W3School 的首页。

提示：“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。

  • 您可以使用 name 属性创建 HTML 页面中的书签。

  • 书签不会以任何特殊方式显示，它对读者是不可见的。

  • 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例

  • 首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
  • 然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
  • 您也可以在其他页面中创建指向该锚的链接
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
具体见：w3school html链接全解

HTML表格

你可以使用 HTML 创建表格。

例子

  1. 表格
<html>

<body>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

在这里插入图片描述
2. 表格边框

<html>

<body>

<h4>带有普通的边框：</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

在这里插入图片描述

表格

表格由

标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

浏览器可能会这样显示：

表格中的空单元格
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 2

具体细节见：html表格详解

GriteeTan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WEB-1.1-HW-2
02-12
【标题】"WEB-1.1-HW-2" 是一个关于Web开发的课程作业，可能涉及基础的网页设计和编程。在这个阶段，学生通常会接触到网页开发的基础知识，包括HTML、CSS和JavaScript等。 【描述】"WEB-1.1-HW-2" 提示这是一个系列...
WEB-1.1-Assignment-1:进行学校WEB 1.1作业
04-08
"WEB"通常指的是Web开发，可能涵盖了HTML、CSS、JavaScript等基础知识，也可能涉及到更高级的Web框架和技术。"1.1"可能是课程的编号或者阶段划分，表示这是一门初级或入门级别的课程。"Assignment-1"则说明这是该...
Web开发基础-HTML-03
Coder_Boy_的博客
06-16 154
HTML常用标签【DIV元素】分区&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;分区&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- logo区 --&a
gitee使用教程（手把手，简单详细，中文包）
weixin_50470247的博客
10-05 1万+
gitee译为码云，是国内创建的一个类似与github的网站，可以上传自己的代码放在云端保存，下面介绍gitee如何使用，github类似使用操作。
Git和Gitee的简介与使用
搞IC的小冯
11-05 8397
文章目录 一、Git的基础知识 Git 是什么 Git 的安装 初次运行 Git 前的配置 获取 Git 帮助 取得项目的 Git 仓库 如何通过 git clone 克隆仓库/项目 Git 仓库基础操作 仓库基本管理 远程仓库管理 Git的基本概念/常用命令及实例 Git Commit message 编写指南 如何处理代码冲突 如何进行版本回退 如何进行分支合并 如何进行减少提交历史数量以及修改自己的commit中的邮箱 核武器级选项：filter-branc...
web-1.网页基础知识
weixin_30920853的博客
10-26 108
一．基本知识 JavaScript是目前最流行的脚本语言之一，他不仅可以直接用于HTML文档以获得交互效果或者其他的动态效果，还可以运行与服务器替代传统的CGI脚本程序。 TCP/IP是目前应用最广泛的网络通讯协议。 超文本：超文本的简称，是一种全局性的信息结构。它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。 超文本传输协议HTTP（HyperText Transf...
Servlet学习第三天 — 依次解决：Tomcat 404、初始化组件[Connector[HTTP/1.1-8080]]失败、javax.servlet不存在
NoNameMing的博客
05-28 5460
来源 RUNOOB.COM 各位大佬的博客 Mac下Hello Servlet步骤 JavaJDK 略 Tomcat 放置位置：/Library 打开顺序：cd /Library/Tomcat/bin/ 使用 ./startup.sh 开启 如果 Permission denied 那么 sudo chmod 755 *.sh 此时浏览器http://localhost:8080/ 会有那只...
用Python进行Web开发——基础介绍
strivequeen的博客
02-20 7316
1 Web 开发介绍2 HTTP协议简介3 HTML简介4 WSGI接口5 Web框架——Flask 1 Web 开发介绍 最早的软件都是运行在大型机上的，软件使用者通过“哑终端”登陆到大型机上去运行软件。后来随着PC机的兴起，软件开始主要运行在桌面上，而数据库这样的软件运行在服务器端，这种Client/Server模式简称CS架构。 随着互联网的兴起，人们发现，CS架构不适合Web，最大的原因是Web应用程序的修改和升级非常迅速，而CS架构需要每个客户端逐个升级桌面App，因此，Browser/Serv.
面试必问的http-1.3：http1.0-http1.1-http1.2区别
u010953880的专栏
04-29 3073
Http1.1 由于HTTP 1自身的局限性，它不能很好的为用户提供性能良好的WEB服务。 于1999年6月正式发布了HTTP1.1标准REC2616，它厘清了之前版本中很多有歧义的地方，而且还新增了很多重要的优化， 如持久连接、分块编码传输、状态码扩充、增强的缓存机制、传输编码及请求管道等。 1.持久连接 每个TCP连接在建立初期都需要进行三次握手，需要经历一次客户端与服务器间的完整往返，...
web开发快餐式入门指南 1.1 http
龙哥盟
02-25 3万+
由于web应用大多数都在浏览器中进行操作，所以我们有必要先了解一下浏览器里面到底发生了什么。简而言之，当你在浏览器的地址栏中输入网址并按下回车，或者点击了网页上的某个链接时，浏览器就会按照网址给目标服务器发送请求。浏览器和服务器之间的请求遵循http协议，协议规定了所使用的格式，只有按照这种格式组织的数据才能相互识别。具体来讲，浏览器先根据url中的主机部分通过dns查询出ip地址，然后组装http
edu--Web程序设计基础2021秋--【Web前端开发概述】【HTML5基础】
hannah2233的博客
11-18 2254
文章目录1 Web前端开发概述第1关：第2关：Web前端开发相关的技术web编程训练-html5-文档头部第1关：页面标题及字符集的设置第2关：元信息的设置第3关：link标签web知识训练-html5文档头部标签及属性第1关：web知识训练-html5文档头部标签及属性web知识训练-html5-文本控制类标签第1关：web知识训练-html5-文本控制类标签html5-文本控制类标签第1关：html5-网页背景及标题段落标签第2关：html5-水平线和换行的设置第3关：html5-文本修饰 1 Web前
WEB-1.1-Assignment-2
04-13
【标题】"WEB-1.1-Assignment-2" 是一个关于Web开发的作业，主要集中在使用表格和模板上。这个任务可能要求学生利用编程语言，特别是Python，来创建和处理网页上的表格以及使用模板系统来动态生成网页内容。 在Web...
Web1.1-databases
03-05
在IT领域，数据库是至关重要的组成部分，特别是在Web开发中。Web1.1-databases作业主要关注的是使用数据库来存储和管理Web应用中的数据。这里，我们将深入探讨与这个主题相关的几个关键知识点，包括HTML的基础、...
WEB-1.1-家庭作业-3-表格
02-17
在本作业"WEB-1.1-家庭作业-3-表格"中，我们将重点探讨如何在Web开发中使用表格，特别是在Python环境下。表格是网页中数据展示和交互的重要元素，对于用户界面的设计和数据管理至关重要。这个作业可能是针对初学者，...
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
HTML实现弹出层
最新发布
业精于勤荒于嬉，行成于思毁于随
08-11 508
位置。并排显示：某度上的图片代码：6.3.弹出层.html。
HTML - 简易版打字练习
Lushengshi的博客
08-09 787
纯html实现打字软件练习效果
Html实现全国省市区三级联动
qq_36973384的博客
08-02 658
关键技术：SpringBoot、Html、Jquery、js、ajax在网上找到的资料都比较乱，对于初学者来说，可能不太友好。以前，我刚开始学习Html的时候，也搞不清楚这个要怎么做，找了好久的资料都没法实现，就算是实现了，也没有完整的教程，现在实现了，整理好了，就想分享一下给每一位热爱编程的小伙伴。
Yii1.1与PHP5实战：敏捷Web开发详解
"应用Yii1.1和PHP5进行敏捷Web开发" 本文档是关于使用Yii1.1框架和PHP5进行敏捷Web开发的教程。Yii是一个高性能、基于组件的PHP框架，特别适合开发大型Web应用。它提倡生产力，强调代码复用，并提供了丰富的特性来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值