Web学习笔记 HTML(二)

最新推荐文章于 2024-11-14 15:33:48 发布
最新推荐文章于 2024-11-14 15:33:48 发布
阅读量5.2k 收藏 2
点赞数 1
分类专栏： web学习笔记 文章标签： html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Late_whale/article/details/105027413
版权

文章目录

本文参考：W3school

HTML 块

HTML元素大概分为两类：

  • 一类是块级元素，块级元素在浏览器显示时，会在其前后都加上一行，常见的有<div>,<h1>, <p>, <ul>, <table>
  • 另一类是内联元素，内联元素在显示时前后不会加一行，常见的有<b>, <td>, <a>, <img>

块级元素—div

  • HTML <div>是一个很重要的(如果有css的话)块级元素，它是用于组合其他HTML元素的容器
  • <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

内联元素—span

  • HTML <span>是内联元素，可用作文本的容器
  • 当与css一同使用时， <span>用于为文本设置样式等

HTML 类

  • 在HTML中用class代表类，<p class=“cities”>代表该p属于cities类
  • 将不同的HTML部分划分为不同的类，方便我们对不同的类设置CSS样式
  • 前面讲到的div可以和类结合起来使用，如<div class=“cities”>此时可以指定css给div中所有元素，如图将两个div划分为同一类并指定css样式
    在这里插入图片描述
  • 将span和class结合使用，如<span class=“red”>，上面已经讲到了为所有class名相同的元素指定css，这里就讲一种只为某种元素的class指定css方法
    在这里插入图片描述

HTML 布局

网页也可以像杂志、报纸等一样布局
在这里插入图片描述

HTML 布局—div

  • div因其定位容易，常用于布局工具
  • 对div元素id定位需用#+id值
    在这里插入图片描述

HTML 布局—HTML5

  • 后续在HTML5学习笔记里再讲

HTML 响应式web设计

