day02-HTML02

liyuelian 2023-04-19 原文

4.HTML

4.3HTML基本标签

4.3.9表格(table)标签

基本语法：

<table border="边框宽度" cellspacing="空隙大小" cellpadding="填充大小">
</table>

说明：

table 是表格标签，border 设置表格标签

width 设置表格宽度，height 设置表格高度

align 设置表格相对于页面的对其方式

cellspacing 设置单元格间的空隙大小，0表示没有空隙

tr 是行标签，th是表头标签，td是单元格标签

align设置单元格文本对齐方式，b是加粗标签

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<h1 align="center">标签表格的使用</h1>
<!--使用表格标签显示三行三列的表格-->
<!--px表示像素，不写单位默认就是像素-->
<table width="500" border="5" align="center">
    <tr>
        <th>姓名</th>
        <th>地址</th>
        <th>邮件</th>
    </tr>
    <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr>
        <td>第3行第1列</td>
        <td>第3行第2列</td>
        <td>第3行第3列</td>
    </tr>
</table>
</body>
</html>

跨行跨列表格
- 合并列：colspan="列数"
- 合并列：rowspan="行数"
- cellspacing：设置单元格间的空隙大小，0表示没有空隙
- bordercolor：指定表格边框的颜色
使用表格标签，展示如下的表格：

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列表格</title>
    <!--  思路：
            1.先把整个表格完整的行和列展示出来5*3
            2.再使用合并的技术来处理
            3.十六进制表现的颜色前名要加#号
     -->
</head>
<body>
<h2>跨行跨列表格</h2>
<table border="1" bordercolor="#E87EFA" width="500" cellspacing="0">
    <tr>
        <!--合并了三列-->
        <td colspan="3" align="center">第1行第1列</td>
    </tr>
    <tr>
        <!--合并行，跨行row-->
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>33</td>
    </tr>
    <tr>
        <!--合并行，跨行row-->
        <td rowspan="2">第4行第1列</td>
        <td>42</td>
        <td>43</td>
    </tr>
    <tr>
        <td>52<img src="imgs/2.png" width="100"></td>
        <td>53</td>
    </tr>
</table>
</body>
</html>

4.3.10表单form标签

表单语法：

form 表示表单
action 表示提交到哪个页面
method 表示提交方式，常用get和post
input type="text"输入框
input type="password"密码框
input type="submit" 提交按钮
input type="reset" 重置按钮

<form action="url" method=*>
    ...
    ...
    <input type="submit"><input type="reset">
</form>

其中 url 表示定位一个web资源的路径

method的星号可以为get，也可以是post，不写的话默认是get

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单登录</title>
</head>
<body>
<h1>登录系统</h1>
<form action="ok.html" method="post">
    用户名： <input type="text" name="username"><br/>
    <!--为了汉字对齐，输入全角的空格即可-->
    密　码： <input type="password" name="username"><br/>
    <input type="submit" value="登录">　<input type="reset" value="重新填写">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
</head>
<body>
<h1>登录成功！</h1>
</body>
</html>

4.3.11input标签

<input> 元素有很多形态，根据不同的 type 属性

<input type="password"> 定义密码字段
<input type="text"> 定义用于文本输入的单行输入字段
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
<input type="radio"> 定义单选按钮，多个选择中只能选择一个选项
<input type="checkbox"> 定义复选框，复选框允许用户在有限数量的选项中选择零个或多个选项
<input type="number"> 用于应该包含数字值的输入字段
<input type="button"> 定义按钮
<input type="file" > 是文件上传域

4.3.12select/option/textarea标签

<select> 元素定义下拉列表
<option> 元素定义待选择的选项，列表通常会把首个选项显示为被选选项。通过添加 selected 属性来定义预定义选项
<textarea>元素定义多行输入字段（文本域）

4.3.13表单综合练习

form 标签就是表单
input type=text 是文件输入框
value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked"表示默认选中 
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项
selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度

