作者：刘婧怡
时间：2019.01.30
主机环境：MacBookPro
** 超文本：超出文本的范畴，使用html可以轻松实现这样的操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，写法 ：<标签名称>
** 网页：浏览器打开的
** 在MAC中创建 HTML 文件
· 在 Mac 上的“文本编辑”应用中，选取“文件”>“新建”，然后选取“格式”>“制作纯文本”。
· 输入 HTML 代码。可直接输入
这是一个html程序· 选取“文件”>“存储”，键入一个名称，后跟扩展名“.html”（例如，输入“index.html”），然后点按“存储”。
· 当提示要使用的扩展名时，请点按“使用 .html”。
· 若打开后出现乱码情况，则在程序中加入
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>· 保存好之后，直接双击打开为网页形式。
** 在上个代码的基础上加入<font>标签
<font>这是一个html程序</font>对比之后发现并没有变化。
** 若想改变字体和颜色，则加入size和color标签
<font size="5" color="red">这是一个html程序</font>此时字体为5，颜色为红色，如下图所示
** 开始：<html>
** 结束：</html>
** 设置相关信息：
<head> 设置相关信息,如<title>这是一个标题</title>，此时将修改标题 </head>** 显示在网页上的内容：
<body> 显示在页面上的内容都写在body里面，如<font size="5" color="red">这是一个html程序</font> </body> 当前页面为
** 换行标签（在标签内结束）：<br/>
** 水平线（在标签内结束）：<hr/>
** 网页中有很多数据，不同的数据可能有不同的显示效果，这个时候需要使用标签把操作和数据封装起来，通过修改标签的属性值实现标签内数据样式的变化。
** 一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的改变
<html> <head> <title>这是一个标题</title> </head> <body> <font size="5" color="red">这是一个html程序1</font><br/> <font size="5" color="green">这是一个html程序2</font><br/> <font size="5" color="yellow">这是一个html程序</font><br/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>** 用<font></font>
** 属性：
size：文字的大小，取值范围为1 - 7，超出7默认为7。
color：文字的颜色，两种表示方式：英文单词（red，green...) & 使用十六进制数表示（RGB，如#ffffff）
-- 代码实例
<html> <head> <title>事例</title> </head> <body> <!-- 演示标题标签 --> <h1>标题一</h1> <h2>标题二</h2> <h6>标题六</h6> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 结果如下：
** 从h1到h6的大小一次变小
** 标题标签会自动换行
** size：水平线的粗细，范围为1 - 7
** color：水平线的颜色，表示方法与文字标签的一样
** 将 < 改为 <； 将 > 改为 >；（;为英文）
** 将一个空格改为 ；（;为英文）
** 将 & 改为 &；（;为英文）
** <d1> </d1>：表示列表的范围
** 在dl里面 <dt></dt>：上层内容
** 在dl里面 <dd></dd>：下层内容
** <ol></ol>：有序列表范围
** 在ol中有属性type：1（默认），a，i
** 在ol标签里面 <li>具体内容</li>
结果如下：
** <ul></ul>：表示无序列表的范围
** 在ul里面有属性type：空心圆circle，实心圆disc（默认），实心方块square
** 在ul里面有 <li></li>
** <img src="图片路径"/>
** 属性：scr（图片的路径），width（图片的宽度），height（图片的高度），alt（图片上显示文字，把鼠标移动到图片上，停留片刻会显示，有些浏览器不显示）
结果如下：
如果没有该2.png这个图片
<html> <head> <title>事例</title> </head> <body> <!-- 演示图像标签 --> <img src="/Users/liujingyi/javaWeb/javaweb之HTML(一)/2.png" alt="hh"/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>结果如下：
** 如/Users/liujingyi/javaWeb/javaweb之HTML(一)/1.png
** 一个文件相对于另一个文件的位置
** 当html文件与图片在一个路径下，可以直接写文件名称，如1.png
** 当图片在html文件的下层目录时，假设html文件的路径为如/Users/liujingyi/javaWeb/hello.html，图片的路径为如/Users/liujingyi/javaWeb/javaweb之 HTML(一)/1.png，此时可写为javaweb之HTML(一)/1.png
**当图片在html文件的上层目录时，假设html文件的路径为如/Users/liujingyi/javaWeb/javaweb之HTML(一)/hello.html，图片的路径为如/Users/liujingyi/javaWeb/1.png，此时可写为 ../1.png（../表示上层目录）
** <a href="链接到资源的路径" 显示在页面上的内容 </a>
** href：链接的资源的地址，#为默认，不打开任何资源，只是占位
** target：设置打开的方式，默认是在当前页面打开，_black（在新窗口打开），_self（在当前页打开）
点击之后会弹出一个新页面
** 写法：<a name="top"> 顶部 </a>
** 写法：<a href="#top" 回到顶部 </a>
** 作用：在<pre>输出的内容</pre>中，内容是原样输出的，即程序怎么写，网页就如何显示
** <table></table>：表示表格的范围
** table中有属性border：表示表格线的粗细，bordercolor：表示表格线的颜色，cellspacing：表示单元格的间隙（若为0，则表示没有间隙），height：表示表格的高，weight：表示表格的宽度
** 在table里面 <tr></tr>：表示一行
** 在tr中可以设置显示方式align：left，center，right
** 在tr里面<td></td>：表示每行的一个单元格
** 在td中可以设置显示方式align：left，center，right
** 将td改为th可以将单元格中的字体加粗并居中
** <caption></caption>：设置表格的题目，写在table中
若不加cellspacing="0"，结果如下：
** rowspan：跨行
** colspan：跨列
** 代码（跨列操作）：
<html> <head> <title>事例</title> </head> <body> <table border="1" bordercolor="red" cellspacing="0"> <tr align="center"> <td colspan="3">人员信息</td> <!-- 引号内填写跨行或跨列的数目 --> </tr> <tr align="center"> <td>哈哈</td> <td>20</td> <td>计算机科学与技术学院</td> </tr> </table> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 结果如下：
** <form></form>：定义一个表单的范围
** 属性：action属性将提交结果送入该地址，并跳转的该页面
method属性表示表单提交的方式，常用的有两种：get（默认）和post，区别为a .get请求地址栏会携带提交的数据，post不会携带，b. get的请求的安全级别较低，c. get请求有数据大小的限制
enctype属性（一般情况下不需要），在文件上传的时候需要该属性
** 输入项：可以输入或选择的部分内容
- 大部分的输入项使用 <input type="输入项的内容"/>，必须要写name属性，不然不会提交
1.普通的输入项：<input type="text"/>
2.密码输入项：<input type="password"/>
3.单选输入项：<input type="radio"/>，需要有属性name，并且属性值必须相同，才能保证是单选，必须要写value值区分不同选项
实现默认选中的属性：checked="checked"
4.复选输入项：<input type="checkbox"/> `，需要有属性name，并且属性值必须相同，必须要有value值
实现默认选中的属性：checked="checked"
5.文件输入项（用于文件上传）：<input type="file"/>
6.隐藏项：<input type="hidden"/>
7.提交按钮：<input type="submit"/>，按钮中的内容可用属性value
使用图片提交：<input type="image" src="图片路径"/>
8.重制按钮：<input type="reset" value=""/>，回到默认状态
9.普通按钮：<input type="button" value=""/>，和js在一起使用
- 不使用input
10.下拉输入项：<select name=""></select>select中包括<option value=""></option>
实现默认选中：selected="selected"
11.文本域：<textarea cols="10" lows="10"></textarea>
结果如下：
** 填写之后点击注册按钮，地址会变为tele=1542367892&password=123456&sex1=女&hobby=p&hobby=y&birth=1993&dis=我是一个学生，将数据按照name=value的方式提交
** b、u、i、s标签
代码：
<html> <head> <title>事例</title> </head> <body> <u>西</u> <b>电</b> <s>学</s> <I>生</I> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 结果如下
** pre标签：原样输出
** sub、sup标签
代码：
<html> <head> <title>事例</title> </head> <body> 3<sub>100</sub> 4<sup>200</sup> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 结果如下：
** div、span标签（在css时使用）
代码：
<html> <head> <title>事例</title> </head> <body> <div>这是div1</div> <div>这是div2</div> <div>这是div3</div> <span>这是span1</span> <span>这是span2</span> <span>这是span3</span> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>结果如下：
** p标签：段落标签，比br标签多换一行
html由两部分组成：head和body
** 头标签：在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** meta标签：设置页面相关的内容
<meta name="keyword" content="西安电子科技大学"/> <meta http-equiv="refresh" content="3;url=地址"/>三秒之后自动跳转的url后的地址页面
** base标签：设置超链接的基本信息
<base target="_black"/>所有的超链接都在新窗口打开
** link标签：引入外部文件，在css中使用（用于引入css文件）
<frameset>
rows：按照行划分，<frameset rows="80,*"/>，表示将页面划分为两行，*表示剩余部分
cols：按照列划分<frameset cols="80,*"/>
<frame>：具体显示的页面
<frame name="lower_left" src="页面路径"/>使用框架标签不能写在body里面，需要把body去掉
转载于:https://www.cnblogs.com/jyliu/p/10447278.html