响应式web设计(Responsive Web Design）：

  • RWD 能够以可变尺寸传递网页
  • RWD 对于平板和移动设备是必需的
  • 简单来说，RWD就是让网页内容随网页大小变化而变化

RWD—float

  • 在加float之后发现显示出来的网页会随网页大小变化
    在这里插入图片描述
    在这里插入图片描述
  • css float：float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。若向左浮动，则会直到它碰到边框为止

RWD—Bootstrap

  • 需要引入Bootstrap中的css，div以及class需要按Bootstrap中的命名，有点麻烦
  • 效果
    在这里插入图片描述

HTML 框架

  • 使用框架可以在同一个浏览器窗口中不止显示一个页面
  • 每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架的缺点

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签<frameset>

  • frameset定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积
  • 示例
    在这里插入图片描述

框架标签<frame>

  • frame 标签定义了放置在每个框架中的 HTML 文档。
  • 通常在frame中src属性中指定html链接
  • 示例
    在这里插入图片描述

注意

  • 使用框架时，需要为不支持框架的浏览器添加 <noframes> 标签。
    在这里插入图片描述
  • 不能将<body></body> 标签与<frameset></frameset> 标签同时使用，文字只能嵌套在<body>中，<body>只能嵌套在<noframes>中
  • 防止用户拖动边框，在frame中加noresize=“noresize” 如 <frame src="/example/html/frame_a.html" noresize="noresize" />
    在这里插入图片描述

更多示例

行列混合框架
在这里插入图片描述
不可拖动边框
在这里插入图片描述
导航框架
在这里插入图片描述

HTML 内联框架

内联框架用于在网页中显示网页，效果如图
在这里插入图片描述

代码如下，有兴趣的可以试试

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>

<iframe src="https://blog.csdn.net/Late_whale/article/details/104944097" height="360px" width="50%"></iframe>

<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>


</body>
</html>

iframe

基本使用

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

设置内联网页的宽度和高度，单位可以是像素值也可以是百分比

<iframe src="URL" width="200" height="200"></iframe>

设置边框不可见：将属性frameborder值设为0

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

将链接在内联框架中显示，链接的 target 属性必须引用 iframe 的 name 属性

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>

<iframe src="https://blog.csdn.net/Late_whale/article/details/104944097" height="360px" width="50%"
frameborder="0" name="iframe_a"></iframe>

<p><a href="http://www.baidu.com" target="iframe_a">百度一下</a></p>

</body>
</html>

在这里插入图片描述

HTML 背景

  • 这里所说的背景是整个网页(body)的背景
  • body有两个配置背景的标签，背景可以是颜色或图像

bgcolor

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<!--将背景设为黑色-->
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

background

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<!--如果图片和网页不在同一个文件夹需要在前面给出其路径-->
<body background="1.png">
<body background="2.gif">

HTML 脚本

script

  • <script> 标签用于定义客户端脚本，比如 JavaScript。
  • script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
  • 必需的 type 属性规定脚本的 MIME 类型。

利用JavaScript输出简单的hello world

<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script> 
</body>
</html>

在这里插入图片描述

noscript

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

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

  • 只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

示例

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML 头部

head

  • <head> 元素是所有头部元素的容器。
  • <head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
  • 以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

title

  • title标签用于定义文档的标题。
  • title 元素在所有 HTML/XHTML 文档中都是必需的。
  • title 元素的作用：
    • 定义浏览器工具栏中的标题
    • 提供页面被添加到收藏夹时显示的标题
    • 显示在搜索引擎结果中的页面标题

style

  • style标签用于为 HTML 文档定义样式信息。

    <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

link

  • link标签定义文档与外部资源之间的关系。

  • link常用于连接样式表(css)

    <head>
<link rel="stylesheet" type="text/css" 	href="mystyle.css" />
</head>

meta

  • meta标签提供关于 HTML 文档的元数据。
  • 元数据不会显示在页面上，但是对于机器是可读的。
  • meta常用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据
  • 有些浏览器会根据meta的name、content属性(两者用于描述网页)来索引网页

HTML 字符实体

  • 在HTML中有些字符已经被预留来供HTML使用
  • 在HTML中不能使用大于’>'小于’<‘，会被当做标签
  • 如果需要正确使用HTML预留字符就需要使用到HTML字符实体

常用字符实体

效果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
’撇号&apos; (IE不支持)&#39;
￠分（cent）&cent;&#162;
£镑（pound）&pound;&#163;
¥元（yen）&yen;&#165;
€欧元（euro）&euro;&#8364;
§小节&sect;&#167;
©版权（copyright）&copy;&#169;
®注册商标&reg;&#174;
™商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

更多实体符号

HTML URL

  • URL（Uniform Resource Locator） 统一资源定位器，也称为网址
  • URL 可以是域名，也可以是ip地址

URL的语法规则：scheme://host.domain:port/path/filename

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

HTML URL字符编码

  • URL 编码会将字符转化为可通过因特网传输的格式
  • web浏览器通过URL从web服务器请求界面，URL只能用ASCII码来通过因特网进行发送，而URL常常会含有除ASCII码之外的字符，所以需要转化
  • URL编码使用%加两位十六进制数来替换非ASCII码
  • URL使用+来代替空格

查看更多URL编码 URL编码

HTML 颜色

颜色是由红色、绿色、蓝色混合而成

颜色值

  • 颜色由一个十六进制符号来定义，这个符号由红色、绿色、蓝色的值组成（RGB）
  • 每种颜色最小值为0(十六进制：#00)，最大值255(十六进制：#FF)
  • 部分颜色效果及其值
    在这里插入图片描述

颜色名

大多数的浏览器都支持颜色名集合。

常见颜色名 颜色值 效果

HTML 表单

HTML表单用于搜集不同类型的用户输入

form

  • form标签用于定义HTML表单
  • HTML表单包含表单元素，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等

input元素

  • input元素是最重要的表单元素
  • input元素有很多类型(后续讲解)

<input type=“text”>

text类型的input元素，常用于文本输入的单行输入

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

在这里插入图片描述

<input type=“radio”>

radio类型的input元素，用于在有限数量中选择一个

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

在这里插入图片描述

<input type=“submit”>

submit类型的input元素，用于定义提交表单的按钮

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

在这里插入图片描述

action属性

action属性用于定义提交表单时执行的动作

将用户输入提交(需要点击submit按钮)到action_page.php进行处理的代码如下

<form action="action_page.php">

method属性

method属性规定提交表单时所用的http方法(get/post)

采用get方法

<form action="action_page.php" method="GET">

采用post方法

<form action="action_page.php" method="POST">

get方法

  • 不指定action时，默认使用的方法是get
  • get方法适用于被动提交表单
  • get方法安全性较低，数据在地址栏是可见的
  • get方法适合少量数据的提交

post方法

  • 安全性较高，数据在地址栏中是不可见的
  • post方法适用于正在更新数据时使用

name属性

如果需要输入的数据能正确地被提交，则需为每个字段设置一个name属性

<input type="text" name="lastname" value="Mouse">

此时服务器接受到的信息为lastname=Mouse

fieldset

  • fieldset标签用于组合表单中的相关信息
  • legend标签用于为fieldset定义标题
    在这里插入图片描述

HTML 表单元素

input元素

上面已经讲解过了，这里就不在累述

select元素

select元素用于定义下拉列表

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

在这里插入图片描述

option元素定义下来列表中的选项，通常列表中的首项默认选中，也可以通过selectd属性来定义选中项

<option value="fiat" selected>Fiat</option>

textarea元素

textarea元素定义多行输入字段（文本域）

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

在这里插入图片描述

button元素

button元素定义可点击的按钮

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

在这里插入图片描述

HTML 输入类型

输入类型：text

<input type=“text”> 定义供文本输入的单行输入字段

输入类型：password

<input type=“password”> 定义密码字段

在这里插入图片描述

输入类型：submit

<input type=“submit”> 定义提交表单数据至表单处理程序的按钮

输入类型：radio

<input type=“radio”> 定义单选按钮

输入类型：checkbox

<input type=“checkbox”> 定义复选框

在这里插入图片描述

输入类型：button

<input type=“button”> 定义按钮

HTML input属性

value 属性

value属性规定输入字段的初始值

<input type="text" name="firstname" value="John">

在这里插入图片描述

readonly 属性

readonly 属性规定输入字段为只读（不能修改)

<input type="text" name="firstname" value="John" readonly>

在这里插入图片描述

disabled 属性

disabled 属性规定输入字段是禁用的被禁用的元素是不可用和不可点击的,不会被提交。

<input type="text" name="firstname" value="John" disabled>

在这里插入图片描述

size 属性

size 属性规定输入字段的尺寸（以字符计）

<input type="text" name="firstname" value="John" size="40">

在这里插入图片描述

maxlength 属性

maxlength 属性规定输入字段允许的最大长度

最多只能输入10字符

<input type="text" name="firstname" maxlength="10">

在这里插入图片描述

HTML 多媒体

  • 在web中多媒体指的是音效、音乐、视频和动画

多媒体格式

  • 多媒体元素存储在媒体文件中
  • 通常通过查看媒体文件扩展名来确定媒体文件的类型，如图片一般是.jpg或.png，视频一般为.avi或.wmv

HTML 对象

object 元素

  • <object>的作用是支持 HTML 助手
  • <object>用于加载HTML 助手

HTML 助手

  • HTML助手也称为插件、辅助应用程序
  • 辅助应用程序是可由浏览器启动的程序
  • 辅助应用程序可用于播放音频和视频等多媒体元素

HTML 音频

在HTML中播放音频的方法有很多，这里简单介绍几种

<object>

object可用于播放多媒体，用法如下


<object height="100" width="100" data="音频url"></object>

在这里插入图片描述
缺陷：

  • 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
  • 如果用户的计算机未安装插件，无法播放音频。

最简单的播放音频方法

使用雅虎播放器来帮助我们播放音频，它支持很多格式

<a href="音频url">需要显示的文字</a>
<!--下面这句JavaScript必须加-->
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

在这里插入图片描述
注意：

  • 雅虎播放器会每个多媒体元素提供一个播放按钮
  • 当点击该按钮时，会弹出完整播放器

使用超链接

如果网页使用指向多媒体文件的超链接，则大多数浏览器会使用“辅助程序”来播放该文件

<a href="url">Play the sound</a>

在这里插入图片描述

内联声音

  • 网页中含有声音的称为内联声音
  • 最好不要使用内联声音，让用户需要的自己点击播放

HTML 视频

HTML 视频大多和HTML 音频一样

<object>

object可用于播放多媒体，用法如下


<object height="100" width="100" data="视频url"></object>

缺陷：

  • 如果浏览器不支持该文件格式，没有插件的话就无法播放该视频。
  • 如果用户的计算机未安装插件，无法播放视频。

雅虎播放器

使用雅虎播放器来帮助我们播放视频，它支持很多格式

<a href="视频url">需要显示的文字</a>
<!--下面这句JavaScript必须加-->
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

注意：

  • 雅虎播放器会每个多媒体元素提供一个播放按钮
  • 当点击该按钮时，会弹出完整播放器

使用超链接

如果网页使用指向多媒体文件的超链接，则大多数浏览器会使用“辅助程序”来播放该文件

<a href="url">Play the sound</a>

内联视频

  • 网页中含有视频的称为内联视频
  • 最好不要使用内联视频，让用户需要的自己点击播放

最后

可以关注一下我的公众号，最近开始写公众号，我会在上面分享一些资源和发布一些csdn上发布不了的干货
在这里插入图片描述

点个关注是对博主最大的支持

Late whale
关注
专栏目录
HTML 基础
2201_75396444的博客
04-17 230
标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。<dl>
20190527 HTML class属性 学习笔记
Aurora_2019的博客
05-27 242
HTML的<class>属性的作用是为有着相同’<class>' 值的元素赋予相同的格式。以下是一段定义<class>的代码。 <!doctype html> <html> <head> <style> .cities{ color:white; background-color:tomato; text-a...
HTML类
gloria_chenjing的博客
10-28 307
1、和 HTML中分为块级元素（block level element）和内联元素（inline element） 属于块级元素，没有特殊的含义，与css联合使用，可以对大的类容块设置样式 如class 属于内联元素，也没有特殊含义，与css一起使用，可以对部分样本设置样式。 2、类 举例： .cities{     background-color:blue;
初识HTML（十一）——类
weixin_45927758的博客
07-08 224
1.分类块级元素——<div></div>标签可以获得块状显示，是块级元素，可以作用于其他容器 <!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body&
使用div样式给块级数据定义样式
rolic_的博客
07-11 1136
1、使用div样式给块级数据定义样式&lt;html&gt; &lt;head&gt; &lt;style&gt; .cities{ background-color:black; color:White; margin:20px; padding:20px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;di...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
超详细的web前端基础学习笔记
06-28
本学习笔记涵盖了 web 前端开发的基础知识，包括 HTML 的基本结构、文档类型声明、常见的文本和列表标签、分区标签以及图片标签的使用方法。对于初学者而言，这些内容是构建网页的基础，而掌握这些基础知识是进一步...
浅谈jQuery模拟12306城市选择框的实现
筱葭的博客
12-29 1810
#parent{ width:500px; position:relative; } #text{ height:25px; } #select{ width:420px; height:185px; position:absolute; top:30px; left:0; border:1px sol
cities:第一次HTML和CSS试用
05-24
城市仓库 HTML和CSS网页，其中包含来自世界各地的多个城市的信息。 大多数信息均摘自 网页： 伦敦
HTML-块和类
grace666的专栏
12-03 1179
1.块元素 （1）大多数 HTML 元素被定义为块级元素或内联元素。 （2）块级元素在浏览器显示时，通常会以新行来开始（和结束），比如：, , , 2.内联元素 （1）在显示时通常不会以新行开始，例如：, , , 3.元素 （1）HTML 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 （2） 元素没有特定的含义，除此之外，由于它属于块级
web第十一讲，div与span
m0_47670683的博客
12-10 3073
内容提要 DIV标记的基本用法、常用属性。 DIV嵌套与层叠的含义。 SPAN标记的语法，灵活使用SPAN标记。 DIV与SPAN标记在使用上的差异。DIV用于多行的、大片区的；SPAN用于行内标记。 使用DIV+CSS进行和简易页面布局。 HTML块级元素 块级元素(block level element)在浏览器显示时通常会以新行开始。 例如：<h1>、<p&...
w3school之HTML学习笔记
weixin_30359021的博客
08-24 166
由于html标记语言是网页自动化测试所必须要掌握的，所以重新学习html语言（这似乎是我第四次学习html，这次得坚持了）,这次归纳总结了下，希望能帮助到大家。 学习网址：http://www.w3school.com.cn/html/html_intro.asp HTML 指的是超文本标记语言 (Hyper Text Markup Language)，用来描述网页的。...
HTML----类
qq_43778935的博客
02-07 844
HTML中的类是为了我们在样式设置时，方便使用的。 通过类可以将多个标签设置为相同的样式，也可以将标签中特定的类设置为特定的样式。 1、为不同标签使用相同样式 示例 <!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px;
HTML常用标签含义及对应中英文
大叔很坑的博客
12-23 7889
标签标签含义英文英文含义备注h标题headline标题 p段落paragraph段落 hr水平分割线horizontal rules水平分割线 b加粗bold加粗/粗体 strong加粗(强调语
HTML中常见的标签及意义(一)
June的专栏
11-02 8865
1：标签：双标签，网页的标志及开始，内容写在这个标签内； 2：标签：双标签，html的头标签，一些设置的东西写到这里边； 3：标签：双标签，html的内容部分，展示内容写到这里边； 4：标签：双标签，网页的标题； 5：标签：单标签，元标签，设置字符集等内容； 6：标签：单标签，单独一行的横线； 7：标签：单标签，单独另起一行； 8：标签：单标签，加载的图片，内部可以嵌套 width
HTML 标签说明
tongzhuo1220的博客
10-29 847
超文本 web是一个超文本文件的集合 超文本文件是web的基本组成单元，也称为网页或HTML文档，web页等，通常以 .html或 .htm为后缀的文件 web页之间通过超文本中的超级链接组织在一起 HTML 超文本标记语言，一种纯文本类型的语言 使用带有尖括号的“标记”网页中的内容逐一标识出来 用来设计网页的标记语言 由浏览器解释执行 HTML页面上可以嵌套脚本语言编写...
前端（1）——快速入门HTML
最新发布
m0_63086198的博客
11-14 768
参考： W3school 1. HTML 我使用的是vs code，在使用之前，先安装以下几个插件： Auto Rename Tage HTML CSS Support Live Server 1.1 HTML标签 HTML全称是Hypertext Markup Language(超文本标记语言) HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键 字。 标签通常成对出现，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值