1.一定要使用form标签将input标签包起来，且一定要给input元素设置name属性，否则数据提交不到服务器

2.checkbox 是复选框，如果希望是同一组，就要保证 name 属性一致

3.checkbox ,select, radio 提交数据的时候是 value 属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    用户注册信息<br/>
    用户名称：<input type="text" name="username"><br/>
    用户密码：<input type="password" name="pwd1"><br/>
    确认密码：<input type="password" name="pwd2"><br/>
    请选择你喜欢的运动项目:
    <input type="checkbox" name="sport" value="lq">篮球<br/>
    <input type="checkbox" name="sport" value="zq" checked>足球<br/>
    <input type="checkbox" name="sport" value="sq" checked>手球<br/>
    请选中你的性别:
    <input type="radio" name="gender" value="male" checked>男<br/>
    <input type="radio" name="gender" value="female">女<br/>
    请选中你喜欢的城市
    <select name="city">
        <option>--选择--</option>
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="gz">广州</option>
    </select><br/>
    自我介绍
    <textarea name="comment" rows="4" cols="25"></textarea><br/>
    请选中你的头像文件
    <input type="file" name="myfile"><br/>
    <input type="submit" name="提交" value="提交">
    <input type="reset" name="重置" value="重置">
</form>
</body>
</html>

4.3.14表单格式化

完成如下界面：

练习：使用表格标签将表单格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
<form>
    <h1>用户注册信息</h1>
    <table>
        <tr>
            <td>用户名称：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" name="pwd1"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="pwd2"></td>
        </tr>
        <tr>
            <td>请选择你喜欢的运动项目：</td>
            <td><input type="checkbox" name="sport" value="lq">篮球
                <input type="checkbox" name="sport" value="zq" checked>足球
                <input type="checkbox" name="sport" value="sq" checked>手球
            </td>
        </tr>
        <tr>
            <td>请选中你的性别：</td>
            <td>
                <input type="radio" name="gender" value="male" checked>男
                <input type="radio" name="gender" value="female">女
            </td>
        </tr>
        <tr>
            <td>请选中你喜欢的城市：</td>
            <td>
                <select name="city">
                    <option>--选择--</option>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="gz">广州</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td><textarea name="comment" rows="4" cols="25"></textarea></td>
        </tr>
        <tr>
            <td>请选择你的头像文件：</td>
            <td><input type="file" name="myfile"></td>
        </tr>
        <tr>
            <td><input type="submit" name="提交" value="提交"></td>
            <td><input type="reset" name="重置" value="重置"></td>
        </tr>
    </table>
</form>
</body>
</html>

4.3.15表单提交数据细节

action表示将form表单的数据提交给哪个url，即服务器的哪个资源(如servlet)
method属性设置提交的方式主要是：get 和 post，默认是get
表单提交的时候，数据没有发送给服务器的三种情况：
- 表单某个元素项没有name属性值，则数据不会提交
- 单选，复选框(下拉列表中的option标签)都需要添加value属性，以便发送给服务器
  
  对于checkbox复选框，可以提交多个值，但是name是统一的(为了区分复选框的分组)
  
  对于select，checkbox，radio标签，提交的数据是value指定的值
- 表单项不在提交的form标签中
  
  提交的数据一定要放在form标签内，否则不会提交
GET请求的特点是：
- 浏览器地址中的地址是：action的属性值[+?+请求参数] 请求参数的格式是：name=value&name=value
- 不安全 (建议重要信息不要选择get)
- 它有数据长度的限制

POST请求的特点是：

浏览器地址栏中只有action属性值，提交的数据是携带在http请求中，不会展示在地址栏中
相对于get请求要更安全
理论上没有数据长度的限制

post请求分析：

如下，在浏览器中选择f12快捷键

这里是http的请求头：

