HTML
作者：互联网
程序
什么是程序？
程序一词来自于生活。其实就是完成一件事，各个步骤的集合。
我们写的程序，就是为了让计算机完成一个任务，给计算机发送的指令集合。
什么是指令？
所谓指令就是我们给计算机发送的一道命令。
编程语言
什么是语言？
语言是我们用来沟通的工具（规则，协议）
编程语言就是我们和计算机通信的规则。 我们就是通过编程语言给计算机发送指令。
对于新手来说，学习任何语言就是从基本的语法规则开始。
软件
软件相对于硬件而言。
我们现在使用的最基本，最重要的软件就是操作系统本身。
硬件就是：主板，CPU，内存，磁盘等等。（看得见，摸得着的）
软件：操作系统，office软件，开发工具等等。
软件就是一堆程序的集合。
软件的功能：①将用户的数据从用户端，存储到存储端。②将存储端的数据展示给用户。
HTML
HTML：超文本标记语言。
HTML本身是由浏览器（软件）解释运行的。
浏览器根据HTML代码渲染页面：
我们平时看到的网页是怎么来的？
所有的计算机都是连接在互联网上的，当我们输入网址的时候，这个网址会通过DNS服务器转换为对应的IP地址，我们通过这个IP地址找到服务器，
并且从服务器上下载了这个网页对应的HTML代码。 在本地进行解释和运行。
HTML文档
基本结构
[1]文件
HTML文档的文件后缀都是.html或者.htm。
[2]标签
HTML语言都是标签组成的。标签一般都是有三个部分的，开始标签，标签体，结束标签
<h1>开始标签
你好！! 标签体
</h1> 结束标签
使用使用开始标签和结束标签来描述标签体。
[3]HTML文档的基本结构
<html>
<head>
<title>这个是一个HTML文档</title>
</head>
<body>
这里是文档体，就是我们要展示的内容。（超链接，文本，图片，视频等等）
</body>
</html>
tisp:HTML文档只能有一个根节点。一个节点，就是一对标签。意思就是最外面只能有一组标签。
标签是可以嵌套的。
文本描述文本
什么是纯文本文件。
所谓纯文本，就是除过文件中的文本内容之外，不记录任何其他的信息。几乎所有的编程语言的源文件都是纯文本文件。
office中的word要记录文档中的文字的格式和字体，所以它不是纯文本文件。
HTML也是来渲染文本，字体，图片等等这些内容，但是HTML是纯文本。HTML是如何标记这些内容呢？
HTML就是使用文本来描述文本：
<i>旗木卡卡西</i>
上面的意思就是<i>内部的文就是斜体。 <i>本身也是一个纯文本。
大小写问题
理论上HTML是不区分大小写的。但是一般小写。因为浏览器在解释这个代码之前，会先将大写转换为小写在解释运行。
开发工具
HTML的开发工具特别的多。
比如：记事本，DW，HBuilder，VSCode，webStorm，sublime等等。
HBuilder开箱即用，不需要安装。
文档的第一行是申明。下面的就是HTML的基本结构。
我们可以自己添加标题和内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是HBuilder创建的HTML页面</title>
</head>
<body>
<h1>一级标题</h1>
<p>这是一个段落</p>
</body>
</html>
HTML的常用标签
HTML标签主要是表达一个语意。
[1]标题标签
HTML中的标题分为6级，这里的标题就像word中的标题一样。
h1~h6。
h1表示一级标题，h6表示六级标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
h标签的语意是表示这个文本是标题，与字体大小没有关系（字体的样式我们是通过CSS来控制的）。
[2]段落标签
在HTML中要显示任何文本，都是直接写即可。但是要控制结构，就要使用一些标签。
普通的文本
<p>曾经沧海难为水，</p>
<p>除却巫山不是云。</p>
段落和标题标签都会自动的换行换段。 其重点意思还是表示这一块是一个段落。
[3]换行标签
<br/> HTML中的文本不会自动换行，如果要换行，就需要使用专门的换行标签。
换行标签是一个自闭合标签。 因为没有标签体。
普通的文本普通的文普通的文普通的文普通的文 <br/> 普通的文普通的文普通的文普通的文
[4]特殊的字符
由于有些字符在HTML中有特殊的意义，比如：< 和 >
如果要展示就不能使用< 要使用特殊字符
< | < |
|---|---|
| > | > |
| 空格 | |
| “ | " |
| © | © |
[5]有序列表
在页面展示列表
案例：
<ol>
<li>吃了没？</li>
<li>没吃！</li>
<li>额</li>
</ol>
我们可以通过ol标签的属性，修改列表的顺序的表示方式：
[6]无序列表
案例：
<ul>
<li>先吃饭</li>
<li>在烧烤</li>
<li>再来一打雪花啤酒</li>
</ul>
我们也可以通过ul的type属性调整列标前显示的图标：
[7]超链接
超链接就是可以通过点击进入这个连接指定的其他资源
<a href="http://www.baidu.com">去百度</a>
<a href="#">我是超链接</a>
href中填写连接的资源的位置（其他的网页或者网址）
超链接是a标签，必须有href属性。
[8]图片
页面上显示图片使用标签img
<img src="ykll.jpg">
img的src属性写图片的地址。
图片的地址应该怎么写？
图片在项目的根目录下（图片和HTML文件在一个目录下），我们可以在页面直接写图片的名字。
这里其实用到的就是相对位置。其实我们也可以使用绝对位置。
相对位置：相对与当前的HTML文件而言的位置。
绝对位置：从盘符开始的位置就是绝对位置。
一般都是使用相对位置。因为不确定别人的目录路径是什么。
img还有两个属性分别是：width和height 这两个属性可以控制图片的宽度和高度。
<img width="100" height="300" src="ykll.jpg">
这两个如果只设置一个，图片会按照比例缩放，但是如果两个都设置，图片会被拉升。
标签的属性
标签的属性，就是在标签的开始标签内部 添加的一些内容，这些内容往往可以控制标签的一些展示形式（其实未来都是使用CSS来控制）。
属性都是有属性名和属性值的。
案例：
<img width="100" height="300" src="ykll.jpg">
其中width和height和src就是属性。 每个属性有自己特殊的意义。
HTML标签
[0]字体常用
<b> ：字体加粗
<i> : 斜体
<strong> : 表现是字体加粗，语意强调文本。
可以直接在线查看w3school的手册 https://www.w3school.com.cn/
菜鸟教程等。https://www.runoob.com/
[1]表格
在HTML中编写表格，需要用到三个标签：
table: 表示一个表格。
tr: 表示一行。
td:表示一个单元格。
案例1：三行五列的表格。
<table border="1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
</tr>
</table>
案例2： 三行五列，第一行的第二个单元格跨4列(colspan)。第一行只有两个单元格。
<table border="1" align="center">
<tr>
<td>1-1</td>
<td colspan="4">1-2</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
</tr>
</table>
案例3：三行五列的表格，第二行的第五个单元格跨两行（rowspan）。 所以第三行就剩4个单元格了。
<table border="1" align="center">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-2</td>
<td>1-2</td>
</tr>
</table>
案例4：
<table width="200" border="1" align="center">
<tr>
<td>1</td>
<td colspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td rowspan="2">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
td的属性:
colspan: 表示单元格跨列。根据属性值跨列。
rowspan: 根据属性值进行跨行。
编写任何表格的思路：
①明确每行有几个单元格。
所有的跨列全部向左靠拢。所有的跨行的单元格，全部向上靠拢。
②明确哪些单元格是跨行跨列的。
③按照上面明确的细节实现即可。
tips:
table和tr之间不能有任何其他的标签和文本。
tr和td之间不能有任何其他的内容。
所有要在表格中显示的内容，必须写在td中。
td里面可以写任何的其他的标签。
在table的中，还有一个标签： th （thead），语意：表示表头。
一般都是在第一行或者第一列。
案例：
<table width="300" border="1" align="center">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>大学体育</th>
</tr>
<tr>
<th>卡卡西</th>
<td>86</td>
<td>88</td>
<td>99</td>
</tr>
<tr>
<th>卡卡东</th>
<td>86</td>
<td>88</td>
<td>99</td>
</tr>
<tr>
<th>卡卡北</th>
<td>86</td>
<td>88</td>
<td>99</td>
</tr>
</table>
表格的修饰
常用的属性：
width: 可以写在table和td和th标签上。表示表格或者列的宽度。
height：可以写在table，td，th，tr上。表示表格或者行的高度。
align：表示对齐方式。
如果写在table上，表示这个table在父容器中的对齐方式。
如果写在td或者th上，表示内部文本的对齐方式。
valign: 只能写在td或者th上，表示td中的内容的垂直对齐方式。
border：只有table有border属性，默认是0。如果给table添加了border属性，无论是多少，默认多有的td都有1个像素的边框。
bordercolor：设置边框的颜色的。
bgcolor:表示背景颜色。
bgimage：表示背景图片。
其他的问题：
table的align属性，可以设置表格的水平对齐方式。默认是left靠左对齐。我们可以使用center让其居中。
td的align是设置文本的水平对齐方式的。
td的vlign：设置内容垂直对齐方式。
td的宽度和高度。一个td的高度，会影响一行，一个td的宽度，会影响一列。如果一列设置多个宽度，则按照最宽的来。
table的背景颜色会影响整个表格。tr的背景颜色会覆盖表格的。td的背景颜色会覆盖tr的。
颜色的写法：
[1]直接写英文单词。
[2]16进制的数字设置RGB的颜色。
[3]使用rgb或者rgba函数。
案例：
<table bgcolor="pink" width="500" height="300" border="10" align="center">
<tr bgcolor="#cccccc">
<th width="250">姓名</th>
<th>语文</th>
<th>数学</th>
<th bgcolor="rgb(255,255,0)">大学体育</th>
</tr>
<tr>
<th height="150" align="right">卡卡西</th>
<td>86</td>
<td valign="top" align="center">88</td>
<td valign="bottom">99</td>
</tr>
<tr>
<th width="300">卡卡东</th>
<td>86</td>
<td>88</td>
<td>99</td>
</tr>
<tr>
<th width="100">卡卡北</th>
<td>86</td>
<td>88</td>
<td>99</td>
</tr>
</table>
表格的填充距和间距
填充距：cellpadding 设置单元格中内容和单元格边框之间的距离
间距：cellspacing 设置单元格与单元格之间的距离，以及单元格与表格边框之间的距离。
一般情况下，这两个值都是设置为0.
案例：
<table cellspacing="0" bordercolor="#ffffff" cellpadding="0" bgcolor="#eeeeee" width="500" border="1" align="center">
<tr bgcolor="#ccc" >
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th >大学体育</th>
</tr>
<tr bgcolor="#ffffff">
<th>卡卡西</th>
<td>86</td>
<td>88</td>
<td >99</td>
</tr>
<tr>
<th>卡卡东</th>
<td>86</td>
<td>88</td>
<td>99</td>
</tr>
<tr bgcolor="#fff">
<th>卡卡北</th>
<td>86</td>
<td>88</td>
<td>99</td>
</tr>
<tr>
<th>卡卡南</th>
<td>86</td>
<td>88</td>
<td>99</td>
</tr>
</table>
使用表格做一个个人简历
实现：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人简历</title> </head> <body> <table border="1" align="center" width="1024" cellpadding="0" cellspacing="0"> <tr> <td> <h2>基本信息</h2> <table> <td width="800"> <table> <tr> <td align="right">姓名：</td> <td align="center" width="200">小王</td> <td align="right">电话：</td> <td align="center" width="200">13813813838</td> </tr> <tr> <td align="right">籍贯：</td> <td align="center" width="200">江苏常州</td> <td align="right">年龄：</td> <td align="center" width="200">22</td> </tr> <tr> <td align="right">政治面貌：</td> <td align="center" width="200">党员</td> <td align="right">邮箱：</td> <td align="center" width="200">xiaowang@123.com</td> </tr> </table> </td> <td> <img src="images/head.png" alt=""> </td> </table> </td> </tr> <tr> <td> <h2>教育经历</h2> <table width="80%"> <tr> <td align="center">2019~2022</td> <td align="center">江苏大学</td> <td align="center">计算机科学与技术</td> <td align="center">本科</td> </tr> <tr> <td align="center">2022~2025</td> <td align="center">复旦大学</td> <td align="center">电气工程</td> <td align="center">研究生</td> </tr> </table> </td> </tr> <tr> <td> <h2>工作经历</h2> <table width="80%"> <tr> <td align="center">2019~2022</td> <td align="center">恒大科技</td> <td align="center">程序员</td> </tr> <tr> <td colspan="3"> <p> 主要的任务就是实现需求！ </p> </td> </tr> <tr> <td align="center">2019~2022</td> <td align="center">恒大科技</td> <td align="center">程序员</td> </tr> <tr> <td colspan="3"> <p> 主要的任务就是实现需求！ </p> </td> </tr> </table> </td> </tr> <tr> <td> <h2>技术栈</h2> <ul> <li>大前端</li> <li>Java控制挖掘机炒菜</li> <li>xxxxxxxx</li> </ul> </td> </tr> <tr> <td> <h2>项目经验</h2> <table border="1" align="center" cellpadding="10" cellspacing="0" width="100%"> <tr> <td align="right" width="15%">项目名称</td> <td align="left" width="85%"> <b>智能社区（一期）</b> </td> </tr> <tr> <td align="right" width="15%">周期</td> <td align="left" width="85%"> 3个月 </td> </tr> <tr> <td align="right" width="15%">开发环境</td> <td align="left" width="85%"> xxxxxxx </td> </tr> <tr> <td align="right" width="15%">项目描述</td> <td align="left" width="85%"> 一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述 </td> </tr> <tr> <td align="right" width="15%">个人职责</td> <td align="left" width="85%"> 个人职责个人职责个人职责 </td> </tr> </table> <table border="1" align="center" cellpadding="10" cellspacing="0" width="100%"> <tr> <td align="right" width="15%">项目名称</td> <td align="left" width="85%"> <b>智能社区（一期）</b> </td> </tr> <tr> <td align="right" width="15%">周期</td> <td align="left" width="85%"> 3个月 </td> </tr> <tr> <td align="right" width="15%">开发环境</td> <td align="left" width="85%"> xxxxxxx </td> </tr> <tr> <td align="right" width="15%">项目描述</td> <td align="left" width="85%"> 一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述 </td> </tr> <tr> <td align="right" width="15%">个人职责</td> <td align="left" width="85%"> 个人职责个人职责个人职责 </td> </tr> </table> <table border="1" align="center" cellpadding="10" cellspacing="0" width="100%"> <tr> <td align="right" width="15%">项目名称</td> <td align="left" width="85%"> <b>智能社区（一期）</b> </td> </tr> <tr> <td align="right" width="15%">周期</td> <td align="left" width="85%"> 3个月 </td> </tr> <tr> <td align="right" width="15%">开发环境</td> <td align="left" width="85%"> xxxxxxx </td> </tr> <tr> <td align="right" width="15%">项目描述</td> <td align="left" width="85%"> 一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述 </td> </tr> <tr> <td align="right" width="15%">个人职责</td> <td align="left" width="85%"> 个人职责个人职责个人职责 </td> </tr> </table> </td> </tr> </table> </body> </html>
表单
网页的两个作用：
[1] 展示信息。
[2]收集信息。
收集信息就要用到表单。
在HTML中表单是使用form标签包裹的。
表单元素主要包括：input,select,button,textarea
注册表单案例：
<form> <table width="500" align="center" cellpadding="5" cellspacing="0"> <tr> <th colspan="2"> <h2>用户注册</h2> </th> </tr> <tr> <td width="50%" align="right">用户名: </td> <td align="left"> <!-- HTML注释 --> <!-- 单行文输入框 --> <input type="text"/> </td> </tr> <tr> <td width="50%" align="right">密码: </td> <td align="left"> <!-- HTML注释 --> <!-- 密码框 --> <input type="password"/> </td> </tr> <tr> <td width="50%" align="right">确认密码: </td> <td align="left"> <!-- HTML注释 --> <!-- 密码框 --> <input type="password"/> </td> </tr> <tr> <td width="50%" align="right">性别: </td> <td align="left"> <!-- 单选按钮 --> <input type="radio" name="gender" value="1"/>男 <input type="radio" name="gender" value="2"/>女 <input type="radio" name="gender" value="3"/>保密 </td> </tr> <tr> <td width="50%" align="right">爱好: </td> <td align="left"> <!-- 复选框 --> <input type="checkbox" name="enjoy" value="1"/>农药 <input type="checkbox" name="enjoy" value="2"/>吃鸡 <input type="checkbox" name="enjoy" value="3"/>java </td> </tr> <tr> <td width="50%" align="right">职业: </td> <td align="left"> <!-- 下拉列表 --> <select> <option value="-1">请选择职业</option> <option value="1">战士</option> <option value="2">法师</option> <option value="3">刺客</option> <option value="4">坦克</option> </select> </td> </tr> <tr> <td width="50%" align="right">申明: </td> <td align="left"> <!-- 多行文本框 --> <textarea>这里是申明,你必须同意这里是申明,你必须同意这里是申明,你必须同意这里是申明,你必须同意</textarea>
</td> </tr> <tr> <td colspan="2" align="center"> <!-- 提交按钮可以提交表单 --> <input type="submit" value="提交"/> <input type="button" value="取消"/> <input type="reset" value="重置"/> </td> </tr> </table> </form>
表单元素：
input标签，属性type决定元素是什么：
text 普通文本框
password 密码框
radio 单选按钮
checkbox 复选框
submit ： 提交按钮
button： 普通的按钮
reseat ： 重置按钮
select：下拉列表
textarea : 多行文本框
表单元素的属性
size：表示输入框的长度（单行文本框和密码框）
当size作用于select的时候，表示展示的项目的数量。
maxlength : 控制输入框的最大的字符个数。
readonly：表示只读。 这个属性只要存在，则这个输入框就是只读的。单行文本框，密码框，多行文本框。
checked : 适用于radio和checkbox，表示选中状态。这个属性只要存在就生效。
selected：适用于select的子元素option，表示选中。 只要存在就生效。
rows和cols：仅仅适用于textarea，表示textarea的宽度和行数。这里的行数表示显示的行数，不是最大行数。
value：单行文本框和密码框表示默认值。
在单选按钮，复选按钮，下拉列表中，表示被选中之后提交表单时提交的值。
在按钮中，value就是按钮上显示的文本。
id：HTML中的任何一个元素都可以有id属性，这个属性值理论上应该在整个页面是唯一的。
就是这个元素的唯一标志（就和身份证号一样），往往是用来做CSS和JS中的元素选择器使用。
name：HTML的大部分元素都有，表单元素都有name属性，这个属性可以重复，将作为提交表单的时候的这个元素的name值。
multiple：select标签的专有属性，表示这个select可以多选。只要存在就生效。
disabled : 表示这个元素处于禁用状态。 这个属性，出现即生效。
框架
后台的管理界面结构：
三个部分都是独立的页面。
实现的策略方式1（不推荐）
使用frameset实现：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 使用frameset 就必须删除body --> <frameset rows="15%,*"> <frame src="top.html" /> <!-- 上面的15% 就是放top.html 页面 --> <!-- 其余的85放下面的frameset --> <frameset cols="20%,*"> <!-- 左边20%放menu.html 其余的放welcome.html --> <frame src="menu.html" /> <frame src="welcome.html" > </frameset> </frameset> </html>
如果要实现单击菜单，就切换内容部分，就需要调整。
①给内容的frame添加name属性。
②所有的菜单的超链接全部添加target属性指向content。
使用iframe实现后台管理页面
iframe可以放在页面的任何位置。可以出现多个。
案例：
使用table进行一个布局：
<table border="1" cellspacing="0" cellpadding="0" width="90%" align="center" height="800"> <tr> <td colspan="2" height="100"> <h1>XXXX信息管理系统</h1> </td> </tr> <tr> <td valign="top" width="20%"> <ul> <li> <a href="user-add.html" target="content">添加用户 </a> </li> <li> <a href="user-list.html" target="content">用户列表 </a> </li> <li> <a href="">添加商品 </a> </li> <li> <a href="">商品列表 </a> </li> </ul> </td> <td> <iframe name="content" src="welcome.html" frameborder="0" width="100%" height="100%"></iframe> </td> </tr> </table>
这里是申明,你必须同意
标签：标签,HTML,一段,td,属性,描述 来源： https://www.cnblogs.com/wangmindeboke/p/15807876.html