HTML标签及初识浏览器

最新推荐文章于 2024-07-12 20:49:16 发布

玛卡巴卡x

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量190

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_50796134/article/details/116034931

版权

总目录

html标签
浏览器

html标签

声明

声明 <!DOCTYPE>必须是 HTML 文档的第一行，位于标签之前。声明<!DOCTYPE>不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中有三种 <!DOCTYPE> 声明:Strict、Transitional 和 Frameset。而在 HTML5 中只有一种：<!DOCTYPE html>
对于中文网页需要使用 <meta charset="utf-8">声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为<meta charset="gbk">

基础标签

<html>:HTML 页面的根元素
<head>:包含了文档的元（meta）数据，如定义网页编码格式为 utf-8
<title>:定义了网页标题
<body>:定义了 HTML 文档的主体
<p>: 定义了 HTML 文档中的一个段落
<h1>~<h6>:定义文章标题,<h1> 定义最大的标题。<h6> 定义最小的标题。h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
：定义注释

基本格式标签

在这里插入图片描述

表格标签

在这里插入图片描述
补充：

-<cellpadding>:创建单元格内容与其边框之间的空白
-<Cell spacing>:增加单元格之间的距离
-<align>:使用"left" “right”"middle"使单元格左，右，居中

具体实例：

<h4>表头：</h4>
    <table cellpadding="5" border="4" cellspacing="5" >
    <caption>标题</caption>
    <tr>
      <th align="left">姓名</th>
      <th colspan="2">电话</th>
    </tr>
    <tr>
      <td align="left">Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
    </table>

运行结果：
在这里插入图片描述

列表标签

在这里插入图片描述

1.有序标签：

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

2.无序标签：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

3.定义列表：

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

超链接标签

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

href引号后是要链接的网址，target:定义打开超链接位置（如果把链接的 target 属性设置为 “_blank”，该链接会在新窗口中打开。)Visit W3School!为链接文本，其中"链接文本" 不必一定是文本，图片或其他 HTML 元素都可以成为链接。

表单标签

在这里插入图片描述
补充：

输入类型：

<input type="password"> 定义密码字段
<input type="radio">`： 单选按钮输入
<input type="submit">` ：提交按钮
<input type="checkbox"> 定义复选框。
<input type="number"> 用于应该包含数字值的输入字段。
<input type="date"> 用于应该包含日期的输入字段。根
据浏览器支持，有些输入字段时会弹出日期选择器。
<input type="range"> 用于应该包含一定范围内的值的输入字段。
<input type="month"> 允许用户选择月份和年份。
<input type="email"> 用于应该包含电子邮件地址的输入字段。根据
浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
<input type="tel"> 用于应该包含电话号码的输入字段。

<form action="action_page.php">:action 属性定义在提交表单时执行的动作。通常，表单会被提交到 web 服务器上的网页。这样写则指定了某个服务器脚本来处理被提交表单
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">：method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）。当使用 GET 时，表单数据在页面地址栏中是可见的；POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。如果表单数据包含敏感信息或个人信息，请务必使用 POST！
target 属性：
autocomplete属性:属性规定表单是否应打开自动完成功能。启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
<select> 元素:下拉列表：value后的值是可选项，元素定义待选择的选项。

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<button> 元素：定义可点击的按钮，结果会在页面弹出一个显示框，显示onclick后的内容。

`<button type="button" onclick="alert('Hello World!')">Click Me!</button>`

<datalist> 元素：为 <input> 元素规定预定义选项列表。

 <form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

在这里插入图片描述

readonly 属性规定输入字段为只读
maxlength 属性规定输入字段允许的最大长度
autocomplete 属性规定表单或输入字段是否应该自动完成

图片标签

<img src="boat.gif" alt="Big Boat" width="50" height="50" align ="left">

alt属性后是图片显示不出来时的图标
width height 设置图片的宽高
align 设置图片浮动至段落的左边或右边。

多媒体