POST /1027practice/ok.html HTTP/1.1
Host: localhost:63342
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate, br
Content-Type: application/x-www-form-urlencoded
Content-Length: 24
Origin: http://localhost:63342
Connection: keep-alive
Referer: http://localhost:63342/1027practice/form_login.html?_ijt=e39at152i0jkgl2dtreahm36fk&_ij_reload=RELOAD_ON_SAVE
Cookie: Idea-14176161=c5173052-46ad-4245-9208-03592d0dcf0e; Idea-f24e85b1=ae595c67-c988-4ef0-856d-44549b2b2eb7
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1

这里是http的请求体：

username=jack&pwd=123456

4.3.16div标签

定义和用法

<div> 可定义文档中的分区或节（division/section）

<div> 标签可以把文档分割为独立的、不同的部分

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
<body>
hello,world
<div>
    <h3 style="color: blue">this is a h3</h3>
    <a href="http://www.baidu.com">go to 百度</a>
</div>
</body>
</html>

4.3.17p标签

p标签定义段落
p元素会自动在其前后创建一些空白

4.3.18span标签

span标签是内联元素（内嵌元素，行内元素），不像块级元素（如div标签）有换行的效果
如果不对span应用样式，那么span标签没有任何的显示效果
语法<sapn></span>
往往是用来单独地控制某个关键的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
</head>
<body>
您的购物车有<span style="color: red;font-size: 40px" >10</span>个商品
</body>
</html>

4.3.19课后练习

编写代码，创建html显示如下网页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雇员薪资信息</title>
</head>
<body>
<div align="center">
    <h1>雇员薪资信息</h1>
    <table border="2" bordercolor="blue" cellspacing="0" width="500" bgcolor="#CCCCCC">
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>性别</th>
            <th>薪水</th>
            <th>职位</th>
            <th>email</th>
        <tr>
        <tr align="center">
            <td>111</td>
            <td>宋江</td>
            <td>男</td>
            <td>1000.00</td>
            <td>总裁</td>
            <td>sj@163.com</td>
        <tr>
        <tr align="center">
            <td>111</td>
            <td>宋江</td>
            <td>男</td>
            <td>1000.00</td>
            <td>总裁</td>
            <td>sj@163.com</td>
        <tr>
        <tr align="center">
            <td>111</td>
            <td>宋江</td>
            <td>男</td>
            <td>1000.00</td>
            <td>总裁</td>
            <td>sj@163.com</td>
        <tr>
        <tr align="center">
            <td>111</td>
            <td>宋江</td>
            <td>男</td>
            <td>1000.00</td>
            <td>总裁</td>
            <td>sj@163.com</td>
        <tr>
    </table>
</div>
</body>
</html>

编写代码，创建html显示如下网页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<div align="center">
    <h1>课程表</h1>
    <table border="2" bordercolor="#6495ed">
        <tr>
            <th>项目</th>
            <th colspan="5">上课</th>
            <th colspan="2">休息</th>
        </tr>
        <tr>
            <th>星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        <tr align="center">
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr align="center">
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
        <tr align="center">
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr align="center">
            <td>政治</td>
            <td>英语</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>计算机</td>
        </tr>
        <tr align="center">
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr align="center">
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
    </table>
</div>
</body>
</html>

02 HTML gt lt td Java

有关day02-HTML02的更多相关文章

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)'
postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2
//1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json
ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。最佳答案这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
牛客网专项练习30天Pytnon篇第02天 - 2
1.在Python3中，下列关于数学运算结果正确的是:（B）a=10b=3print(a//b)print(a%b)print(a/b)A.3，3，3.3333...B.3，1，3.3333...C.3.3333...，3.3333...，3D.3.3333...，1，3.3333...解析：在Python中，//表示地板除（向下取整），%表示取余，/表示除（Python2向下取整返回3）2.如下程序Python2会打印多少个数:（D）k=1000whilek>1: print(k)k=k/2A.1000 B.10C.11D.9解析：按照题意每次循环K/2，直到K值小于等
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://