快速带你复习html（超详细）

Refeng 2023-03-28 原文

此内容包含：

html基础
列表、表格
媒体元素
表单（重点）

1、HTML 基础

目标：

会使用HTML5的基本结构创建网页
会使用文本相关标签排版文本信息
会使用图像相关标签实现图文并茂的页面
会使用标签创建超链接、锚链接及功能性链接

1.1、什么是HTML

HTML：Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等

1.2、发展史、优势

常见的网页编辑工具IDE：

记事本
NotePad++
Sublime
VsCode
WebStorm
HBuidler
IDEA
....

1.3、HTML基本结构

HTML网页基本结构

强调HTML标签都以“< >”开始、“</ >”结束
说明网页基本结构中这几个标签的用法
网页中所有的内容都放在之间

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是标题</title>
<meta charset="UTF-8">
<meta name="keywords" content="哈哈哈哈"/>
<meta name="description" content="哈哈哈哈"/>
</head>
<body>
</body>
</html>

1.4、网页的基本标签

1、标题标签

先讲解标题标签代码写法，说明标题标签在网页中的作用，通常用于标题或主题，体现标签语义
化。
h1最大，h6最小，对比效果图讲解
最后演示示例，演示效果图

<h1>热风</h1>
<h2>热风</h2>
<h3>热风</h3>
<h4>热风</h4>
<h5>热风</h5>
<h6>热风</h6>

2、段落标签

3、换行标签
换行标签，查看效果图,看段落标签和换行标签的不同

4、水平线标签

5、字体样式标签

6、注释和特殊符号
注释

特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊符号</title>
</head>
<body>
<!--空格-->
<p>
热风 Java<br/>
热风 Java<br/>
热风&nbsp;&nbsp;&nbsp;&nbsp;Java<br/>
</p>
<!--大于小于-->
<p>
> < <br>
&gt; &lt;
</p>
<!--引号-->
<p>
&quot;狂神&quot;
</p>
<!--版权-->
<p>
&copy; 2023 热风
</p>
<!--万能的公式 &符号+xxx -->
</body>
</html>

1.5、图像标签

常见的图像格式：jpg、gif、png、bmp、
说明JPG、gif是网页中最常用的格式，PNG受浏览器兼容性的限制
说明：

先讲解图像语法，对每个参数详细讲解，并且强调说明alt属性和title属性在什么情况下可以看到替
代文字和提示文字，并且说明alt属性常和src配合使用。
说明img标签的与之前学习的< br/>标签一样，不是成对的标签，直接在最后以“/”闭合，体现标签
的语义化。

1.6、链接标签

页面间链接：从一个页面链接到另外一个页面
锚链接
功能性链接
说明：
讲解语法，详细说明每个参数的用法，强调一下路径的表示方法，相对路径和绝对路径，说明target常用值为self和blank，还有其他值，以后用到再讲。
讲解给出的例子代码，一个文本超链接一个图像超链接
最后演示，只演示超链接效果即可，演示时更改target的参数，让学员看到目标窗口打开的不同位置。

总结：

2、列表、表格与媒体元素

2.1、列表

无序列表和定义列表在网页制作中应用非常广泛

什么是列表：
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

无序列表

<!--ul 声明无序列表-->
<ul>
<!--li 声明列表项-->
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>计算机</li>
</ul>

列表项中可以包含图片、文本，还可以嵌套列表、其他标签等
无序列表的特性

没有顺序，每个< li>标签独占一行（块元素）
默认< li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

有序列表

<!--ol 声明有序列表-->
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>计算机</li>
</ol>

有序列表默认以数字序号显示
有序列表与无序列表一样，也可以嵌套列表、可以包含图片、文本、其他标签等
有序列表的特性

有顺序，每个< li>标签独占一行（块元素）
默认< li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等

自定义列表

<!--dl 声明定义列表-->
<dl>
<!--dt 声明列表项-->
<dt>水果</dt>
<!--dd 定义列表项内容-->
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>

定义列表也可以嵌套列表、包含图片、文本、其他标签等
以后的网页制作中经常会用到定义列表，特别是图文混排的情况
定义列表的特性

没有顺序，每个< dt>标签、< dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况

小结：列表对比
列表之间可以互相嵌套，进行页面的局部布局

2.2、表格

为什么使用表格

简单通用
结构稳定
基本结构
单元格
行
列

表格的基本语法

<!--table表格标签-->
<table border="1px">
<!--tr 行标签-->
<tr>
<!--td 单元格标签-->
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>

表格的跨列

<table>
<tr>
<!--colspan 所跨的列数-->
<td colspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......
</table>

表格的跨行

<table >
<tr>
<!--rowspan 所跨的行数-->
<td rowspan="n">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

表格的跨行和跨列

<tr>
<!--跨列-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!--跨行-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>

总结：

3、表单

3.1、表单语法

method: 规定如何发送表单数据常用值：get post
在实际网页开发中通常采用post方式提交表单数据
action: 表示向何处发送表单数据
<form method="post" action="result.html">
<p>名字：<input name="name" type="text" > </p>
<p>密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>

讲解表单的创建方法，以及method和action的作用
分别把method的值设置为get和post，然后提交表单，查看页面效果；通过演示可看到method设置不同值时，表单数据在地址栏显示的不同情况
最后根据演示情况说明get和post两者的区别
最后总结：post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采
用post方式提交表单数据。

3.2、13个表单元素

1、文本框

<!--type="text"
name：文本框名称(必填)
value：文本框初始值
size：文本框长度
maxlength：文本框可输入最多字符
-->
<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>

2、密码框
向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示。

<!--type="password"
name：密码框名称(必填)
size：密码框长度
-->
<input type="password" name="pass" size="20"/>

3、单选按钮
同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥

<!--type="radio"
name：单选框名称(必填)，一组的名称需要相同
checked：单选按钮选中状态
value：单选框的值
-->
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女

4、复选框
同一组复选框，根据需要可设置name属性值相同

<!--type="checkbox"
name：复选框名称(必填)，一组的名称需要相同
checked：复选按钮选中状态
value：复选框的值
-->
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

5、下拉列表框
一个<select>中至少包含一下<option>
希望在页面加载时有默认选中的选中项，则必须使用selected属性，如果没有默认选中项则第一个选项默认被选中；演示时改变size的值和selected默认值，看到显示效果，加深对这两个属性的理解。

<!--select:下拉列表框-->
<!--option：选项-->
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>

6、按钮

<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮">
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮">
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮"/>
<!--图片按钮-->
<input type="image" src="images/login.gif" />

7、多行文本域
改变cols和rows的值，让学员看到由于这两个值的改变，文本框内容显示的改变。强调多行文本域的内容是在标签之间。

textarea：多行文本域
cols：显示的列数
rows：显示的行数
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>

8、文件域
在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。未来文件上传和下载会详细讲解，现在了解即可！

enctype：表单编码属性
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>

9、邮箱
会自动验证Email地址格式是否正确

邮箱:<input type="email" name="email"/>
<input type="email" name="email"/>

10、网址
会自动验证URL地址格式是否正确

请输入你的网址:<input type="url" name="userUrl"/>

11、数字

min：最小值
max：最大值
step：步长
请输入数字:<input type="number" name="num" min="0" max="100" step="10"/>

13、搜索框
type值为search即为搜索框。

请输入搜索的关键词:<input type="search" name="sousuo"/>

3.3、表单的高级应用

在某些注册页面或本图片中订单信息页面，必须同意一些条款按钮才能使用等等

隐藏域
在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
<input type="hidden" value="666" name="userid">
只读、禁用

W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略

讲解只读和禁用的语法，强调不能单写readonly或disabled，
必须写readonly＝”readonly”和disabled=“disabled”，介绍只读和禁用的使用场合
<input name="name" type="text" value="张三" readonly>
<input type="submit" disabled value="保存" >

表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上

<!--它的for属性对应的id与表单元素id一致-->
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

表单初级验证的方法

placeholder
提示语默认显示，当文本框中输入内容时提示语消失

<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>

required
规定文本框填写内容不能为空，否则不允许用户提交表单

<input type="text" name="username" required/>

pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel" required pattern="^1[358]\d{9}" />

3.4 小结

复习 html gt lt code Html/Css

有关快速带你复习html（超详细）的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
Matlab imread（）读到了什么（浅显当复习文档了） - 2
matlab打开matlab，用最简单的imread方法读取一个图像clcclearimg_h=imread('hua.jpg');返回一个数组（矩阵），往往是a*b*cunit8类型解释一下这个三维数组的意思，行数、数和层数，unit8：指数据类型，无符号八位整形，可理解为0~2^8的数三个层数分别代表RGB三个通道图像rgb最常用的是24-位实现方法，即RGB每个通道有256色阶（2^8）。基于这样的24-位RGB模型的色彩空间可以表现256×256×256≈1670万色当imshow传入了一个二维数组，它将以灰度方式绘制；可以把图像拆分为rgb三层，可以以灰度的方式观察它figure(1
在VMware16虚拟机安装Ubuntu详细教程 - 2
在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主
ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。最佳答案这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2
我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315
ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2
考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://