day01-HTML01

liyuelian 2023-04-19 原文

day01-HTML

1.JavaWeb技术体系

2.B/S软件开发架构简述

B/S架构
1. B/S框架，意思是前端（Browser浏览器，小程序，APP，或者自己写的）和服务端（Server）组成的系统的框架结构
2. B/S架构也可以理解为web架构，包含前端，后端，数据库三大组成部分
前端

前端开发技术工具包括三要素：HTML，CSS和 JavaScript，还有很多高级的前端框架，如bootstrap，jQuery和 VUE等

前端的技术的基础都是由HTML，CSS和 JavaScript构成的
后端

后端的开发技术工具主要有：Net，Java ，PHP，Go等
数据库

主流的三种关系型数据库：MySQL，SQL server，Oracle，还有Nosql非关系型数据库：Redis，Mogodb等

3.网页的组成

结构（HTML）

HTML是网页信息的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包括文字、图片、视频等。
表现（CSS）

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入的背景图片、边框等。所有这些用来改变内容外观的东西称为表现。
行为（JavaScript）

JavaScript用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变，还有购物网站中图片的轮换。可以这么理解：有动画的，有交互的一般都是用JavaScript来实现的。

4.HTML

4.1HTML介绍

HTML是什么？

HTML(HyperText Mark-up Language)，即超文本标签语言（可以展示的内容类型很多）
HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则

HTML的运行方式

本地运行
远程访问

浏览器将请求发送到服务器，服务器把相应的页面返回给浏览器，之后浏览器将会对该页面进行解析，然后才能显示

点击new，再点击project，创建新工程
在弹出的页面中点击Web，选择web，点击next（旧版的idea直接选择JavaScript，在JavaScript中选择JavaScript即可）

解决IDEA2021创建static web工程时找不到static web选项的问题_
输入项目名称，点击finish即可
点击新创建的项目名称，点击new，点击HTML File，在弹出的窗口中输入文件名称，即可创建HTML文件
点击页面右边出现的浏览器图标，即可运行文件

注意事项和细节：

HTML文件不需要编译，直接由浏览器进行解析执行
可以选择的浏览器，是你电脑安装有的浏览器，如果没有安装这个浏览器，就会报错

4.2HTML基本结构

<!--文档类型说明 注释-->
<!DOCTYPE html>

<!--使用语言的地区 en表示英国美国 en-US-->
<html lang="en">
    
<!--html头-->
<head>
    
    <!--文件的字符集-->
    <meta charset="UTF-8">
    
    <!--文件的标题-->
    <title>Title</title>
    
</head>
    
<!--body体，主体部分-->
<body>
    
    <!--内容-->
    hello,world!
    
</body>
</html>

4.3HTML基本标签

4.3.1在线文档

HTML 教程 (w3school.com.cn)

4.3.2HTML标签/元素-说明

HTML标签用两个尖括号< >括起来
HTML标签一般是双标签，如<b></b>，前一个标签是起始标签，后一个是结束标签
两个标签之间的文本是HTML元素的内容
某些标签称为“单标签”，因为它只需单独使用就能完整地表达意思，如<br/> <hr/>
HTML元素指的是从开始标签到结束标签的所有代码

标签使用细节

标签不能交叉嵌套
标签必须正确关闭
注释不能嵌套

注释里面不能再有注释的标签
html语法不是特别严谨，有时候标签不闭合，属性不带""也不报错

4.3.3font字体标签

font标签是字体标签，它可以用来修改文本的字体，颜色，大小（尺寸）

color属性修改颜色
face属性修改字体
size属性修改文本大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font标签</title>
</head>
<body>
<!-- - color属性修改颜色-->
<!-- - face属性修改字体-->
<!-- - size属性修改文本大小-->
<!--应用实例：在网页上显示“北京”，并修改字体为微软雅黑，颜色为蓝色-->
<font color="blue" size="40px" face="微软雅黑">北京</font>
</body>
</html>

4.3.4字符实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

在网页上显示一些特殊的符号，称为字符实体(也叫符号实体)。

HTML 中的预留字符必须被替换为字符实体。

注释：实体名称对大小写敏感

常用的特殊字符：
< : &lt;
> : &gt;
空格 : &nbsp;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  特殊字符应用实例：把<hr/>变成文本显示在页面上-->
jack
<hr/>
&lt;hr/&gt;
smith&nbsp;&nbsp;一二三
</body>
</html>

常用的字符实体表格：HTML 字符实体 (w3school.com.cn)

4.3.5标题标签

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

align属性是对齐属性

left：左对齐（默认）
center：居中
right：右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3 align="center">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6 align="right">标题6</h6>
</body>
</html>

4.3.6超链接标签

超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置（锚点），还可以是一个图片，一个电子邮件，一个文件，甚至是一个应用程序。

a 标签是超链接
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
- _self表示当前页面（默认值），即使用目标页替换当前页
- _blank 表示打开新页面来进行跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.sohu.com" target="_blank">搜狐2</a>
<!--点击超链接，打开邮件-->
<a href="mailto:jack@qq.com">联系管理员</a>
</body>
</html>

4.3.7列表标签

无序列表ul/li

基本语法：
```
<ul type="属性值">
    <li>列表内容</li>
</ul>
```
ul表示无序列表，li表示列表项，type属性指定列表项前的符号

ul 设定符号款式，其值有三种，如下：
- type="disc" 时的列项符号为实心圆点
- type="circle" 时的列项符号为空心圆
- type="square" 时的列项符号为空心正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul li标签</title>
</head>
<body>
<h1>五虎将</h1>
<ul type="circle">
    <li>jack</li>
    <li>tom</li>
    <li>smith</li>
    <li>mary</li>
    <li>milan</li>
</ul>
</body>
</html>

有序列表ol/li

基本语法：

<ol type="属性值" start="起始值">
    <li>列表内容</li>
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol li标签</title>
</head>
<body>
<h1>五虎将</h1>
<ol type="I" start="3">
    <li>jack</li>
    <li>tom</li>
    <li>smith</li>
    <li>mary</li>
    <li>milan</li>
</ol>
</body>
</html>

4.3.8图像标签img

img 标签可以在html页面上显示图片

img标签是图片标签，用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
hight属性设置图片的高度

在单一地指定图片的宽度或者高度时，图片的另一属性会按照你缩放的大小等比例缩放，因此建议指定一个值即可
border属性设置图片的边框大小
alt属性设置当指定路径找不到图片时，用来代替显示的文本内容
相对路径：从工程名开始算
绝对路径：符盘:/目录/文件名

在web中路径分为相对路径和绝对路径两种：

相对路径：.表示当前文件所在的目录，..表示当前文件所在的上一级目录

文件名：表示当前文件所在目录的文件，相当于./文件名，其中./可以省略

绝对路径：正确格式是：http://IP地址:port/工程名/资源路径，即使用url方式去定位资源

错误格式是：符盘:/目录/文件名(只能在本地上去用，不建议)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<h4>图片标签的演示</h4>
<!--或者<img src="./imgs/1.png">-->
<img src="imgs/1.png" height="100">
<img src="imgs/1.png" height="100" border="2px">
<img src="imgs/2.png" alt="找不到该图片">
</body>
</html>

通过绝对路径去访问：http://IP地址:port/工程名/资源路径(使用url方式去定位资源)

01 HTML gt lt li Java

有关day01-HTML01的更多相关文章

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-on-rails - rails : Find tasks that were created on a certain day? - 2
我有一个任务列表(名称、starts_at)，我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束)，以便进行比较。最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio