深入浅出HTML（针对后端攻城狮）
目录
前言
一、系统结构：
B/S架构：
C/S架构：
二、什么是HTML？
三、HTML的基本语法：
三-1、HTML的基本代码结构：
三-2、HTML的基本标签：
三-3、表格：
三-3-1、表格的基本属性：
三-3-2、合并单元格：
三-3-3、th标签：
三-3-4、thead、tbody、tfoot:
三-4、背景图片：
三-5、图片：
三-6、超链接/热链接：
三-7、列表：
三-7-1无序列表（元素前无序号，用点指示）：
三-7-2、有序列表（元素前有序号）：
三-7-3、自定义列表：
三-8、表单：
三-8-1、细说表单：
三-8-2、select 标签：
三-8-3、textarea 标签（文本域）：
三-8-4、"file"控件：
三-8-5、"hidden"控件：
三-8-6、input 标签的 readonly 和 disabled 属性：
三-8-7、input 标签的 maxlength 属性：
三-9、元素（节点）的id属性：
三-10、div和span：
四、参考文献：
前言
在开始学习之前，先分享一个HTML的一个帮助文档：HTML 系列教程
一、系统结构：
B/S架构：
即Browser/Server。（浏览器/服务器的交互形式）
优点：升级方便，只升级服务器端代码即可。
缺点：网页形式。内容需从服务器端传来较多数据，速度慢，体验好。
C/S架构：
即Client/Server。（客户端/服务器端的交互形式）
优点：软件形式。内容早已大量下载在本地，服务端传来的内容少，速度快，体验好。
缺点：升级麻烦，维护成本高。
二、什么是HTML？
HTML是一种超文本标记语言。由大量的标签组成，每一个标签都有开始标签和结束标签。
HTML后缀名为.html或.htm，直接用浏览器打开即可运行。
三、HTML的基本语法：
三-1、HTML的基本代码结构：
<!--这是html的注释，可多行可单行--><!doctype html> <!--加上这个表示是HTML5，去掉则为HTML4--><html> <!--根--><head> <!--头--><title> 网页的标题，在浏览器左上角展现 </title></head><body> <!--体--><!--网页的主体内容--></body></html>（ <xxxx> 是开始标签，</xxxx>是结束标签 ）
（如果开始标签和结束标签之间没东西，则可以<xxxx/>，一般用在图片<img>）
（HTML语法松散不严格，不区分大小写）
三-2、HTML的基本标签：
段落标记 <p>段落标记</p> 标题字
(1到6，与Word一样，数字越小字体越大)
<h1>标题</h1>、<h2></h2>... 换行 <br> 横线 <hr> 居中 <center>居中</center> 删除字（字中间一横） <del>删除字</del> 插入字（下划线） <ins>插入字</ins> 粗体字 <b>粗体字</b> 斜体字 <i>斜体字</i> 右上角加字 10<sup>2</sup> 右下角加字 MgCl<sub>2</sub> 字体标签 <font color="red" size="50"> 字</font> （红色字，大小50） （br标签和<hr>标签是一个独目标记，无结束标签）
例：
<hr color="red" width="50%">(color和width是hr标签的属性，表示这条横线是红色的，占屏幕百分之五十)
(横线默认为居中显示)
(因为HTML的语法过于松散，双引号换成单引号，甚至不加都可以运行)
预留格式：
for(int i=0;i<6;i++){System.out.println(“i=”+i);}如果在html文件中以以上格式输入这串代码，在网页上也只会在一行上显示，因为其中没有换行符<br>。
可以用 <pre></pre> 预留格式。即在编译器里面是什么格式，在网页就什么格式来显示。
示例如下：
<pre>for(int i=0;i<6;i++){System.out.println(“i=”+i);}</pre>
HTML的实体符号：
因为大于小于号会和标签的语法冲突，所以用 < 表示小于号，用 > 表示大于号。
实体符号以&开始，以分号 ; 结束。
等号可以直接写，不与HTML语法冲突。
因为在HTML编译器内两个字间隔一万个空格在网站都只显示一个空格，所以空格用实体符号 表示。
三-3、表格：
<table></table>表示一个表格，<tr></tr>表示一行，<td></td>表示一个单元格。
三-3-1、表格的基本属性：
属性写在哪个标签里面就是哪个标签的属性，如align写在<table>内则是整个表格的对齐方式，写在<tr>内则是整行的对齐方式，写在<td>内则是一个单元格的对齐方式。
例（三行三列的表格）：
<html><head><title>123456</title></head><body><br><br><br> <!--让表格下移--><table border="1px" width="60%" align="center"> <!--边框为1像素宽度，表格整体占屏幕60%（优点：可随浏览器边框调整而调整）（也可设为像素宽度，这个自由设置） --><tr align="center" height="150px"><td>a</td><td>b</td><td>c</td></tr><tr align="center" height="150px"><td>d</td><td>e</td><td>f</td></tr><tr align="center" height="150px"><td>x</td><td>y</td><td>z</td></tr></table></body></html>
三-3-2、合并单元格：
上下单元格合并：
- 删下面的<td></td>
- 上面的<td></td>使用rowspan语句，即<td rowspan=”2”></td>，”2”表示合并单元格数量为2（超也不可能超出表格的最外层边框）。
左右单元格合并：
- 删左边还是右边的单元格这个没要求。
- 保留的那个<td></td>使用colspan语句，即<td colspan=”2”></td>，”2”表示合并单元格数量为2（超也不可能超出表格的最外层边框）。
<td colspan="2" rowspan="2"></td> 这种方式是允许的。
三-3-3、th标签：
在单元格的位置，把<td></td>改为<th></th>可以把这个单元格设成表头，自动居中且字体加粗。一般用于表头的制作。
三-3-4、thead、tbody、tfoot:
这三者在表格中不是必须的。
三个标签必须同时使用！
作用：
- 把一部分表格设为一个整体，这样想整体调整对齐方式的话只需要改一处地方即可。
- 在浏览器解析HTML时，table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。
例：
<table border="1px" width="60%" align="center"><thead> <tr align="center" height="150px"><td>a</td><td>b</td><td>c</td></tr></thead><tbody><tr align="center" height="150px"><td>d</td><td>e</td><td>f</td></tr></tbody><tfoot><tr align="center" height="150px"><td>x</td><td>y</td><td>z</td></tr></tfoot></table>
三-4、背景图片：
使用backgroud语句，放到哪个<>里就是设置哪个的背景图片。
background=”xxxx” xxxx可以是相对路径，相对于.html文件的路径。
三-5、图片：
使用img标签：
<img xxxxx这里是图片路径等设置xxxxx></img>，
为了方便，图片一般这样写：<img xxx图片路径等相关设置xxx/>
（ 凡是开始标签和结束标签之间不需要字时，可以只写一个标签<xxxx/> ）
src 设置外部图片的路径 width 设置图片宽度，单位一般为px，也可为% height 设置图片高度，单位一般为px，也可为% title 设置鼠标悬停时的显示信息。 alt 设置图片加载失败时显示的提示文字 width和height只设置一个，则另一属性等比调整，同时指定，则按指定值调整。
图片格式：
JPEG(JPG)：支持的颜色比较多，图片可压缩，但不支持透明，一般用来保存照片等颜色丰富的图片。
GIF：支持的颜色少，只支持简单透明[直线透明边界]，支持动态图，一般用于颜色单一或动态图。
PNG：支持的颜色多，并且支持复杂透明，一般用来显示颜色复杂的透明图片。
三-6、超链接/热链接：
示例： <a href=”www.baidu.com”>百度</a>
因为<a></a>间要写文字，所以不能使用<a/>的格式。
href后的路径可以是网站路径也可以是本地路径（绝对路径、相对路径均可）。
<a></a>间可以是文字，也可以是图片。
示例：
<a href="www.baidu.com"><img src="baidu.jpg" width="120"/></a>
超链接可以设置target属性，可赋值：
_blank 使用新窗口跳转 _self 使用当前窗口跳转（默认） _top 回到顶级窗口 _parent 回到父窗口
三-7、列表：
常用的列表分为3种，无序列表(使用<ul>标签)，有序列表(使用<ol>标签)，自定义列表(使用<dl>标签)。
三-7-1无序列表（元素前无序号，用点指示）：
<ul><li>中国</li><li>美国</li></ul>效果：
如果中国以下还想列表，还可以加<ul>和<li>。
如：
<ul><li>中国<ul><li>北京</li><ul><li>颐和园</li><li>故宫</li></ul><li>南京</li></ul><li>美国</ul>效果：
<ul>有一个type的属性,属性有3个属性值：
dise--实心圆(默认值)
circle--空心圆
square--实心方块
<li>同样适用以上属性,并且优先级高于<ul>如：
<ul><li>中国<ul type="circle"><li>北京</li><li type="disc">南京</li><li>上海</li></ul><li>美国</ul>效果图：
三-7-2、有序列表（元素前有序号）：
<ol><li>水果</li><li>蔬菜</li></ol>
有序列表也可以在原先的基础上继续<ol><li>。
<ol>的type属性有以下5种值:
1--表示以 1,2,3,4 来表示
a--表示以 a,b,c,d 来表示
A--表示以 A,B,C,D 来表示
i--表示以 i,ii ,iii 来表示
I--表示以 I,II,III来表示如：
<ol type="1"><li>植物</li><ol type="A"><li>水果</li><ol type="a"><li>草莓</li><ol type="I"><li>草莓籽</li><ol type="i"><li>圆的</li><li>方的</li></ol><li>草莓PP</li></ol><li>西瓜</li></ol><li>蔬菜</li></ol> <li>动物</li> </ol>效果：
三-7-3、自定义列表：
以<dl>开始,</dl>结束。列表中每个元素的标题使用<dt></dt>定义,后面跟随<dd></dd>用于描述列表中元素的内容。
如：
<dd><dt>标题1</dt><dd>标题1的具体内容</dd><dt>标题2</dt><dd>标题2的具体内容</dd><dd>标题2的具体内容</dd><dt>标题3</dt><dd>标题3的具体内容</dd> </dl>自定义列表也可以在原先的基础上嵌套使用。
效果：
（各类列表都可以相互嵌套组合使用）
三-8、表单：
三-8-1、细说表单：
什么是表单：
作用：收集用户信息
表单标签： <form></form> （不是from）
因为表单最终是需要提交数据给服务器的，所以form标签有一个action属性，用来指定服务器地址。如<form action=”xxxxx”></form>
画按钮可以使用input输入域。input有type属性，type属性的值有很多，如button等，但只有submit具有提交表单的能力，即：
<form><input type="submit"/> <!-- 这里可以使用<xxx/>结构 --></form>使用<input/>中的value属性可以设置提交按钮上显示的文本。如 value=”登录” ，默认显示“提交”。但此时还不能提交到服务器，须设置name。（往下会讲到）
表单和超链接的区别：
<form action="www.baidu.com"><input type="submit" value="百度"/></form>点击后就可以跳转到百度。那表单和超链接有什么区别呢？
表单有收集数据的输入框，超链接没有。因而表单可以收集用户输入数据再提交，超链接只能跳转固定页面（只能提交固定数据）。
input输入域还可以设置其他type值：
type="text" 单行文本框
type="password" 密码框，输入的内容会被遮挡
type="submit" 提交按钮，会向指定服务器地址提交<form</form>内所有输入数据
type="button" 普通按钮
type="reset" 重置按钮，会重置<form></form>内的所有输入数据
type="checkbox" 复选框
type="radio" 单选按钮（单选按钮和复选框需注意，使用细则在后面）
表单可结合表格来使用，以达到整齐的效果。
注意：
如果想提交内容到服务器，须在input内设置name属性让服务器知道这是什么。
即：
<input type="text" name="username" /> 该文本框输入为用户名<input type="password" name="username" /> 该文本框输入为密码另外，如果是账号密码输入框，那么<input/>的value不需要程序员来写，用户输入的内容就是value，如果有<input type=”text” name=”username” value=”HYF”/>，那么在用户名的输入框内会显示HYF,如果用户不删除它，那么将会把HYF作为用户名提交到服务器。value有默认值，如果不填则提交一个空字符串。（不是NULL串）
如果想提交给服务器，都必须设置name属性，包括复选框或者单选按钮！
但name属性的值是随意的，后端能看得懂就行。
表单是以什么格式提交给服务器的？
action?name=value&name=value&name=value&name=value……action为服务器地址，当按提交按钮后，浏览器会提供这个形式向服务器发送内容。（在地址栏可看到）。后端可提供 & 符号对字符串进行切割，在通过 = 符号对name和value进行切割然后进行其他操作。（ 注意此处的name和value只是一个变量名，提交的是name的内容和value的内容，即username=xxxx(用户输入的用户名)，userpwd=xxxx(用户输入的密码) ）。
<form action="www.baidu.com" method="post">不设置method默认为get值，会把用户提交的信息显示到浏览器的地址栏上。（即便是密码框输入的内容也会显示）
通过这个形式，我们也可以用超链接来提交数据：
<a href="www.baidu.com?username=hyf&userpwd=123456">超链接</a>超链接是get请求不会是post请求。
复选框type="checkbox" 和 单选按钮type="radio"的使用细则： ！！！！
例如男和女这两个input，如果要用单选按钮"radio"，因为需要提交内容给服务器，所以必须设置name属性，而且两个input的name属性的值须一样，这样浏览器才知道这两个单选按钮是同一组选项，才能达到只选一个的效果，不然即便两个input都是radio，只要name不同，也可以同时选上。
另外，因为男和女这两个字只是供用户参考，所以type内必须设置value属性提交给服务器让服务器得以区分，value属性的值项目内部人员自己定，可以是0和1。
再者，因为单选按钮都会默认选中一个，所以在默认选择的那个type内加上checked即可。
如：
<input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0"/>女同理，复选框type="checkbox"也要设置name和value。需要注意的是，复选框的name可以一致，但因为它是复选框，即便name一致也可以多选。
复选框type="checkbox" 默认选中的也可以加checked。
代码示例（注册表）：
<html><head><title>123456</title></head><body><form action="www.baidu.com"><table><tr><td>账号：</td><td><input type="text" name="username" /></td></tr><tr><td>密码：</td><td><input type="password" name="userpwd"/></td></tr><tr align="center"><td>性别：</td><td><input type="radio" name="sex" value="1" checked/>男 <input type="radio" name="sex" value="0"/>女</td></tr><tr align="center"><td>爱好：</td><td colspan="1"><input type="checkbox" name="interest" value="sing"/>唱<input type="checkbox" name="interest" value="jump"/>跳<input type="checkbox" name="interest" value="rap"/>Rap<input type="checkbox" name="interest" value="basketball"/>篮球</td></tr><tr align="center"><td>学历：</td><td><select name="grade" style="width: 100"><option value="zk">专科</option><option value="gz" selected>高中</option><option value="bk">本科</option><option value="ss">硕士</option><option value="bs">博士</option></select></td></tr><tr><td>简介：</td><td><textarea rows="5" cols="30" name="synopsis"></textarea></td></tr> <tr align="center"><td colspan="2"><input type="reset" value="重置"/> <input type="submit" value="登录"/></td></tr></table></form></body></html>效果图：
三-8-2、select 标签：
代码示例：
学历：<select name="grade"><option value="zk">专科</option><option value="gz" selected>高中</option><option value="bk">本科</option><option value="ss">硕士</option><option value="bs">博士</option></select>效果图：
grade是发送给服务器的变量名，zk、gz等是变量值，selected表示默认选项。
三-8-3、textarea 标签（文本域）：
代码示例：
简介：<textarea rows="10" cols="60" name="introduce"></textarea>效果图:
rows设置框显示的行数，cols设置框显示的列数。name是发送给服务器的变量名，文本框不需要设置value，用户输入的就是value。
三-8-4、"file"控件：
<input type="file" />上传文件专用。
效果图：
三-8-5、"hidden"控件：
<input type="hidden" name="xxxxxx" value="xxxxxx"/>在网页不会显示出来，但在表单提交的时候会一起提交。
但在地址栏能看见.
隐藏的不一定是保密的，有可能只是为了页面美观。
三-8-6、input 标签的 readonly 和 disabled 属性：
两个都是修饰<input>的，且都表示只读（只读value的内容），用户无法修改。（用户可见）
readonly修饰的<input>是白底，disabled修饰的<input>是灰底。
readonly修饰的<input>如果含name属性则它的value会被提交。
disabled修饰的<input>即便含name属性它的value也不会被提交。
用户代码：<input type="text" name="usercode" value="123" readonly><br>用户名称：<input type="text" name="username" value="123" disabled>
三-8-7、input 标签的 maxlength 属性：
maxlength可以限制<input>输入框所输入文本的长度：
<input type="text" maxlength="3" />修饰后，该文本框最多输入三个字符。
三-9、元素（节点）的id属性：
在HTML文档中，任何元素（）节点都有id属性，如<input>，包括但不限于<head>、<body>，甚至<html>都有id属性。
id属性可以自己命名。
表单在提交的时候，只和name属性有关，和id无关。
JavaScript可以对HTML文档进行增删改操作，而这都依赖于元素（节点）的id属性。通过id可以对元素（节点）的位置进行快速定位。
id是唯一的，不可以重复。name可以重复。
HTML文档可以看成是一棵树，树上有很多节点，每个节点又可以有很多子节点。这棵树也被称为DOM树。（Document）
<form id=”myform”><input type=”text” id=”username” name=”username” /><input type=”password” id=”userpwd” name=”userpwd” /></form>
三-10、div和span：
1、div和span是什么？有什么用？
div和span都可以称为“图层”、“盒子”，可以让页面更灵活地布局。最早是网页是采用table进行布局的，但table太死板了，很难做出好看的页面。现代的网页开发中基本都是采用div布局。
2、div默认占用一行，span不会。
3、div和span的单位是像素px。
4、div和span都可以嵌套。
四、参考文献：
HTML表格（table、tr、td、th、thead、tbody、tfoot标签）_拾Miss~博客-CSDN博客_table
img标签_二狗doggy的博客-CSDN博客
HTML列表 - 羽扇轻摇 - 博客园
深入浅出HTML（针对后端攻城狮）相关推荐
- 深入浅出CSS（针对后端攻城狮）
目录 什么是CSS: CSS的注释: 在HTML页面中嵌套使用CSS的三种方式: 第一种方式(内联定义方式): 第二种方式(定义内部样式块对象): 第三种方式(链入外部样式表文件): CSS样式的绝对 ...
- 一位Java开发攻城狮的自我修养之项目篇
攻城狮的自我修养之项目篇 基础知识 Java基础 SpingBoot SpringCloud LeetCode题库 大数据 项目实战 商城系统 权限管理系统 脚手架系统 人事管理系统 论坛系统 博客系 ...
- 【致敬未来的攻城狮计划】第1期 作业汇总贴 + 获奖公布
文章目录 一.写在前面 二.种子学员介绍 三.作业贴汇总 四.小小总结 五.获奖公布 六.学员有话说 七.特别致谢 一.写在前面 时间过得真快,距离 [致敬未来的攻城狮计划]第1期 的发起,已经过 ...
- python怎么把所有标点符号置空_Python从小白到攻城狮(1)——python环境搭建
我的微信公众号:代码视界,欢迎关注. Python介绍 Python是Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言,1991年发布第一版. Pyth ...
- 【网易云信招聘啦】216位攻城狮，呼唤7个好基友
Hi,猿 过年了 年终奖拿了没 老板给加薪没 耿耿于怀的你 是否各种隐忍沮丧 以下代表,你属于哪一个? 猿A 公司是创业公司,还未盈利,为了产品上线,付出很多,能力提升了很多.不过,项目不赚钱,没人在 ...
- Fiddler无所不能——之测试开发攻城狮必备神器
fiddler官网 https://www.progress.com/ 官网下载fiddler https://www.telerik.com/download/fiddler/fiddler4 f ...
- 活动报名 | 前端攻城狮该怎样跳脱“围城”的焦虑
活动报名 | 前端攻城狮该怎样跳脱"围城"的焦虑 原创: 京小云 京东云开发者社区 4天前 作为WEB2.0的产物,前端工程师这一相对较新的职业俨然变成了一颗?一样的存在--丰富 ...
- 关于那些最好玩的户外APP合集下（适合资深驴友、牛逼设计狮、装逼攻城狮）...
本文会陆续分享分析全国最好的30个户外APP(下载量均至少在30万级别以上),希望能给户外爱好者.Ui设计狮.户外APP开发攻城狮一些启示. 关于那些最好玩的户外APP合集上(适合资深驴友.牛逼设计狮 ...
- 秋招攻略—如何成为一名图像算法攻城狮（上篇）—知识学习篇
秋招攻略-如何成为一名图像算法攻城狮(上篇)-知识学习篇 从6月份开始一直到现在,5个月的秋招历程让我成长了许多,最终收到了华为.荣耀.vivo.科大讯飞.奥比中光.汇川等10余家公司的图像算法off ...
最新文章
- SAP QM 模块主数据
- 洛谷 1351 联合权值
- 商丘网络推广分析网站留不住用户的原因及SEO解决方法
- 下列代码之后的结果为（）？
- leetcode322. 零钱兑换
- python 字符串赋值操作(分别使用三 种分隔符),Python学习笔记（3）字符串,python,三...
- 互联网公司2014前端笔试面试题：HTML/CSS篇
- *.sln和*.suo文件的作用
- 微信二次修改微信号_微信正测试微信号修改功能：一年只有一次机会
- mvn dependency命令
- SDOD: Real-time Segmenting and Detecting 3D Objects by Depth（实时3D检测与分割）
- java 避免gc_减少JAVA GC
- python如何计数while循环次数_While循环计数
- 拼多多校招编程题--大整数相乘(Java实现)
- mysql-8.0.16-winx64_mysql-8.0.16-winx64的最新安装教程
- 1.OCR--文本检测算法FCENet
- CSP201803-4棋局评估
- arcgis中python坡度计算_ArcGIS坡度计算
- 百度在线html,百度编辑器-Ueditor
- Java Web中用Servlet编写简易计算器