-
html笔记
web概念概述
-
JavaWeb：使用Java语言开发基于互联网的项目（项目指应用程序、项目、软件等），这里只是简单介绍javaweb，之后还会来介绍的。javaweb的另一种解释就是他是互联网开发技术的总称。
因为我们不管是基于哪个语言开发javaweb做的都是软件开发，所以都是做一个软件，所以我们要对软件进行选型，选型前要确定软件用的软件架构，所以我们先来介绍软件架构。
-
软件架构：
- C/S: Client/Server 客户端/服务器端（C/S架构先出现，之后才出现B/S架构）
- 特点：在用户本地有一个客户端程序，在远程有一个服务器端程序，即它有两个程序。
- 例子：QQ，迅雷，…
- 优点：
- 用户体验好，比如你下载一个游戏，好几个G在你本地的电脑上，这样你玩游戏的时候很多数据就可以直接在本地加载了（比如CF游戏地图等数据就可以存到本地），不用到远程加载，这样就比较快，用户体验会好得多。
- 缺点：
- 开发麻烦（因为要开发两个端的软件，你要开发两个端的软件，一个客户端软件，一个服务端的软件）
2. 安装、部署、维护都很麻烦（要是是发布给全部人使用的下载还是算蛮简单，但是要是你是专门为某个公司开发的软件，就没有提供给所有人下载的官网了，这样就得开发人员一个个给公司的员工来安装和部署软件了，维护因为要维护两个端的软件，两边出bug都不行，所以维护也会蛮麻烦的）
- 开发麻烦（因为要开发两个端的软件，你要开发两个端的软件，一个客户端软件，一个服务端的软件）
- B/S: Browser/Server 浏览器/服务器端
- 特点：只需要一个浏览器，用户输入不同的网址(URL)回车，就是访问不同的程序，这个程序说的是服务器端的程序
- 例子：百度这个网站就是一个B/S软件，你用浏览器去搜索www.baidu.com就是去访问了一个B/S的软件
- 优点：
- 开放、安装、部署、维护简单。开发(只要开发服务器端，因为客户端都用的是浏览器嘛，不用你开发人员来开发，应用商店满地都是浏览器，随便安装一个都行)、安装（不用专门安装某个客户端到本地，只要有一个浏览器就行了），部署（只需要我们把服务端的程序部署到服务器上就行了），维护（维护也只要维护服务端的程序就行了）
- 缺点：
- 如果应用过大，用户的体验可能会受到影响（虽然你可以通过技术手段让程序体验好一点，但是你优化再好，你的带宽更不上，或者远程服务器的内存更不上，你游戏加载的时间还是会很慢很卡，所以我们只能把游戏的画质等降低，让游戏可以玩下去，不至于卡顿。我们现在的实际情况是，我们的优化技术已经比较好了，但是硬件不是很跟得上，以后要是硬件配置跟上了这些问题就没有了）
- 对硬件要求过高（比如要求服务器的内存要大些，用户的带宽要求高些）
- 我们现在学的javaweb就是基于B/S架构的。如果你要开发Android应用程序，那么就用C/S架构。
- C/S: Client/Server 客户端/服务器端（C/S架构先出现，之后才出现B/S架构）
-
B/S架构详解(即，B/S架构是怎么访问数据的)
资源分类：静态资源和动态资源。
-
静态资源：
- 含义：使用静态网页开发技术发布的资源。
- 特点：
- 所有用户访问，得到的结果是一样的。就算是动态的图片它也是静态资源，只要每个用户点击得到的资源都是一样的就算静态资源。
- 如：网站中的文本，图片，音频、视频，HTML，CSS，JavaScript（简称js，和jsp不是一个东西）（这三个是静态资源，也是静态网页开发技术）
- 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎(每一个浏览器的解析引擎不一定一样，所以解析出来的结果可能会有一点小不同，但是大致东西都是一样的)，可以展示静态资源。
-
动态资源(重点)：
- 含义：使用动态网页及时发布的资源。
- 特点：
- 所有用户访问，得到的结果可能不一样。比如某些网站的登录后显示的欢迎某某，就是同一页面不同的人看到的结果不一样用的就是动态资源。
- 动态资源如：jsp/servlet(我们只学这个),php,asp…
- 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
-
我们要学习动态资源，必须先学习静态资源！因为动态资源要转换为静态资源然后发送给浏览器。我们客户端的浏览器只能处理静态资源。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEBXjzyn-1667981365150)(HTML/image-20221104103331559.png)]
-
静态网页开发技术介绍：
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果（不是指动态资源，这里的动态效果比如有些网站会过几秒显示下一张广告的那个轮播图效果）
-
HTML基础概念和语法
-
概念：是最基础的网页开发语言
-
Hyper Text Markup Language 超文本标记语言的首字母就是HTML
-
超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。什么意思呢？如图：即比如我们打开的是中间这个框，然后中间这个框里面有一个《论语》这个词是一个超链接，这个超链接可以跳转到另一个网页，然后下面还有一个图片，它也是超链接，可以跳转到另一个网页。就是这样一个网页通过超链接的方式达到多个网页连在一起的网状结构的文本就是超文本。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rIscVF5W-1667981365152)(HTML/image-20221104104748156.png)]
-
标记语言：由标签构成的语言。标签的样子如：<标签名称> 这样。标记语言有html，xml等。
标记语言不是编程语言，编程语言是具有一定的逻辑性的，比如你if-else就会进行判断，就是它会有一定逻辑性，像会思考一样。但是像标记语言是写上就会执行的。
-
-
快速入门（先用HTML来写一个简单的网页）
-
语法：
-
html文档文件后缀名 .html 或者 .htm。这两种写法没有任何区别。我们可以在桌面建立一个txt文档，然后改为.html后缀，然后用记事本打开输入html语句，这样一个html的文件写好了，然后我们用浏览器打开这个文件就可以看到效果了。
-
标签的分类：
- 围堵标签：有开始标签和结束标签，即标签必须是一对出现的。如
/的表示开始标签。为什么叫围堵标签呢？因为标签里面可以有标签。 - 自闭合标签：不用成对出现的。如要显示换行就写，
- 围堵标签：有开始标签和结束标签，即标签必须是一对出现的。如
-
标签可以嵌套，但是需要正确嵌套，不能你中有我，我中有你。如下例子：
-
在开始标签中可以定义属性的值。属性是由键值对构成，值需要用引号(单双都可)引起来。比如：
Hello World -
html的标签不区分大小写，但是建议使用小写。
-
开始标签和结束标签之间可以写内容，比如上面的那个Hello world
代码的例子：我们可以在桌面建一个txt文档，然后改为html后缀，然后用记事本打开那个文件，把下面的代码复制过去，双击运行看看效果。
<html> <head> <title>titletitle> head> <body> <FONT color='red'>Hello Worldfont><br/> <font color='green'>Hello Worldfont> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
-
标签学习
文件标签
文件标签：构成html最基本的标签
1. html：html文档的根标签，可以看上面的例子，开头和结束都是html标签 2. head：头标签。用于指定html文档的一些属性或者引入外部的资源 3. title：标题标签。执行上面的”3.代码的例子：“看到的那个title的位置就是体标签的范畴 4. body：体标签。执行上面的”3.代码的例子：“看到两个Hello World所在的白色区域就是体标签影响的范畴。 5. DOCTYPE html>：作用是定义文档类型，这里是html5中的写法，相当于定义该文档是html文档- 1
- 2
- 3
- 4
- 5
title标签和body标签影响的位置
文本标签
文本标签：(即和文本有关的标签。文本标签有下面几种)
1.注释的用法：，注释可以写在任何地方 2.<h1> to <h6>：标题标签。h1~h6:字体大小逐渐递减，h1最大。写法：<h1>你好<h1>，显示的你好就是字体比较大的”你好“ 3.<p>：段落标签，因为你用html写的空格、换行、制表符都是会被当作一个空字符的，所以你要让页面展示一篇文章的几个段落就很不舒服，当然你可以再每一个段落后面加一个<br>来换行，但是其实这样写也不是很好看，这时你就可以用"<p>段落1内容p><p>段落2内容p>"这样来写，就会好看一点。<br>是纯换行，相当于只换一行，<p>p>是段落换行，相当于换两行，你用<p>p>显示的时候会把下一行的距离分得比<br>更开，更像一个段落 4.<br>：换行标签 5.<hr>：展示一条水平线，它也是自闭合的一个标签，所以可以<hr/>，这个也可以写为<hr>，即不写/。这个展示水平线前会判断一下你这个水平线前面的内容之间有没有换行，要是有换行就直接输出展示水平线，要是原来的内容和这个标签之间没有换行的标签，那么展示这个标签前会先打印一个换行然后再展示水平线。 你可以改变这个线的颜色、宽度等属性。等我们学了css后，就不会用这些属性来控制展示的外观了，现在先学学，让现在做的内容看起来稍微好看一点。html5现在已经遗弃了这些写法，但是你写了放浏览器里面执行还是可以看到效果的，因为浏览器要做到向下兼容嘛，不能让之前完成的工作全部都失效吧。 hr标签的属性有： * color：颜色。 * width：宽度 * size：高度 * align：对其方式，对其方式主要有下面几种：center居中、left左对齐、 right右对齐。 使用例子：<hr color="red" width="200" size="10" align="left"/> 6.<b>：字体加粗，使用如：<b>内容b> 7.<i>：字体斜体，使用如：<i>内容i> 8.<font>:字体标签，这个标签的使用已经过时了，html5已经遗弃了。它有三个属性，一个是字体颜色，一个是字体大小，一个是字体样式。 使用例子如：<font color="red" size="10" face="楷体">内容font> 9.<center>:文本居中，这个也是一个被淘汰的标签，这个标签的内容会相对于这个标签所在的父标签来说居中显示。- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
下面我们来介绍一下属性：
属性： 1.color：颜色 2.size：大小 3.face：字体 4.等等 我的建议：一个标签的属性和属性之间用不用空格隔开来也行，但是我自己的建议是属性与属性之间用空格隔开，比较好看。 部分属性的写法展示： color属性里面的值可以有三种写法： 1. 英文单词：red,green,blue。这个写法能表示的颜色比较少，用下面两种写法能表示的颜色就比较多了。 2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)。这个写法现在有些浏览器已经不支持了，所以建议你用第三种写法。 3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF width属性里面的值可以有两种写法： 1. 数值：width='20' ,数值的单位，默认是 px(像素) 2. 数值%：占比相对于父元素的比例。下面这个例子就是相当于这个水平线的宽带是占body的50%宽度，这个hr标签在body标签的里面，所以这个body标签就是hr标签的父标签。 例子： <body> <hr color="red" width="50%" size="10"/> <body/>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
-
注意事项一：你写html代码的时候手动换行、输入空格、输入制表符在浏览器里面显示为一个空字符。
代码如下：
显示如下，可以看到换行、制表符tab、空格都是会被解析为一个空字符。
-
注意事项二：换行用这个
和代码：
效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4hmPi8UO-1667981365153)(HTML/image-20221105155417698.png)]
-
注意事项三：你标签
<某某>和标签的内容之间的所有换行、制表符、空格都不会被识别，然后你标签内容中间有多个换行、制表符、空格的组合被识别的结果还是为一个空字符。代码：
效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7BuR11kK-1667981365156)(HTML/image-20221105155844763.png)]
-
注意事项四：html的语法是很不严谨的，你很多时候写得不规范，它也是可以执行的，不会报错。
代码：
效果还是可以正常显示的：
文本标签的练习
我们下面来做一个练习，比如我们要在浏览器页面展示下面这个效果，我们的html得怎么写？
答：
DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>练习title> head> <body> <h1>公司简介h1> <hr color="#ffd700"> <p> <font color="#FF0000">"中关村黑马程序员训练营"font>是由<i><b>传智播客b>i>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。 p> <p> 目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。 p> <p> 黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。 中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。 p> <p> 一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。 p> <hr color="#ffd700"> <font color="gray" size="2"> <center> 江苏传智播客教育科技股份有限公司<br> 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882 center> font> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
注意事项：
-
内容和内容效果一样。 -
如果要在让浏览器页面显示一些特殊字符，需要对应下面这个表。比如你想要打印两个空格，你可以
he llo [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xRJGd373-1667981365157)(HTML/image-20221104201227177.png)]
这个表只是提供了部分特殊字符，还有很多，要想看更多的特殊字符可以查看https://www.runoob.com/tags/html-symbols.html这个网站。
-
我们学习html的时候可以来https://www.runoob.com/html/html-basic.html这个菜鸟教程这里找一些资源。
图片标签
1.它也是一个自闭合的标签。写法如<img src="图片地址"/> 2.它有一个属性叫src，这个属性指定图片加载的位置的。src后面的属性值可以是图片的相对地址。绝对路径这里先不研究。 3.图片处理src外还有其他的属性，这里不过多介绍。想要了解更多img的属性直接查看https://www.runoob.com/tags/tag-img.html网址就行了。注意：img的很多属性，html5都不支持了，但是你在idea写了那些属性然后去运行大部分还是会给你展示出效果的，因为要向下兼容。 使用的例子：<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>这里面的alt表示要是你这个路径的图片不存在，就显示alt属性的值，即显示”古镇“这个字。 4.src的值写相对路径： ./:表示这个代码所在文件的文件夹路径，这个./可以省略。比如./image/1.jpg和image/1.jpg这两个写法都是一样的。 ../:表示这个代码所在文件的文件夹的上一级文件夹。- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
src的相对路径是指某个文件相对于写这个代码的文件的文件夹的哪个位置。下图中可以看出，这个代码写在test2.html下，这个test2.html在test文件夹下，所以你test文件夹下的图片“例子2.jpg”可以直接写，要是在test文件夹的上一级的图片，你可以用…表示相对文件夹的上一级文件夹。
alt属性的效果：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片title> head> <body> <img src="afaf" alt="古镇" width="500" height="500"/> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
看到那个路径没有找到图片，就显示这样的效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P38f2nvc-1667981365160)(HTML/image-20221106124903866.png)]
列表标签
-
有序列表：ol+li
例子，你没有设置ol标签的type属性的话，默认就显示12345……把几个列表项展示出来，你设置type的值为“A”就用ABCD……把列表项展示出来。type的属性的值可以是：A,1（默认是1），a，I，i。还有一个start属性，它表示从第几个开始，看下面的效果展示就可以体会了。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序标签title> head> <body> <ol> <li>睁眼li> <li>看手机li> <li>穿衣服li> <li>洗漱li> ol> <ol type="A"> <li>睁眼li> <li>看手机li> <li>穿衣服li> <li>洗漱li> ol> <ol type="A" start="5"> <li>睁眼li> <li>看手机li> <li>穿衣服li> <li>洗漱li> ol> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3HAFYV56-1667981365161)(HTML/image-20221106123809953.png)]
-
无序列表：ul+li。他的type有disc、square、circle几个属性值，其中disc是默认的。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序标签title> head> <body> 早上起来要做的事： <ul> <li>睁眼li> <li>看手机li> <li>穿衣服li> <li>洗漱li> ul> <ul type="disc"> <li>睁眼li> <li>看手机li> <li>穿衣服li> <li>洗漱li> ul> <ul type="square"> <li>睁眼li> <li>看手机li> <li>穿衣服li> <li>洗漱li> ul> <ul type="circle"> <li>睁眼li> <li>看手机li> <li>穿衣服li> <li>洗漱li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
效果展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-flDT0RY2-1667981365163)(HTML/image-20221106125038378.png)]
注意一点：就是”早上起来要做的事：“这句话，没有被包在ul标签里面，他是在body标签里面，但是他们是这样的关系
早上起来要做的事：也是一样可以显示的，显示效果如上图。- ……
链接标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签title> head> <body> <a>点击a> <br> <a href="http://www.itcast.cn">点我1a> <br> <a href="http://www.itcast.cn" target="_self">点我2a> <br> <a href="http://www.itcast.cn" target="_blank">点我3a> <br> <a href="./test1.html">展示test1.html的内容a><br> <br> <a href="http://www.itcast.cn">点击图片跳转<img src="例子2.jpg">a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
代码展示：下面注意一点就是，你点击”展示test1.html的内容“这个超链接就相当于运行了那个箭头指的test1.html文件，就相当于跳转到那个test1.html的网页。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gsVmdO0l-1667981365165)(HTML/image-20221106132033962.png)]
效果展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yuOaqWDs-1667981365166)(HTML/image-20221106132246959.png)]
div和span标签
div和span标签：这个这里先只是了解一下，之后这两个标签会和css一起结合使用的，以后会详细讲。div和span标签里面的内容没有任何特殊的效果，正因为这样没有任何特殊的效果，以后css控制这些标签才好控制呀，你看比如超链接的a标签，他会让文字带下划线带变色等效果，这样以后你css控制显示的效果就不是单纯的css控制的效果了，还会有a标签本来具有的一下效果。因为白纸才好画画嘛，所以div和span标签，以后结合css就会经常被用到。但是div和span标签有什么区别呢？请看下面例子：
代码：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块标签title> head> <body> <span>黑马程序员span> <span>传智播客span> <hr> <div>黑马程序员div> <div>传智播客div> <b>hellob> <b>hellob> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tRGLtxib-1667981365169)(HTML/image-20221106134501882.png)]
注意：这里还看到一点就是，为什么”黑马程序员“和”传智播客“之间有空格呢？难道span标签自带空格吗？我们看看使用前面的文本标签试试，发现其实这个标签的内容和下一个标签的内容中间也会输出一个空字符。我们再测试一下，下面的代码，发现，其实两个b标签之间的空格、两个span标签之间的空格都是因为两个标签之间有一个换行，这个换行被转为空字符了，且当作是内容，就和下面的”你好“一样，被当作内容输出了。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块标签title> head> <body> <span>黑马程序员span> <span>传智播客span> <hr> <div>黑马程序员div> <div>传智播客div> <b>hellob> <b>hellob> <br> <b>hellob><b>hellob> <br> <b>hellob>你好<b>hellob> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mSquzzfa-1667981365170)(HTML/image-20221106140421920.png)]
语义化标签
-
header：相当于告诉程序这一块东西是网页的页眉，然后之后我们用css就好控制了。
-
footer：相当于告诉程序这一块东西是网页的页脚，然后我们用css就好控制了。
-
这个标签是html5新提出的
比如下面html代码：
DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑马程序员简介title> head> <body> <div id="header"> <h1> 公司简介 h1> div> <hr color="#ffd700"> <p> <font color="#FF0000">"中关村黑马程序员训练营"font>是由<b><i>传智播客i>b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。 p> <p> 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。 p> <p> 黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。 中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。 p> <p> 一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。 p> <hr color="#ffd700"> <div id="footer"> <font color="gray" size="2"> <center> 江苏传智播客教育科技股份有限公司<br> 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882 center> font> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
我们把头和尾都用了div括起来了，这样以后css要控制这个头div的标签的内容，他不知道是对应哪一个，所以，我们给了他一个id，以后可以根据div的id值来让css控制对应的div标签。
DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑马程序员简介title> head> <body> <header> <h1> 公司简介 h1> header> <hr color="#ffd700"> <p> <font color="#FF0000">"中关村黑马程序员训练营"font>是由<b><i>传智播客i>b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。 p> <p> 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。 p> <p> 黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。 中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。 p> <p> 一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。 p> <hr color="#ffd700"> <footer> <font color="gray" size="2"> <center> 江苏传智播客教育科技股份有限公司<br> 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882 center> font> footer> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
但是之前那么写起来比较麻烦，所以可以这样用一个header标签把头部包括起来，用一个footer把尾部的内容包裹起来，这样css就可以简单地知道要控制的网页的页头、页尾是哪里了。提高了程序的可读性，html5才退出了这些语义化标签，这些html5提出的语义化标签除了header、footer还有很多。
上面两个代码的效果都如下：即你没有用css美化，div、header、footer都不会展现出什么效果，span的话没用css美化也能看到有换行(但是注意：要是span标签后面是br标签，或者是p标签这种自带换行的标签，span的换行就不产生效果)。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XDgWoLPc-1667981365172)(HTML/image-20221107090651407.png)]
表格标签
在html5中的表格和excel的表格不太一样，excel里面表格是几条竖线和几条横线把一个矩形分割为几个小矩形，但是在html中的表格是相当于一个矩形里面你可以定义多少个表示一行的长方形，然后在长方形里面你可以定义多少个小长方形，这样组成的表格。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2s4c9gJk-1667981365173)(HTML/image-20221107093921575.png)]
-
table：定义表格。注意一点：table设置align="center"为居中时，不是设置了table里面单元格里的内容居中，而是设置了这个table相对于他的父标签是居中的位置。但是你要是设置td和th的align="center"那么就是单元格里面的内容是相对于单元格居中显示的。
-
tr：定义行
-
td：定义单元格
-
th：定义表头单元格
例子：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签title> head> <body> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <tr> <th>编号th> <th>姓名th> <th>成绩th> tr> <tr> <td>1td> <td>小龙女td> <td>100td> tr> <tr> <td>2td> <td>杨过td> <td>50td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PEJGyNw8-1667981365174)(HTML/image-20221107095612097.png)]
-
caption：表格标题
-
thead：表示表格的头部分，现在看不出来什么效果，之后和css一起使用的时候可以有用，类似语义化标签
-
tbody：表示表格的体部分，现在看不出来什么效果，之后和css一起使用的时候可以有用，类似语义化标签
-
tfoot：表示表格的脚部分，现在看不出来什么效果，之后和css一起使用的时候可以有用，类似语义化标签
例子：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签title> head> <body> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <thead> <caption>学生信息表caption> <tr> <th>编号th> <th>姓名th> <th>成绩th> tr> thead> <tfoot> <tr> <td>3td> <td>尹志平td> <td>10td> tr> tfoot> <tbody> <tr bgcolor="#7fffd4" align="center"> <td>1td> <td>小龙女td> <td>100td> tr> <tr> <td>2td> <td>杨过td> <td>50td> tr> tbody> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFTWCt7S-1667981365176)(HTML/image-20221107104443631.png)]
下面展示一点：合并单元格
比如我们要定义下面这个样子的表格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DUlnUWZc-1667981365177)(HTML/image-20221107104933694.png)]
我们要没有给属性合并单元格的属性
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签title> head> <body> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <tr> <th>编号th> <th>姓名th> <th>成绩th> tr> <tr> <td>小龙女td> <td>100td> tr> <tr> <td>2td> <td>杨过td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果如下：即，默认是和前面对齐的，就算你第二行定义了两个单元格，那两个单元格也不是占满整个表格宽度的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QWaUVjAB-1667981365178)(HTML/image-20221107105047323.png)]
加上合并单元格的属性后：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签title> head> <body> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <tr> <th rowspan="2">编号th> <th>姓名th> <th>成绩th> tr> <tr> <td>小龙女td> <td>100td> tr> <tr> <td>2td> <td colspan="2">杨过td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
-
-
相关阅读:
Vulntarget-a靶场实战记录
上手阿里低代码引擎lowcode-engine
[PAT-Advanced] B1019/A1069. The Black Hole of Numbers (20)
关于python pytorch 与CUDA版本相关问题
后端开发基础概念
在windows下CorelDraw中VBE的调用原理？
Vue高级篇--实现前后端完全分离
easyexcel和poi版本冲突报错深入解析v2
20231009比赛总结
Git操作流程
- 原文地址：https://blog.csdn.net/m0_59176231/article/details/127771943
