1.认识HTML

奶油裙子 2023-09-28 原文

一、基础认知

目标：认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建一个网页。

1.1 认识网页

（1）网页由哪些部分组成？
答：文字、图片、音频、视频、超链接
（2）咱们程序员的代码是通过什么软件转换成网页的？
答：浏览器

1.2.1 五大浏览器

浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌（Chrome）、Safari浏览器、欧朋浏览器（Opera）

1.2.2 渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
注意点：渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

1.3.1 为什么需要Web标准？

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

1.3.2 Web标准的构成

Web标准中分成三个构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

2.1.1HTML的概念

HTML中文译为：超文本标记语言

2.2.2HTML页面固定结构

HTML骨架结构由哪些标签组成？
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

2.3.1 为什么使用VS Code?

前端开发神器---速度快、体积小、插件多、完全免费
开发工具有很多：Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder

2.3.2 VS Code创建网页的步骤

（1）双击打开VS Code软件
（2）将代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
！+ 回车 HTML骨架
快捷键：Alt+B 打开默认浏览器

3.1.1 什么是注释？

问题：程序员在代码中添加的注释，是为了给谁看的？
答：下次的阅读代码者（自己或者其他程序员）
注释的快捷键：
在VS Code中：ctrl+/ (再按一次取消注释)

3.2.1 HTML标签的结构

1.标签的结构图：

<strong>文字要加粗</strong>
开头标签包裹的内容结束标签

2.结构说明

（1）标签<、>、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母成为标签名
（2）常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
（3）少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
（需要确定开始位置、结束位置，一般是双标签；不需要确定开始位置、结束位置的为单标签）

3.4.1HTML标签与标签之间的关系可分为：

（1）父子关系（嵌套关系）

<head>
    <title></title>
</head>

（2）兄弟关系（并列关系）

<head></head>
<body></body>

二、HTML标签学习

目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发

1、排版标签

1.1.1标题标签

1.代码：h系列标签

<h1>1级标签<h1>
<h2>2级标签<h2>
<h3>3级标签<h3>
<h4>4级标签<h4>
<h5>5级标签<h5>
<h6>6级标签<h6>
选中三个1 先选中1，ctrl+d两次

2.语义：1-6级标题，重要程度依次递减

3.特点：

文字都有加粗
文字都有变大，并且从h1 $\rightarrow$ h6文字逐渐减小
独占一行

1.2.1段落标签

场景：在新闻和文章的页面中，用于分段显示
代码：<p>我是一段文字</p>
语义：段落
特点：

段落之间存在间隙
独占一行
ps:如果出现这种，查看-自动换行

1.3.1 换行标签

场景：让文字强制换行显示
代码：<br>
语义：换行
特点：

单标签
让文字强制换行

1.4.1 水平线标签

场景：分割不同主题内容的水平线
代码：<hr>
语义：主题的分割转换
特点：

单标签
在页面中心显示一条水平线

2.1文本格式化标签的介绍

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

语义：突出重要性的强调语境（单词这组标签）

3、媒体标签

3.1.1 图片标签介绍

代码：<img src=" " alt=" "> （src=" "标签属性，src属性名，" "属性值）
场景：在页面中显示图片
特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置

3.1.2 属性注意点：

1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
路径：./是当前文件夹，可加可不加
3.1.3 图片标签的alt属性
属性名:alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

 <img src="cat.gif" alt="这是一只猫">

3.1.4 图片标签的title属性
属性名：title
属性值：提示文本
当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

<img src="cat.gif" alt="这是一只猫" title="这是title文字，鼠标悬停的时候显示">

3.1.5 图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当图片可能会变形

 <!-- width和height属性只需要给出一个值，另一个等比例缩放，好处是图片不会变形 -->
    <img src="cat.gif" alt="这是一只猫" title="这是title文字，鼠标悬停的时候显示" width="200">

3.2.1 路径的介绍

场景：页面需要加载图片，需要先找到对应的图片
路径可分为：

（1）绝对路径

绝对路径指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：盘符开头：D：\day01\images\1.jpg
完整的网络地址：https://mini.eastday.com/nsa/n230412150949254.html?qid=02034

（2）相对路径（常用）

概念普及：
当前文件：当前的html网页
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径的分类：
(1)同级目录

<img src="cat.gif" alt="">
<img src="./cat.gif" alt="">

(2)下级目录

 <img src="img/dog.gif" alt="">

(3)上级目录
1.先出当前文件夹，到上级目录 $\rightarrow$ ../
2.此时看到目标文件直接喊她 $\rightarrow$ 直接写上目标文件

<img src="../cat.jpg" alt="">

3.3.1 音频标签的介绍

代码：<audio src=" " controls></audio>
场景：在页面中插入音频
常见属性：

属性名	功能
src	音频路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意点：音频标签目前支持三种格式：MP3、Wav、Ogg

<audio src="../rescours/day01/01-案例/images/music.mp3" controls autoplay loop></audio>

3.4.1 视频标签
代码：<vedio src="./video.mp4" controls></video>
场景：在页面中插入视频
常见属性：

属性名	功能
src	视频路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop	循环播放

注意点：视频标签目前支持三种格式：MP4、WebM、Ogg

4、链接标签

4.1 链接标签

代码：<a href="./目标网址.html">超链接</a>（目标网址不确定，通常用#占位）
称呼：a标签、超链接、锚链接
场景：点击之后，从一个网页跳转到另一个网页
特点：双标签，内部可以包裹内容；
如果需要a标签点击之后去指定页面，需要设置a标签的href属性

4.2链接标签的target属性

属性名：target
属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

index.html首页面

5、列表标签

目标：能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建

5.1 无序标签

场景：在网页中表示一组无顺序之分的列表，如：新闻列表
标签组成：

标签名	说明
ul	表示无序列的整体，用于包裹li标签
li	表示无序列的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示圆点标识
注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容

<ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

运行结果：

5.2 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜
标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹标签
li	表示有序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示序号标识
注意点：
ol标签中只允许包含li标签
li标签可以包含任意内容

<ol>
        <li>张三：100</li>
        <li>李四：99</li>
</ol>

运行结果：

5.3自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现
标签组成：

标签名	说明
dl	显示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对性主题的每一项内容

显示特点：dd前会默认显示缩进效果
注意点：
dl标签只允许包含dt/dd标签
dt/dd标签可以包含任意内容

 <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>

运行结果：

6、表格标签

目标：能够使用表格相关标签和属性，实现网页中表格结构的搭建

6.1 表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

表格相关属性
场景：设置表格基本展示效果

6.2常见相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意：实际开发时针对样式效果推荐用CSS设置

    <!-- table 包含 tr,tr 包含 td -->
    <table border="1" width="500" height="300">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

运行结果：

6.3表格标题和表头单元格标签

场景：在单元格中表示整体大标题和一列小标题
其他标签：

标签名	名称	说明
caption	表示大标题	表示表格整个大标题，默认在表格整体顶部居中位置显示
th	表示单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100分</td>
            <td>真棒，第一名</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99分</td>
            <td>真棒，第二名</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

运行结果：

6.4 表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
结构标签：

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意点：表格结构标签内部用于包裹tr标签
表格的结构标签可以省略

6.5 合并单元格

场景：将水平或垂直多个单元格合并成一个单元格
跨行合并（垂直合并成一个）
跨列合并（水平合并成一个）
合并单元格步骤：
1.明确合并哪几个单元格
2.通过左上原则，确定保留谁删除谁

上下合并 $\rightarrow$ 只保留最上的，删除其他
左右合并 $\rightarrow$ 只保留最左的，删除其他

3、给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多行的单元格水平合并

注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
       <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
       </thead>
       <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">100分</td>
                <td>真棒，第一名</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>真棒，第二名</td>
            </tr>
       </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>

运行结果：

7、表单标签

目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

7.1 input系列标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input

input标签可以通过type属性值的不同，展示不同效果

type属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

<!-- 写什么 就显示什么 -->
    文本框：<input type="text">
    <br>
    <!-- 书写的内容就会变成点点显示 -->
    密码框：<input type="password">
    <br>
    单选框：<input type="radio">
    <br>
    多选框：<input type="checkbox">
    <br>
    上传文件：<input type="file">

运行结果：

7.2 input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：

属性名	说明
placeholder	占位符，提示用户输入内容的文本

    <input type="text" placeholder="请输入用户名">
    <br>
    <input type="password" placeholder="请输入密码">

运行结果：

7.3 input系列标签-单选框

场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：

属性名	说明
name	分组，有相同name属性值的单选框为一组，一组中同时只能由一个被选中
checked	默认选中

注意点：name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中

 性别：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女

运行结果：

7.4input系列标签-文件选择

场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：

属性名	说明
multiple	多文件选择

7.5 input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件
type属性值：

标签名	type属性值	说明
input	submit	提交按钮，点击之后提交数据给后端服务器
input	reset	重置按钮，点击之后恢复表单默认值
input	button	普通按钮，默认无功能，之后配合js添加功能

注意点：如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
使用form标签之后，重置标签才有作用
value=" " 可以在按钮上显示文字

<form action="">
        用户名：<input type="text">
        <br>
        <br>
        密码：<input type="password">
        <br>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>

运行结果：

7.6 buttom按钮标签

场景：在网页中显示用户点击的按钮
标签名：buttom
type属性值（同input的按钮系列）：

标签名	type属性值	说明
buttom	submit	提交按钮，点击之后提交数据给后端服务器
buttom	reset	重置按钮，点击之后恢复表单默认值
buttom	buttom	普通按钮，默认无功能，之后配合js添加功能

注意点：谷歌浏览器中buttom默认是提交按钮
buttom标签是双标签，更便于包裹其他内容：文字、图片等

<button type="reset">重置</button>

7.6select下拉菜单标签

场景：在网页中提供多个选项的下拉菜单表单控件
标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

常见属性：
selected:下拉菜单的默认选中（不设置就默认选中第一个option）

    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>深圳</option>
        <option>广州</option>
    </select>

7.7 textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：

cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数

注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐使用CSS设置

<textarea cols="60" rows="30"></textarea>

7.8 label标签

场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法：
方法一：（1）使用label标签把内容（如：文本）包裹起来
（2）在表单标签上添加id属性
（3）在label标签的for属性中设置对应的id属性值
方法二：（1）直接使用label标签把内容（如：文本）和表单标签一起包裹起来
（2）需要把label标签的for属性删除即可

    性别：
    <input type="radio" name="sex" id="nan" checked><label for="nan">男</label>
    <label><input type="radio" name="sex">女</label>

8、语义化标签

目标：能够认识开发中常用的没有语义布局标签（div、span）和有语义的布局标签

8.1 没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

<body>
    普通文字
    <div>这是div标签</div>
    <div>这是div标签</div>
    <span>这是span标签</span>
    <span>这是span标签</span>
</body>

运行结果：

8.2 有语义的布局标签（移动端手机网页制作）

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意：以上标签显示特点和div一致，但是比div多了不同的语义

8.3 字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替换
结构：&英文;
常见字符实体：

显示结果	描述	实体名称
	空格

综合案例1学生信息表：

<body>
    <table border="1" width="500" height="300">
        <caption><h3>优秀学生信息表格</h3></caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年二班</td>
            </tr>
            <tr>
                <td>赵四</td>
                <td>120</td>
                <td>三年三班</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>评语</td>
                <td colspan="3">你们都很优秀</td>
            </tr>
        </tfoot>
    </table>
</body>

运行结果：

综合案例2表单：

