前端三件套分别是HTML3，CSS5，JavaScript
稍微介绍一下W3C标准：
HTML是超文本标记语言，负责网页最基本信息的构造
HTML的优势：
我们使用的工具依旧选择老朋友：
因为内容过多，大部分内容可能都在代码中详细介绍，请仔细阅读代码
下面我们稍微介绍以下HTML的基本框架：
<!--告诉浏览器我们使用的标准规范-->
<!DOCTYPE html>
<html lang="en">
<!--表示网页头部开始-->
<head>
<!-- meta 描述性标签，用来描述网页的一些信息：例如作用等 -->
<meta charset="UTF-8">
<meta charset="keywords" content="第一天学习HTML">
<meta charset="description" content="我们在这里学习HTML">
<!-- title 标题，表示我们打开网页后的标题 -->
<title>我的第一个网页</title>
</head>
<!--body 表示网页内容开始-->
<body>
<!--内容-->
Hello，World！
</body>
</html>
其中<></>这种成对出现的标签，我们称为开放标签和闭合标签
其中<>这种单个出现的标签，我们称为单个标签
我们简单介绍一下块元素和行内元素：
下面给出页面结构分析：
| 元素名 | 描述 |
|---|---|
| header | 标记头部区域的内容 |
| footer | 标记脚部区域的内容 |
| section | Web页面中一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用 |
| nav | 导航类辅导内容 |
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<!--表示头部-->
<head>
</head>
<!--表示独立板块-->
<section>
</section>
<!--表示脚部-->
<footer>
</footer>
</body>
</html>
网页基本信息：
| 代码 | 说明 |
|---|---|
| <!-- --> | 注释；用来注解内容，不被编译器读取 |
| <h1></h1> | 大标题；分为h1~h6 |
| <P></p> | 分段符号； |
| <br> | 换行符号; |
| <hr> | 水平线符号; |
| <strong></strong> | 加粗符号； |
| <em></em> | 斜体符号； |
| &~~~~； | 特殊符号格式； |
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页基本标签</title>
</head>
<body>
<!--我们从这里依次介绍各种标签-->
<!--标题标签：成对标签；h开头，h1~h6依次为n级标题-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--然后我们介绍段落标签：成对标签；p-->
<!--用段落标签后，段与段自动换行且有明显距离-->
<p>1</p>
<p>2</p>
<p>3</p>
<!--如果不是用段标签，即使在HTML代码中分段，网页中也不显示分段-->
1
2
3
<!--接下来我们介绍换行标签：单个标签；br-->
<!--换行标签使内容换行，但其本质还是在一段中，且间隔较小-->
<p>-----------------</p>
1 <br>
2 <br>
3 <br>
<!--接下来介绍水平线标签：单个标签；hr-->
<!--水平线标签随着页面的大小改变大小，随时充斥整个页面-->
<hr>
<!--然后我们稍微介绍两个字体样式标签，因为我们的字体样式主要在css中写出，这里仅简单介绍即可-->
<!--粗体；成对标签；strong-->
<!--斜体：成对标签；em-->
<h1>字体样式标签</h1>
<p>粗体：<strong>我是粗体</strong></p>
<p>斜体：<em>我是斜体</em></p>
<!--最后我们介绍一些特殊符号：空格，大于，小于-->
<!--我们先说一下格式：&~~~；-->
<p>空格： 空格</p>
<p>大于：></p>
<p>小于：<</p>
</body>
</html>
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
我们先给出图像格式：<img src="" alt="" title="" width="" height="">
img：图像标签
src:表示图像地址，可以写绝对地址，也可以写相对地址（推荐）
相对地址中返回上一级的标志是：../
alt:表示图像名称，当图像不显示时，直接打出图像名称
title：当鼠标移动上去时出现的名称
width：宽度
height：高度
-->
<img src="../../Resources/picture/1.jpeg" alt="纱雾老师" title="点击查看" width="300" height="300">
</body>
</html>
链接类标签分为三种：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--
我们先给出链接标签的整个格式：<a href="" target="">链接文本/图像</a>
href:链接路径，后面可以跟本机所创建的网页或者互联网上可查找网页；且可以附带其锚链接
target：在哪个窗口打开；目前我们仅需要了解两种窗口：_blank新窗口，_self本窗口（默认）
1.超链接：
直接使用上方链接格式即可
2.锚链接：
需要提前用id设置锚点，然后在后续需要跳转位置采用<a>中的#id来跳转
3.功能性链接：
用于与其他设备链接，例如：mailto是指邮箱
-->
<!--设置锚点-->
<a id="Top">Top</a>
<!--1.超链接-->
<p>
<a href="E:\编程内容\HTML\code\第一部分\1.我的第一个网页.html" target="_self">点击进入我的第一个网页</a>
<a href="https://www.baidu.com/" target="_blank">点击进入百度</a>
</p>
<!--2.锚链接-->
<a href="#Top">点击返回顶部</a>
<!--3.功能性链接-->
<a href="mailto:3206154701@qq.com">点击与邮箱交互</a>
</body>
</html>
列表的定义：
列表的分类：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--列表标签分为三种：有序列表，无序列表，自定义列表-->
<!--1.有序列表：
<ol></ol>
<li></li>
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>Web</li>
</ol>
<hr>
<!--2.无序列表：
<ul></ul>
<li></li>
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>Web</li>
</ul>
<hr>
<!--3.自定义列表：
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
-->
<dl>
<dt>我是小标题</dt>
<dd>我是列表1</dd>
<dd>我是列表2</dd>
</dl>
</body>
</html>
使用表格的好处：
表格的组成以及HTML中的格式：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--表格格式：
<table></table>是基本表格框架， 其他内容需要在框架里面写(这里提前涉及到：border表示边框，这里设置边框宽度border="1px"表示边框为1像素)
<tr></tr>:行
<td></td>:列，需要写在行中
colspan="n":表示跨列，跨n列
rowspan=“n”：表示跨行，跨n行
-->
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
视频元素：
<video src="" ></video>
音频元素：
<audio src="" ></audio>
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体标签</title>
</head>
<body>
<!--媒体标签：我们这里仅介绍：视频和音频
视频格式：<video src="" ></video>
音频格式：<audio src="" ></audio>
controls：表示控制面板，我们需要在媒体标签中加入，才可以显示控制面板
autoplay：表示自动播放，默认情况下需要手动播放
-->
<!--视频-->
<video src="E:\编程内容\HTML\Resources\video\1.mp4" controls autoplay></video>
<!--音频-->
<audio src="E:\编程内容\HTML\Resources\audio\1.mp3" controls autoplay></audio>
</body>
</html>
表单作用：
表单组成：
表单域是一个包含表单元素的区域
表单域格式：
<form action="" method="" name=""></form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指出接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单的名称，用来区分同一页面的多个表单 |
最常用的表单挂件：<input type="属性值”>
我们先介绍input内置元素：
| 元素 | 说明 |
|---|---|
| type="" | 表示input类型 |
| value="" | 表示input的值（内置文本） |
| name="" | 表示input的姓名（用于同一类） |
| checked="" | 表示被选中 |
| maxlength="" | 表示最大长度 |
我们再来介绍以下input的属性包括哪些：
| 属性值 | 说明 |
|---|---|
| button | 定义可点击按钮（配合js使用） |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮，负责上传文件 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，输入内容不可见 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，点击后重置表单内所有内容 |
| submit | 定义提交按钮，点击后将数据发送至后台 |
| text | 定义单行输入的字段，默认20字节 |
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
表单标签form
含有三种属性：
action=“url地址”：用于指定接收并处理表单数据的服务器程序的url地址
method=“post/get”：提交方法
name=“”：表单名称，以便于区分
-->
<form action="#" method="post" name="表单域名称">
<!--1.<input>
格式：<input type="">
type：属性值
name:表单元素名称
value：表单元素默认内容
checked：默认被选中
maxlength：内容最大值
-->
<!-- text文本，用于正常书写-->
姓名：<input type="text" value="请输入姓名">
<br>
<!-- password隐藏文本，用于书写密码-->
密码：<input type="password" >
<br>
<!-- radio单选框，用于多选一，需要配合name使用-->
性别： 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex">
<br>
<!-- checkbox多选框，用于多选，也需要配合name使用-->
爱好： 吃饭 <input type="checkbox" name="like"> 睡觉 <input type="checkbox" name="like"> 打豆豆 <input type="checkbox" name="like">
<br>
<!-- button普通按钮，后期搭配js使用;可以使用value定义显示内容-->
<input type="button" value="点击发送二维码">
<br>
<!-- file上传文件-->
<input type="file" >
<br>
<!-- reset重置按钮，点击后表单内所有内容重置;可以使用value定义显示内容-->
<input type="reset" value="重新填写">
<!-- submit点击提交，点击后把内容上传给action中；可以使用value定义显示内容-->
<input type="submit" value="免费注册">
</form>
</body>
</html>
label标记可以连接其他元素（常用于与button，checkbox，radio等点击性标签使用）
label格式：
<!--for对应其id值-->
<label for="~~~">内容</label>
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label标签</title>
</head>
<body>
<!--当点击相同for和id的label属性时，会相当于点击id属性-->
<label for="button">点击我为后面button画勾</label>
<input type="checkbox" id="button">
</body>
</html>
select可以单独形成下拉表单
select格式：
<!-- 可以在里面加上selected=“selected”表示默认选择-->
<select>
<option selected="selected"></option>
<option></option>
<option></option>
</select>
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select标签</title>
</head>
<body>
<!--
select作为一个框架
option作为折叠选项
可在option选项中加入selected=“selected”将其设为默认选项
-->
请选择性别：
<select>
<option selected="selected">请选择</option>
<option>男</option>
<option>女</option>
</select>
</body>
</html>
textare负责创建一大片文本域，用于大规模的书写
textare格式：
<!--x，y分别表示 一行字数 和 行数--->
<textarea cols="x" rows="y">
这里面写入文本域默认显示
</textarea>
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textare</title>
</head>
<body>
<!--textare
cols：表示可输入的一行内容（不推荐使用，一般在css设置）
rows：表示存在多少列（不推荐使用，一般在css设置）
文本默认文字可以直接在里面书写
-->
<form>
<textarea cols="50" rows="5">
这里面写入文本域默认显示
</textarea>
</form>
</body>
</html>
下面给出案例图，请依照案例图写出相关代码：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例</title>
</head>
<body>
<!--第一步我们获得大标题-->
<h4>青春不常在，抓紧谈恋爱</h4>
<!--我们下面的内容排列整齐，这里需要采用表格实现-->
<!--表格分为n行2列-->
<table width="1000px">
<!-- 第一行：姓名 单选框 带有label的字-->
<tr>
<td>姓名:</td>
<td>
<input type="radio" name="sex" id="man"> <label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
</td>
</tr>
<!-- 第二行：生日 下拉列表-->
<tr>
<td>生日：</td>
<td>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option selected="selected">请选择年份</option>
</select>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected="selected">请选择月份</option>
</select>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected="selected">请选择日期</option>
</select>
</td>
</tr>
<!-- 第三行 所在地区 text带value-->
<tr>
<td>所在地区:</td>
<td><input type="text" value="填写地区"></td>
</tr>
<!-- 第四行：婚姻状况 单选框-->
<tr>
<td>婚姻状况</td>
<td><input type="radio" name="family"> 未婚 <input type="radio" name="family"> 已婚 <input type="radio" name="family"> 离婚 </td>
</tr>
<!-- 第五行：学历 text-->
<tr>
<td>学历：</td>
<td><input type="text"></td>
</tr>
<!-- 第六行：喜欢的类型 多选框-->
<tr>
<td>喜欢的类型:</td>
<td><input type="checkbox" name="love"> 可爱的 <input type="checkbox" name="love"> 妖娆的 <input type="checkbox" name="love"> 放荡的 <input type="checkbox" name="love"> 都喜欢 </td>
</tr>
<!-- 第七行：自我介绍 textare框-->
<tr>
<td>自我介绍：</td>
<td><textare>自我介绍</textare></td>
</tr>
<!-- 免费注册的submit标签-->
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<!-- 同意注册条款-->
<tr>
<td></td>
<td><input type="checkbox">我同意注册条款并遵守</td>
</tr>
<!-- 我是会员，跳转页面立即登录-->
<tr>
<td></td>
<td><a href="#">我是会员，立即登录</a></td>
</tr>
<!-- 承诺条款：采用标题和无序列表完成-->
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
好的，关于HTML的介绍就到这里了，恭喜你迈进了前端的第一步！
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我打算为ruby脚本创建一个安装程序，但我希望能够确保机器安装了RVM。有没有一种方法可以完全离线安装RVM并且不引人注目(通过不引人注目，就像创建一个可以做所有事情的脚本而不是要求用户向他们的bash_profile或bashrc添加一些东西)我不是要脚本本身，只是一个关于如何走这条路的快速指针(如果可能的话)。我们还研究了这个很有帮助的问题:RVM-isthereawayforsimpleofflineinstall?但有点误导，因为答案只向我们展示了如何离线在RVM中安装ruby。我们需要能够离线安装RVM本身，并查看脚本https://raw.github.com/wayn
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习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)'
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
我想用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
考虑一下:现在这些情况:#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://
背景here.在上面的链接中，给出了以下示例:classauthor.id)endend除了这种语法对于像我这样的初学者来说很陌生——我一直认为类方法是用defself.my_class_method定义的——我在哪里可以找到关于类的文档RubyonRails中的方法？据我所知，类方法总是在类本身(MyClass.my_class_method)上调用，但如果Rails中的类方法是可链接的，似乎必须进行其他操作在这里!编辑:我想我通过对类方法的语法发表评论有点被骗了。我真的想问Rails如何使类方法可链接—我了解方法链接的工作原理，但不知道Rails如何允许您链接类方法而无需实际返