1.插入html对象

1.<embed> 也定义了 HTML 文档中的嵌入式对象。
(1)元素可用于在 HTML 中包含 HTML：
<embed width="100%" height="500px" src="snippet.html">
(2)元素可显示嵌入网页中的 MP3 文件：
<embed height="100" width="100" src="song.mp3" />
（3）元素可显示嵌入网页中图片
<object data="audi.jpeg"></object>
2.<object> 元素也定义 HTML 文档中的嵌入式对象。
它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，
但也可以用于将 HTML 包含在 HTML 中
当然这两个元素还有其他用法，在这不做过多介绍。

2.插入音频

（1）使用 `<embed>` 元素
<embed height="100" width="100" src="song.mp3" />
（2）使用 <object> 元素
<object height="100" width="100" data="song.mp3"></object>
（3）使用 HTML5 <audio> 元素

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。
（4）最好的 HTML 解决方法

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
使用了两个不同的音频格式。HTML5 <audio> 元素会尝试
以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。
（5）简单的方法：雅虎媒体播放器
<a href="song.mp3">Play Sound</a>
注意使用时要在后面加上
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

3.插入视频

（1）使用 <embed> 标签
<embed src="movie.swf" height="200" width="200"/>
（2）使用 <object> 标签
<object data="movie.swf" height="200" width="200"/>
（3）使用 <video> 标签

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
（5）最好的 HTML 解决方法
HTML 5 + <object> + <embed>
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>
（6）优酷解决方案
如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

浏览器

浏览器特性

（1）网络
浏览器通过网络模块下载各种资源，如：HTML文档、JavaScript代码、样式表、图片、音频视频文件等。网络模块是浏览器最重要的模块之一。
（2）资源管理
浏览器通过高效的管理机制来管理网络资源和本地资源。比如如何避免重复下载资源、缓存资源等。
（3）网页浏览
浏览器最核心的功能。浏览器通过网络下载资源，并从资源管理器获得资源，然后将其转化为可视化结果。
（4）多页面管理
浏览器支持多页面浏览，因此支持多页面同时加载。浏览器需要多页面管理机制来解决例如多页面的相互影响和安全等问题。
（5）插件和扩展
现代浏览器的重要特征。插件可以用来显示网页特定内容；扩展则是增加浏览器新功能的软件或压缩包。
（6）账户和同步
现代软件的普遍特性。浏览器将用户的浏览信息，例如历史记录、书签等信息同步到服务器，提供多系统下的统一体验。
（7）安全机制
现代软件的重要特性。浏览器的安全机制需要提供一个安全的浏览环境，例如：避免用户信息被窃取或破坏、防止浏览器被恶意代码攻破等。
（8）开发者工具
开发者工具是浏览器提供给网页开发者的工具，可以帮助审查HTML元素、调试JavaScript代码、改善网页性能等。

浏览器结构

目前，常用的浏览器主要有：Chrome、IE（Edge）、Safari、Firefox等。不同的浏览器在结构方面虽然有所差异，但是整体的设计理念是相似的。
在这里插入图片描述

浏览器控制台

开发者工具中的控制台(Console)主要是用来显示网页加载过程中产生各类信息。
如何打开控制台
（1）按F12或者点右键找到审核元素
（2）找到工具栏中console标签，切换到该标签
（3）在最下方有一个光标闪烁的地方，在哪里可以写自己的代码。
引用：
1.w3shool.
2. 现代浏览器工作原理（一）.
3.如何用浏览器控制台执行代码.

玛卡巴卡x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签及初识浏览器

总目录html标签声明基础标签基本格式标签表格标签列表标签超链接标签表单标签html标签声明声明 <!DOCTYPE>必须是 HTML 文档的第一行，位于标签之前。声明<!DOCTYPE>不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中有三种 <!DOCTYPE> 声明:Strict、Transitional 和 Frameset。而在 HTML5 中只有一种：<!DOCTY
复制链接

扫一扫