<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form>
        昵称：
        <input type="text" placeholder="请输入昵称">
        <br>
        <br>
        性别：
        <label><input type="radio" name="sex">男</label>
        <label><input type="radio" name="sex">女</label>
        <br>
        <br>
        所在城市：
        <select>
            <option>上海</option>
            <option>北京</option>
            <option>深圳</option>
            <option>广州</option>
        </select>
        <br>
        <br>
        婚姻状况：
        <label><input type="radio" name="marry">未婚</label>
        <label><input type="radio" name="marry">已婚</label>
        <label><input type="radio" name="marry">保密</label>
        <br>
        <br>
        喜欢的类型：
        <label><input type="checkbox" checked>可爱</label>
        <label><input type="checkbox" checked>性感</label>
        <label><input type="checkbox">御姐</label>
        <label><input type="checkbox">萝莉</label>
        <label><input type="checkbox">小鲜肉</label>
        <label><input type="checkbox">大叔</label>
        <br>
        <br>
        个人介绍：
        <br>
        <textarea cols="60" rows="10"></textarea>
        <br>
        <br>
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <input type="checkbox">我同意所有条款
        <br>
        <br>
        <input type="submit" value="免费注册">
        <button type="reset">重置</button>
    </form>
</body>

运行结果：

HTML 认识 td gt lt

有关1.认识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)'
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://
ruby-on-rails - 我需要从 HTML 转到 markdown，有什么建议吗？ - 2
我正在使用Maruku，将Markdown(超集)转换为HTML，你知道我该怎么做才能从HTML转换为Markdown吗？最佳答案 Google发现了一个名为reverse_markdown的ruby脚本.它似乎可以满足您的需求。关于ruby-on-rails-我需要从HTML转到markdown，有什么建议吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/175162
ruby - 使用 Nokogiri 和 Ruby 从 html 文档获取链接和 href 文本？ - 2
我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t

1.认识HTML

一、基础认知

1.1 认识网页

1.2.1 五大浏览器

1.2.2 渲染引擎

1.3.1 为什么需要Web标准？

1.3.2 Web标准的构成

2.1.1HTML的概念

2.2.2HTML页面固定结构

2.3.1 为什么使用VS Code?

2.3.2 VS Code创建网页的步骤

3.1.1 什么是注释？

3.2.1 HTML标签的结构

1.标签的结构图：

2.结构说明

3.4.1HTML标签与标签之间的关系可分为：

（1）父子关系（嵌套关系）

（2）兄弟关系（并列关系）

二、HTML标签学习

1、排版标签

1.1.1标题标签

1.代码：h系列标签

2.语义：1-6级标题，重要程度依次递减

3.特点：

1.2.1段落标签

1.3.1 换行标签

1.4.1 水平线标签

2.1文本格式化标签的介绍

3、媒体标签

3.1.1 图片标签介绍

3.1.2 属性注意点：

3.2.1 路径的介绍

（1）绝对路径

（2）相对路径（常用）

3.3.1 音频标签的介绍

4、链接标签

4.1 链接标签

4.2链接标签的target属性

5、列表标签

5.1 无序标签

5.2 有序列表

5.3自定义列表

6、表格标签

6.1 表格的基本标签

6.2常见相关属性：

6.3表格标题和表头单元格标签

6.4 表格的结构标签

6.5 合并单元格

7、表单标签

7.1 input系列标签的基本介绍

7.2 input系列标签-文本框

7.3 input系列标签-单选框

7.4input系列标签-文件选择

7.5 input系列标签-按钮

7.6 buttom按钮标签

7.6select下拉菜单标签

7.7 textarea文本域标签

7.8 label标签

8、语义化标签

8.1 没有语义的布局标签-div和span

8.2 有语义的布局标签（移动端 手机网页制作）

8.3 字符实体

有关1.认识HTML的更多相关文章

随机推荐

8.2 有语义的布局标签（移动端手机网页制作）