超文本编辑语言
超文本：超出文本的范畴
标记：html所有的操作都是标记，标记就是标签<标签名称>
网页语言：
<html>
<head>
<title>这是一个标签</title>
</head>
<body>
<font size ="5" color="red">第一个html程序!</font>
<br/>
这是一第一个html程序2！
</body>
</html>
html的规范：
1.一个html文件开始标签和结束的标签<html></html>
定义一个java方法{}
2.html包含两部分内容
<head>设置相关信息</head>
<body>现实在页面上的内容都写在body里面</body>
3.html的标签有开始标签，也有结束标签
<head></head>
4.html的代码不区分大小写
5.有些标签，没有结束标签
比如 换行<br /> <hr />
html中常用的标签：
- 文字标签和注释标签：
- <font><font/>
- 属性：
size：文字的大小，取值范围1-7，超出了默认还是7
color：文字颜色 - 两种表示方式
英文单词：red green
使用十六进制数表示：#ffffff：RGB
-注释标签：
java的注释三种：
html中的注释：
- 标题标签、水平线标签和特殊字符
- 标题标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
从h1-h6，大小依次变小，同时回自动换行 - 水平线标签
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
size：水平线的粗细，取值1-7
color：颜色
- 特殊字符
<:<
>:>
空格：
&:&
双引号"："
- 列表标签
- 定义列表：
<dl>
<dt>软件工程</dt>
<dd>1701</dd>
<dd>1701</dd>
<dd>1701</dd>
</dl>
- 有序列表
属性type：设置排序方式1（默认方式）a i
<ol type="a">
<li>1701</li>
<li>1702</li>
<li>1703</li>
<ol/>
- 无序列表
<ul><ul/>:表示无序列表的范围
属性：type：空心圆circle、实心圆disc、实心方块square、默认disc
<ul type="square">
<li>1701</li>
<li>1702</li>
<li>1703</li>
</ul>
-
图像标签
-
<img src="图片的路径"/>
scr:图片的路径
width：图片的宽度
height：图片的高度
alt：图片上显示的文字，把鼠标移到图片上，停留片刻显示的内容，有些浏览器不显示 -
绝对路径：
绝对路径是指完整的网址，假设图一中项目的网站域名为www.test.com，那么000.css的绝对路径应该是
https://www.test.com/HelloHBuilder/html/css/css1/000.css。
相对路径：
是从当前路径开始的路径
c:\Users\asus\Desktop\0412\day01\code\4.html
c:\Users\asus\Desktop\0412\day01\c.png
html文件所在的目录和图片是一个目录 -
图片和html文件是什么关系？
图片html的所在目录的上层目录day01 -
表示 上层路径
../
../:day01
../c.png
-
超链接
<a href ="链接到资源的路径">显示在页面上内容</a>
href：链接的资源的地址
target：设置打开的方式，默认是在当前页打开
——blank：在一个新的窗口打开
——self：在当前页打开默认
- 当超链接不需要到任何地址是，在href里面加#
<a href="#">这是一个超链接</a> -
定位资源
定义一个位置：
<a name="top">顶部</a>
回到顶部:
<a href="#top">回到顶部</a> - 原样输出：<pre></pre>
-
表格标签（重要的标签）
可以对数据进行格式化，是数据显示更加清晰
- <table></table>:表示表格的范围
border:表格线
bordercolor：表格线的颜色
cellspacing:单元格直接的距离
width：表格的宽度
heigh：表格的高度
在table里面<tr></tr>
-设置对其方式 align：left
在tr里面<td></td>
使用th也可以表示单元格
-表示可以实现居中和加粗
<table border="1" bordercolor = "blue" cellspacing= "0" width = "200" height= "150">
</table>
-
画图分析表格的写法
首先定义一个表格的范围使用table
定义一行使用tr
定义一个单元格用td -
操作技巧
首先数有多少行，数每行里面有多少单元格 -
表格的标题
<caption></caption> -
合并单元格
-rowspan:跨行
-colspan:跨列
<td copsan = "3" > 人员信息</td>
-
表单标签
-
在输入项中必须有一个name的属性
-
可以提交数据，这个过程可以使用表单标签来实现
-
<form></form>:定义一个表单标签
- action:提交到的地址，默认条道当前的页面
- method：表单提及方式
常用的有get和post方法
post与 get的区别
1.get请求地址栏会携带提交的数据，post不会携带
2.get方法请求安全较低，post较高
3.get 请求数据大小有限制，post没有限制
-
enctype：做文件上传的时候需要这样的属性
-
输入项：可以输入内容，可以选择内容的部分
大部分的输入项可以使用<input type="输入项的类型"/>- 普通的输入项：
<input type = "text"/> - 密码输入项：
<input type = "password"/> - 单选输入项：
<input type = "radio"/>
需要属性：name属性,name的属性值必须相同
- 实现默认选中：
checked = "checked"
- 复选输入项：
<input type = "checkbox"/>
需要属性：name属性,name的属性值必须相同，必须有一个value的值
- 实现默认选中：
checked = "checked"
- 文件输入项（文件的上传）:
<input type = "file"/> - 下拉输入项（不再input标签里面)
- 普通的输入项：
<select name = "birth">
<option value="1991">1991</option>
<option value="1991">1991</option>
<option value="1991">1991</option>
</select>
默认选中：selected = "selected"
- 文本域：
<textarea cols="10" rows= "10"></textarea> - 隐藏项（不会出现在页面上，但是存在于html代码里买>
<input type="hidden"/> - 提交按钮
<input type = "submit" value = "注册"/>
- 使用图片来提交
<input type = "image" src ="图片地址"/> - 重制按钮：
<input type = "reset" value = "重制注册"/>
回到输入项的初始状态 - 普通按钮：
<input type ="button" value ="普通按钮"/>
- html中其他常用标签的使用
b:加粗
u:删除线
I:下划线
s:斜体
pre:原样输出
sub：下标
sup：上标
p：段落标签，比br多一行
div：自动换行
span：在一行显示
- html的头标签的使用
- html两部分组成 head 和body
- 在head里面的标签就是头标签
- title标签：表示在标签上显示的内容
- <meta>标签：设置页面的一些相关内容
<meta name= "keywords" content = "搜索内容">
<meta http-euqiv= "refresh" content = "3;url=网站名"/>
三秒钟后实现自动跳转 - base标签：设置超链接的设置
可以统一设置超链接的打开方式
<base target="_blank"/> - link标签：引入外部文件
- 框架标签的使用
- <frameset>
rows:按照行进行划分
<frameset rows ="80,">
cols:按照l列进行划分
<frameset cols="80,"> - <frame>
<frame name = "lower_left" src =" 网页路径"> - 使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
<frameset rows = "80,*">//把页面划分成两部分
<frame name = "top" src ="a.html">//上面页面
<frameset cols="150,*">//把下面的部分分成两个页面
<frame name = "lower_left" src ="b.html">//左边的页面
<frame name = "lower_right" src = "c.html>//右边的页面
</frameset>
</frameset>
//如果在左边的页面超链接，想再右边的部分显示内容可以将超链接的属性taget设置成名称
<a href = "01-hello.html" target="lower_right">超链接1</a>
网友评论