一、脚本

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

<script> 标签

<script> 标签用于定义客户端脚本,<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

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

实例:

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

显示如下:

<noscript> 标签

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

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容:

二、字符实体

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

实体

在 HTML 中,某些字符是预留的,如不能使用小于号(<)和大于号(>),因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体。 字符实体类似这样:

&entity_name;

&#entity_number;

如需显示小于号,我们必须这样写:&lt; 或 < 或 <

不间断空格

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

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

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。一些变音符号, 如 尖音符 (  ̀) 和 抑音符 (  ́) 。

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

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

 字符实体(实体名称对大小写敏感)

三、URL

URL 是一个网页地址,可以由字母组成,或互联网协议(IP)地址: 192.68.0.1。

大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。

语法规则如下:

scheme://host.domain:port/path/filename
  • scheme - 定义因特网服务的类型。最常见的类型是 http、https
  • host - 定义域主机(http 的默认主机是 www)
  • domain - 定义因特网域名,比如 runoob.com
  • :port - 定义主机上的端口号(http 的默认端口号是 80)
  • path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
  • filename - 定义文档/资源的名称

一些常见的 URL scheme:

http      超文本传输协议         不加密

https    安全超文本传输协议  加密所有信息交换

ftp        文件传输协议             用于将文件下载或上传至网络

file                                          计算机上的文件

URL 字符编

URL 只能使用 ASCII字符集

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。

完整的 URL 编码参考:URL 字符集

四、速查列表

基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

基本标签

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6> <p>这是一个段落。</p>
<br> (换行)
<hr> (水平线)
<!-- 这是注释 -->

文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong> <abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
<sub> (下标文本)
<sup> (上标文本)

链接

普通的链接:<a href="http://www.example.com/">链接文本</a>
图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
书签:
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

<ul>
<li>项目</li>
<li>项目</li>
</ul>

有序列表

<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

定义列表

<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>

表格

<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>

框架

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

表单

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea> </form>

实体

&lt; 等同于 <
&gt; 等同于 >
© 等同于 ©

<ul><li>项目</li><li>项目</li></ul>

HTML 基础(六)的更多相关文章

  1. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  2. C#_02.15_基础六_.NET类

    C#_02.15_基础六_.NET类 一.类继承是一个类在另一个类的基础上进行的扩展. 继承的子类拥有父类的全部成员.索引子类拥有本身的全部成员以及父类的全部成员. 可以对基类成员进行隐藏,如果必须的 ...

  3. {Django基础六之ORM中的锁和事务}一 锁 二 事务

    Django基础六之ORM中的锁和事务 本节目录 一 锁 二 事务 一 锁 行级锁 select_for_update(nowait=False, skip_locked=False) #注意必须用在 ...

  4. day 71 Django基础六之ORM中的锁和事务

    Django基础六之ORM中的锁和事务   本节目录 一 锁 二 事务 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 锁 行级锁 select_for_update(no ...

  5. day 58 Django基础六之ORM中的锁和事务

      Django基础六之ORM中的锁和事务   本节目录 一 锁 二 事务 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 锁 行级锁 select_for_update( ...

  6. Django基础六之cookie和session

    Django基础六之cookie和session 目录 Django基础六之cookie和session 1. cookie和session介绍 1.1 cookie 简介 1.2 cookie的缺陷 ...

  7. <Android基础> (六) 数据存储 Part 1 文件存储方式

    第六章 数据存储 6.1 持久化技术 持久化技术指将内存中的瞬时数据保存到存储设备中,保证即使在手机或电脑关机的情况下,这些数据仍然不会丢失. 主要有三种方式用于简单地实现数据持久化功能:文件存储.S ...

  8. mybatis入门基础(六)----高级映射(一对一,一对多,多对多)

    一:订单商品数据模型 1.数据库执行脚本 创建数据库表代码: CREATE TABLE items ( id INT NOT NULL AUTO_INCREMENT, itemsname ) NOT ...

  9. java基础(六) switch语句的深入解析

    引言   switch 语句是非常的基础的知识,掌握起来也不难掌握,语法比较简单.但大部分人基本是知其然,不知其所以然.譬如 早期JDK只允许switch的表达式的值 int及int类型以下的基本类型 ...

  10. java基础(六)-----String性质深入解析

    本文将讲解String的几个性质. 一.String的不可变性 对于初学者来说,很容易误认为String对象是可以改变的,特别是+链接时,对象似乎真的改变了.然而,String对象一经创建就不可以修改 ...

随机推荐

  1. mysql 常用获取时间sql语句

    --当年第一天: SELECT DATE_SUB(CURDATE(),INTERVAL dayofyear(now())-1 DAY); --当年最后一天: SELECT concat(YEAR(no ...

  2. Spring Cloud Gateway 实现Token校验

    在我看来,在某些场景下,网关就像是一个公共方法,把项目中的都要用到的一些功能提出来,抽象成一个服务.比如,我们可以在业务网关上做日志收集.Token校验等等,当然这么理解很狭隘,因为网关的能力远不止如 ...

  3. 使用JS检测自定义协议是否存在

    [该博客是拼接他人的,原因我们这边PC的开发人员问我,有没有关于js某个对象直接能检测手机或者电脑的自定义协议的,我上网搜了下,貌似移动端的解决比较多] 最终解决方案:还是需要github上面大神写的 ...

  4. 01-初识InfluxDB

    初识InfluxDB 1. InfluxDB介绍 时间序列数据库,简称时序数据库,Time Series Database,一个全新的领域,最大的特点就是每个条数据都带有Time列. 时序数据库到底能 ...

  5. Flutter json 2 model with Built Value

    Flutter json 2 model with Built Value Flutter中json转换model, 除了手动转之外, 就是利用第三方库做一些代码生成. 流行的库有: json_ser ...

  6. 《JavaScript 模式》读书笔记(2)— 基本技巧3

    这是基本技巧的最后一篇内容,这篇内容示例代码并不多.主要是概念比较多一点. 编码约定 确定并一致遵循约定比这个具体约定是什么更为重要. 一.缩进 无论是使用tab还是空格,只要是一致遵循的,是什么并不 ...

  7. SpringBoot 集成MQTT配置

    目录 1. 前言 2. MQTT介绍 3. SpringBoot 集成MQTT 3.1 导入mqtt库 3.2 配置MQTT订阅者 3.3 配置MQTT发布者 3.4 MQTT消息处理和发送 3.4. ...

  8. 网络安全从入门到精通 (第二章-1) Web安全前端基础

    本文内容: 前端是什么? 前端代码 HTML CSS JS !!!醋成酒的小墨,促成就的小墨,小墨促成就,!!! 1,前端是什么? 网站一般用两部分组成,前端负责展示,后端负责处理请求. 2,前端代码 ...

  9. VS2019 C++动态链接库的创建使用(1) - 创建使用dll

    静态库:函数和数据被编译进一个二进制文件,通常扩展名为.lib,在使用静态库的情况下,在编译链接可执行文件时,链接器从库中复制这些函数和数据并把它们和应用程序的其它模块组合起来创建最终的可执行文件. ...

  10. Netty Hello World 入门源码分析

    第一节简单提了什么是网络编程,Netty 做了什么,Netty 都有哪些功能组件.这一节就具体进入 Netty 的世界,我们从用 Netty 的功能实现基本的网络通信开始分析 各个组件的使用. 1. ...