HTML世界之第三重天

这篇具有很好参考价值的文章主要介绍了HTML世界之第三重天。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、HTML 列表

1.无序列表

2.有序列表

3.自定义列表

4.列表标签

二、HTML div 和span

1.区块元素

2.内联元素

3.div 元素

4.span 元素

5.HTML 分组标签

6.div 和 span 的区别

三、HTML 表单和输入

1.HTML 表单

2.HTML 表单 - 输入元素

3.输入类型 - 文本域(Text Fields)

4.输入类型 - 密码字段

5.输入类型 - 单选按钮(Radio Buttons)

6.输入类型 - 复选框(Checkboxes)

7.输入类型 - 提交按钮(Submit)

四、HTML 框架

1.iframe语法

2.iframe - 设置高度与宽度

3.iframe - 移除边框

4.使用 iframe 来显示目标链接页面

五、HTML 颜色

六、HTML 脚本

1.script 标签

2.noscript 标签

3.脚本标签

七、HTML 字符实体

1.HTML 实体

2.不间断空格(Non-breaking Space)

3.结合音标符

 八、HTML 统一资源定位器(Uniform Resource Locators)

1.URL - 统一资源定位器

2.常见的 URL Scheme


一、HTML 列表

HTML 支持有序、无序和定义列表

1.无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

2.有序列表

有序列表是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

3.自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

4.列表标签

标签

描述

<ol>

定义有序列表

<ul>

定义无序列表

<li>

定义列表项

<dl>

定义列表

<dt>

自定义列表项目

<dd>

定义自定列表项的描述

二、HTML div 和span

HTML 可以通过 <div> 和 <span>将元素组合起来。

1.区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例: <h1>, <p>, <ul>, <table>

2.内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

3.div 元素

HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

4.span 元素

HTML <span> 元素是内联元素,可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

5.HTML 分组标签

标签

描述

<div>

定义了文档的区域,块级 (block-level)

<span>

用来组合文档中的行内元素, 内联元素(inline)

6.div 和 span 的区别

<div> 是块级元素,它独占一行,可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构,例如页面的主体区域、容器、布局等;默认样式为块级显示,会以块的形式占据可用空间;可以容纳其他块级元素和行内元素,包括其他的 <div> 和 <span> 元素。

<span> 是行内元素,它不会独占一行,宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹;默认样式为行内显示,它不会独占一行,只占据其内容的宽度;通常被用来包裹文本或其他行内元素,比如用来设置特定文本的样式。

注:<div> 用于创建页面结构和布局,<span> 用于对文本或行内元素进行样式化或包裹,在页面设计和样式设置中有不同的用途和作用。

三、HTML 表单和输入

HTML 表单用于收集用户的输入信息。表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

<form> 元素用于创建表单,action 属性定义了表单数据提交的目标 URL,method 属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。

<label> 元素用于为表单元素添加标签,提高可访问性。

<input> 元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型,id 属性用于关联 <label> 元素,name 属性用于标识表单字段。

<select> 元素用于创建下拉列表,而 <option> 元素用于定义下拉列表中的选项。

1.HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。

使用 <form> 标签来创建表单

实例

<form>

.

input 元素

.

</form>

2.HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签 <input>。

输入类型是由 type 属性定义。

3.输入类型 - 文本域(Text Fields)

文本域通过 <input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

以下实例创建了一个表单,包含两个输入框:

<form action="">

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

注:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。

4.输入类型 - 密码字段

密码字段通过标签 <input type="password"> 来定义:

实例

<form>

Password: <input type="password" name="pwd">

</form>

Password注意:密码字段字符不会明文显示,而是以星号 * 或圆点 . 替代。

5.输入类型 - 单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单的单选框选项:

实例

<form action="">

<input type="radio" name="sex" value="male">男<br>

<input type="radio" name="sex" value="female">女

</form>

6.输入类型 - 复选框(Checkboxes)

<input type="checkbox"> 定义了复选框。

复选框可以选取一个或多个选项:

实例

<form>

<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>

<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车

</form>

7.输入类型 - 提交按钮(Submit)

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

实例

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

以上实例中有一个 method 属性,它用于定义表单数据的提交方式,可以是以下值:

post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。

get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.baidu.com/?page=1,这里的 page=1 就是 get 方法提交的数据。

四、HTML 框架

1.iframe语法

<iframe src="URL"></iframe>

该URL指向不同的网页。

2.iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是可以指定其按比例显示 (如:"80%")。

实例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

3.iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

实例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

4.使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面

目标链接的属性必须使用 iframe 的属性,如下实例:

实例

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.baidu.com" target="iframe_a" rel="noopener">BAIDU.COM</a></p>

五、HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。

六、HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

1.script 标签

<script> 标签用于定义客户端脚本,比如 JavaScript。

<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!":

实例

<script> document.write("Hello World!"); </script>

2.noscript 标签

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容:

实例

<script> document.write("Hello World!") </script> <noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

3.脚本标签

标签

描述

<script>

定义了客户端脚本

<noscript>

定义了不支持脚本浏览器输出的文本

七、HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。

1.HTML 实体

在 HTML 中,某些字符是预留的。不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。要想正确地显示预留字符,必须在 HTML 源代码中使用字符实体(character entities)。

