HTML(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]换行标签

HTML中的文本不会自动换行,如果要换行,就需要使用专门的换行标签。

<br/>

换行标签是一个自闭合标签。 因为没有标签体。

		普通的文本普通的文普通的文普通的文普通的文
		<br/>
		普通的文普通的文普通的文普通的文

[4]特殊的字符

由于有些字符在HTML中有特殊的意义,比如:和  

>

如果要展示就不能使用 要使用特殊字符

<
< &lt;
> &gt;
空格 &nbsp;
&quot;
&copy;
<
<
>
 
"
©

[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: 根据属性值进行跨行。

td的属性:

colspan: 表示单元格跨列。根据属性值跨列。

rowspan: 根据属性值进行跨行。

编写任何表格的思路:

①明确每行有几个单元格。

所有的跨列全部向左靠拢。所有的跨行的单元格,全部向上靠拢。

②明确哪些单元格是跨行跨列的。

③按照上面明确的细节实现即可。

tips:

table和tr之间不能有任何其他的标签和文本。
tr和td之间不能有任何其他的内容。
所有要在表格中显示的内容,必须写在td中。
td里面可以写任何的其他的标签。

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:表示背景图片。

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>

表单元素:

标签,属性type决定元素是什么:

input

text 普通文本框
password 密码框
radio 单选按钮
checkbox 复选框
submit : 提交按钮
button: 普通的按钮
reseat : 重置按钮

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>
这里是申明,你必须同意
————————

program

What is a program?

The word program comes from life. In fact, it is a collection of steps to complete one thing.

The program we write is to let the computer complete a task and send a set of instructions to the computer.

What are instructions?

The so-called instruction is a command we send to the computer.

programing language

What is language?

Language is the tool we use to communicate (rules, protocols)

Programming languages are the rules by which we communicate with computers. We send instructions to the computer through programming language.

For beginners, learning any language starts with basic grammar rules.

Software

Software is relative to hardware.

The most basic and important software we use now is the operating system itself.

Hardware is: motherboard, CPU, memory, disk, etc. (visible, palpable)

Software: operating system, office software, development tools, etc.

Software is a collection of programs.

Functions of the software: ① store the user’s data from the user side to the storage side. ② Display the data on the storage side to users.

HTML

HTML: hypertext markup language.

HTML itself is interpreted and run by the browser (software).

The browser renders the page according to the HTML code:

How do we get the web pages we usually see?

All computers are connected to the Internet. When we enter the web address, the web address will be converted to the corresponding IP address through the DNS server. We find the server through this IP address,

And downloaded the HTML code corresponding to this web page from the server. Interpret and run locally.

HTML文档

Basic structure

[1] Documents

The file suffixes of HTML documents are HTML or htm。

[2] Label

HTML language is composed of tags. Labels generally have three parts: start label, label body and end label

Start label

<h1>

Label body

你好!!

End tag

</h1>

Use the start tag and end tag to describe the label body.

[3] Basic structure of HTML document

<html>    <head>        <title>这个是一个HTML文档</title>    </head>    <body>        这里是文档体,就是我们要展示的内容。(超链接,文本,图片,视频等等)    </body></html>

TISP: HTML documents can only have one root node. A node is a pair of labels. It means that there can only be one set of labels on the outside.

Tags can be nested.

Text description text

What is a plain text file.

The so-called plain text means that no other information is recorded except the text content in the file. Almost all programming language source files are plain text files.

Word in office records the format and font of the text in the document, so it is not a plain text file.

Html is also used to render text, fonts, pictures and so on, but html is plain text. How does HTML tag this content?

HTML uses text to describe text:

<i>旗木卡卡西</i>  

The above means that the internal text is italicized. Itself is also a plain text.

<i>
<i>

Case problem

In theory, html is case insensitive. But usually lowercase. Because the browser will convert uppercase to lowercase before interpreting this code.

development tool

There are many HTML development tools.

For example: Notepad, DW, < strong > hbuilder < / strong >, vscode, webstorm, sublime, etc.

Hbuilder is out of the box and does not need to be installed.

The first line of the document is the declaration. The following is the basic structure of HTML.

We can add our own titles and contents:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>这是HBuilder创建的HTML页面</title>    </head>    <body>        <h1>一级标题</h1>        <p>这是一个段落</p>    </body></html>

Common tags for HTML

HTML tags mainly express a < strong > semantic < / strong >.

[1] Title label

The title in html is divided into six levels. The title here is just like the title in word.

h1~h6。

H1 represents the first level title and H6 represents the sixth level title.

        <h1>一级标题</h1>        <h2>二级标题</h2>        <h3>三级标题</h3>        <h4>四级标题</h4>        <h5>五级标题</h5>        <h6>六级标题</h6>

The semantics of the H tag means that the text is a title, which has nothing to do with the font size (the font style is controlled through CSS).

[2] Paragraph label

To display any text in HTML, you can write it directly. However, to control the structure, you need to use some tags.

        普通的文本        <p>曾经沧海难为水,</p>        <p>除却巫山不是云。</p>

Both paragraph and title labels wrap automatically. The key meaning is that this piece is a paragraph.

[3] Wrap label

The text in HTML will not wrap automatically. If you want to wrap, you need to use a special wrap tag.

<br/>

The newline label is a self closing label. Because there is no label body.

		普通的文本普通的文普通的文普通的文普通的文
		<br/>
		普通的文普通的文普通的文普通的文

[4] Special characters

Because some characters have special meaning in HTML, such as and

>

If you want to display, you can’t use special characters

<
< &lt;
> &gt;
空格 &nbsp;
&quot;
&copy;
<
<
>
 
"
©

[5] Ordered list

Show list on page

Case:

<ol>
    <li>吃了没?</li>
    <li>没吃!</li>
    <li>额</li>
</ol>

We can modify the representation of the order of the list through the attributes of the ol tag:

[6] Unordered list

Case:

<ul>
    <li>先吃饭</li>
    <li>在烧烤</li>
    <li>再来一打雪花啤酒</li>
</ul>

We can also adjust the icon displayed in front of the column label through the type attribute of UL:

[7] Hyperlinks

Hyperlinks are other resources that you can click to enter the connection

<a href="http://www.baidu.com">去百度</a>
<a href="#">我是超链接</a>

Href fill in the location of the connected resource (other web pages or web addresses)

Hyperlinks are a tags and must have a href attribute.

[8] Picture

Use labels to display pictures on the page

img
<img src="ykll.jpg">

The SRC attribute of img writes the address of the picture.

How should I write the address of the picture?

The picture is in the root directory of the project (the picture and HTML file are in the same directory). We can write the name of the picture directly on the page.

Here its practical is the relative position. In fact, we can also use absolute position.

Relative position: relative to the current HTML file.

Absolute position: the position starting from the drive letter is the absolute position.

Generally, relative position is used. Because I’m not sure what other people’s directory path is.

IMG also has two properties: width and height, which can control the width and height of the picture.

<img width="100" height="300" src="ykll.jpg">

If only one of the two is set, the picture will be scaled, but if both are set, the picture will be pulled up.

Label properties

Tag properties are the contents added inside the tag at the beginning of the tag. These contents can often control some display forms of the tag (in fact, CSS will be used to control them in the future).

Attributes have attribute names and attribute values.

Case:

<img width="100" height="300" src="ykll.jpg">

Where width, height and Src are attributes. Each attribute has its own special meaning.

HTML标签

[0] font common

: bold font

<b>

: italic

<i>

: the performance is bold font and semantic emphasis on text.

<strong>

You can directly view the w3school manual online https://www.w3school.com.cn/

Rookie tutorial, etc. https://www.runoob.com/

[1] Forms

To write a table in HTML, you need to use three Tags:

: represents a table.

table

: indicates a line.

tr

: represents a cell.

td

Case 1: a table with three rows and five columns.

        <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>

Case 2: three rows and five columns. The second cell in the first row spans four columns (colSpan). The first row has only two cells.

        <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>

Case 3: a table with three rows and five columns. The fifth cell in the second row spans two rows (rowspan). So there are only four cells left in the third row.

    <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>

Case 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>

Properties of TD:
ColSpan: indicates that cells span columns. Span columns based on attribute values.
Rowspan: cross row by attribute value.

Properties of TD:

ColSpan: indicates that cells span columns. Span columns based on attribute values.

Rowspan: cross row by attribute value.

Ideas for writing any form:

① Specify how many cells each row has.

All straddle columns close to the left. All cross row cells, all close up.

② Specify which cells are cross row and cross column.

③ It can be realized according to the clear details above.

tips:

There cannot be any other labels or text between table and tr.
There can be no other content between TR and TD.
All contents to be displayed in the table must be written in TD.
TD can write any other label.

There cannot be any other labels or text between table and tr.

There can be no other content between TR and TD.

All contents to be displayed in the table must be written in TD.

TD can write any other label.

In the of table, there is also a label: th (thead), meaning: indicates the header.

Usually in the first row or column.

Case:

    <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>

< strong > table modification < / strong >

Common attributes:

Width: can be written on the tab of table, TD and th. Indicates the width of a table or column.
Height: it can be written on table, TD, th, tr. Indicates the height of a table or row.
Align: indicates the alignment.
If it is written on a table, it indicates the alignment of the table in the parent container.
If it is written on TD or th, it indicates the alignment of the internal text.
Valign: can only be written on TD or th, indicating the vertical alignment of the contents in TD.
Border: only table has the border attribute, which is 0 by default. If the border attribute is added to the table, no matter how many, the default TD has a border of 1 pixel.
Bordercolor: sets the color of the border.
Bgcolor: indicates the background color.
Bgimage: represents the background picture.

Width: can be written on the tab of table, TD and th. Indicates the width of a table or column.

Height: it can be written on table, TD, th, tr. Indicates the height of a table or row.

Align: indicates the alignment.

If it is written on a table, it indicates the alignment of the table in the parent container.

If it is written on TD or th, it indicates the alignment of the internal text.

Valign: can only be written on TD or th, indicating the vertical alignment of the contents in TD.

Border: only table has the border attribute, which is 0 by default. If the border attribute is added to the table, no matter how many, the default TD has a border of 1 pixel.

Bordercolor: sets the color of the border.

Bgcolor: indicates the background color.

Bgimage: represents the background picture.

Other questions:

The align attribute of table can set the horizontal alignment of the table. The default is left alignment. We can use center to center it.

TD’s align sets the horizontal alignment of text.

Vlign of TD: sets the vertical alignment of content.

TD width and height. The height of a TD will affect a row, and the width of a TD will affect a column. If more than one width is set for a column, the width is set according to the widest.

The background color of table will affect the whole table. The background color of TR overrides the color of the table. TD’s background color will override tr’s.

颜色的写法:[1]直接写英文单词。[2]16进制的数字设置RGB的颜色。[3]使用rgb或者rgba函数。

Case:

        <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>

Fill spacing and spacing of tables

Fill distance: cellpadding sets the distance between the contents of the cell and the cell border

Spacing: cellspacing sets the distance between cells and the distance between cells and the table border.

In general, both values are set to 0

Case:

    <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>

Use the form to make a resume

realization:

<!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>

form

Two functions of web pages:

[1] Display information.

[2] Collect information.

Forms are used to collect information.

In HTML, the form is wrapped with tags.

form

Form elements mainly include:,,,

input
select
button
textarea

Registration form case:

		<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>

Form elements:

Tag, the attribute type determines what the element is:

input

Textnormal text box
Password password box
Radio button
Checkbox check box
Submit: Submit button
Button: normal button
Reset: reset button

Textnormal text box

Password password box

Radio button

Checkbox check box

Submit: Submit button

Button: normal button

Reset: reset button

Select: drop down list

Textarea: multiline text box

< strong > form element attributes < / strong >

Size: indicates the length of the input box (single line text box and password box)

When size is used for select, it indicates the number of items displayed.

MaxLength: controls the maximum number of characters in the input box.

Readonly: indicates read-only. As long as this attribute exists, the input box is read-only. Single line text box, password box, multi line text box.

Checked: applicable to radio and checkbox, indicating the selected status. This property takes effect as long as it exists.

Selected: applicable to the sub element option of select, indicating that it is selected. It takes effect as long as it exists.

Rows and cols: only applicable to textarea, indicating the width and number of rows of textarea. The number of rows here represents the number of rows displayed, not the maximum number of rows.

Value: the single line text box and password box represent the default value.

In the radio button, check button and drop-down list, it indicates the value submitted when submitting the form after being selected.

In a button, value is the text displayed on the button.

ID: any element in HTML can have an ID attribute. Theoretically, this attribute value should be unique in the whole page.

The only sign of this element (as in ID number) is often used for element selectors in CSS and JS.

Name: most HTML elements have a name attribute, which can be repeated and will be used as the name value of the element when submitting the form.

Multiple: the exclusive attribute of the select tag, indicating that the select can be multiple selected. It takes effect as long as it exists.

Disabled: indicates that this element is disabled. This property takes effect as soon as it appears.

frame

Background management interface structure:

All three parts are independent pages.

Implementation strategy 1 (not recommended)

Implementation using 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>

If you want to realize the click menu, you need to switch the content part and adjust it.

① Add the name attribute to the frame of the content.

② All menu hyperlinks add the target attribute to point to content.

< strong > use iframe to implement the background management page < / strong >

Iframe can be placed anywhere on the page. Multiple can appear.

Case:

Use table for a layout:

		<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>
这里是申明,你必须同意