字符实体类似这样:

&entity_name;或&#entity_number;

如需显示小于号,必须这样写:&lt; 或 &#60; 或 &#060;

注: 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

2.不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格(&nbsp;)。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用&nbsp;字符实体。

3.结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如 尖音符和 抑音符。

变音符号可以出现字母的上面和下面,或者字母里面,或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

 八、HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。可以由字母组成,如"baidu.com",或互联网协议(IP)地址: 192.68.20.50。

1.URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

当点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

一个网页地址实例: http://www.baidu.com/html/html-tutorial.html

语法规则:

scheme://host.domain:port/path/filename

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http

host - 定义域主机(http 的默认主机是 www)

domain - 定义因特网域名,比如 runoob.com

:port - 定义主机上的端口号(http 的默认端口号是 80)

path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

filename - 定义文档/资源的名称

2.常见的 URL Scheme

Scheme

访问

用于...

http

超文本传输协议

以 http:// 开头的普通网页。不加密。

https

安全超文本传输协议

安全网页,加密所有信息交换。

ftp

文件传输协议

用于将文件下载或上传至网站。

file

您计算机上的文件。文章来源地址https://www.toymoban.com/news/detail-833742.html

到了这里,关于HTML世界之第三重天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端html学习笔记

    目录 一、文本标签 1. 单标签 2. 双标签 3. 重要的信息往下面放(自行判断) 4. 不重要的信息往下面放(自行判断) 二、图片标签 三、路径 1. 绝对路径 2.相对路径 (1) 同级目录: (2) 下级目录: (3) 上级目录 四、音频标签 五、视频标签 六、链接标签 1. target: 七、列表标签

    2024年01月24日
    浏览(49)
  • 前端基础---HTML笔记汇总一

    HTML定义 HTML超文本标记语言—— H yper T ext M arkup L anguage。 超文本是什么? 链接 标记是什么? 标记也叫标签,带尖括号的文本 标签分类 单标签 :只有 开始标签 ,没有 结束标签 ( br换行 hr水平线 img 图像标签 ) 双标签 : 成对出现 的标签(但凡需要包裹内容的都是双标签 因为需

    2024年02月11日
    浏览(52)
  • 2023前端面试笔记 —— HTML5

    内容 链接 2023前端面试笔记 HTML5 HTML5作为最新的HTML标准,为前端开发带来了许多新的特性和功能。在前端面试中,HTML5的知识和应用已经成为了必备的技能。本篇文章将总结HTML5的 重要知识点和常见面试题 ,帮助读者更好地准备前端面试,提升自己的竞争力。 HTML 超文本标记

    2024年02月11日
    浏览(56)
  • 前端学习心得笔记之一(HTML篇)

    对于python爬虫、数据分析等等一些实用技能的学习,小编思考良久,觉得前端知识的学习无比重要。就先去学习HTML的基础知识,希望可以帮到读者学习和了解HTML。 一个网页由哪些部分组成(网页标准)? (一)、结构:HTML (二)、表现:CSS  了解HTM (三)、行为:JavaS

    2024年02月22日
    浏览(50)
  • 前端开发1:HTML

    在现代互联网的世界中,网页是我们与世界沟通的窗口。而HTML(超文本标记语言)作为网页的基石,扮演着至关重要的角色。在本篇博客中,我将向你介绍HTML的基本概念、语法以及一些常用的HTML标签。 HTML是一种标记语言,用于描述网页的结构和内容。它由一系列的标签组

    2024年01月18日
    浏览(51)
  • Html + Jquery + Vue前端学习笔记

    输入框里的值变了,data里的查询参数也会跟着变,这就是vue的绑定 @keyup.enter.native 这个代表键盘的回车事件,一般用来做查询 clearable 代表可清空 看一下整体效果 some方法判断数组中是否包含某个值 div富文本显示,u3000代表空格 上移,下移,删除,添加 控制两个按钮切换变

    2024年02月12日
    浏览(41)
  • Web前端开发:HTML、CSS

    在介绍Web网站工作流程的时候提到, 前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序 ,如下图所示: 1.   网页有哪些部分组成 ? 文字、图片、音频、视频、超链接、表格等等。 2.  我们看到的网页,背后的本质是什么 ? 程序员写的前端

    2023年04月18日
    浏览(41)
  • 【计算机编程语言】HTML-前端基础知识

    学习网站:https://jquery.cuishifeng.cn/index.html HTML5+CSS3 1.1什么是HTML Hyper Text Markup Language - (超文本标记语言) 超文本:文字、图片、音频、视频、动画等 W3C:World Wide Web Consortium - 万维网联盟 - 中立性技术标准机构 W3C标准 结构 化标准语言(HTML、XML) 表现 标准语言(CSS) 行为

    2024年02月15日
    浏览(66)
  • h5(html5)+css3前端笔记二

    一、表格标签 表格的主要作用: 表格主要用于 显示、展示数据 ,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 1. table/table 用来定义表格的标签

    2024年02月14日
    浏览(65)
  • 30个HTML+CSS前端开发案例(完结篇)

    相关代码及其图片素材,持续更新中。。。

    2024年02月09日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包