作者：刘婧怡
时间：2019.01.30
主机环境：MacBookPro
HTML语言
1. HTML简介
- 什么是html？
-- HypeText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴，使用html可以轻松实现这样的操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，写法 ：
** 网页：浏览器打开的
- 第一个html程序
-- html的后缀是 .html 或 .htm
** 在MAC中创建 HTML 文件
· 在 Mac 上的“文本编辑”应用中，选取“文件”>“新建”，然后选取“格式”>“制作纯文本”。
· 输入 HTML 代码。可直接输入
这是一个html程序
· 选取“文件”>“存储”，键入一个名称，后跟扩展名“.html”(例如，输入“index.html”)，然后点按“存储”。
· 当提示要使用的扩展名时，请点按“使用 .html”。
· 若打开后出现乱码情况，则在程序中加入
· 保存好之后，直接双击打开为网页形式。
-- 利用标签修改html代码
** 在上个代码的基础上加入标签
这是一个html程序
对比之后发现并没有变化。
** 若想改变字体和颜色，则加入size和color标签
这是一个html程序
此时字体为5，颜色为红色，如下图所示
- html的规范(遵循)
-- 一个html文件要有开始和结束的标签
** 开始：
** 结束：
-- html包含两个部分
** 设置相关信息：
这是一个标题，此时将修改标题** 显示在网页上的内容：
这是一个html程序当前页面为
-- html里要有开始标签也要有结束标签，即成对出现
-- html不区分大小写
-- 有些标签没有结束标签
** 换行标签(在标签内结束)：
** 水平线(在标签内结束)：
- html的操作思想(重要)
-- 使用标签改变显示效果
** 网页中有很多数据，不同的数据可能有不同的显示效果，这个时候需要使用标签把操作和数据封装起来，通过修改标签的属性值实现标签内数据样式的变化。
** 一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的改变
这是一个标题这是一个html程序1
这是一个html程序2
这是一个html程序
2. 文字标签和注释标签
- 文字标签
-- 修改文字的样式
** 用
** 属性：
size：文字的大小，取值范围为1 - 7，超出7默认为7。
color：文字的颜色，两种表示方式：英文单词(red，green...) & 使用十六进制数表示(RGB，如#ffffff)
- 注释标签
-- 注释写法
(英文输入！)
3. 标题标签、水平线标签和特殊字符
- 标题标签
--写法
、 、 ...-- 代码实例
事例标题一
标题二
标题六
结果如下：
** 从h1到h6的大小一次变小
** 标题标签会自动换行
- 水平线标签
-- 写法
-- 属性
** size：水平线的粗细，范围为1 - 7
** color：水平线的颜色，表示方法与文字标签的一样
--代码
事例结果如下：
- 特殊字符(转义)
-- 写法(常用)
** 将 < 改为 <； 将 > 改为 >；(;为英文)
** 将一个空格改为 ；(;为英文)
** 将 & 改为 &；(;为英文)
-- 代码
事例<html>:这是 一个 网页&的开始
结果如下
4.列表标签
- 定义列表
-- 写法
** ：表示列表的范围
** 在dl里面
：上层内容** 在dl里面
：下层内容-- 代码
事例-
西安电子科技大学
- 计算机科学与技术学院
- 电子工程学院
结果如下：
- 有序列表
-- 写法
**
：有序列表范围** 在ol中有属性type：1(默认)，a，i
** 在ol标签里面
具体内容--代码
事例计算机科学与技术学院电子工程学院结果如下：
-无序标签
-- 写法
**
** 在ul里面有属性type：空心圆circle，实心圆disc(默认)，实心方块square
** 在ul里面有
-- 代码
事例计算机科学与技术学院电子工程学院结果如下：
5.图像标签(重要)
- 写法
**
** 属性：scr(图片的路径)，width(图片的宽度)，height(图片的高度)，alt(图片上显示文字，把鼠标移动到图片上，停留片刻会显示，有些浏览器不显示)
- 代码
事例结果如下：
如果没有该2.png这个图片
事例结果如下：
6. 路径介绍
- 分类
-- 绝对路径
** 如/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(../表示上层目录)
7. 超链接标签(重要)
- 链接资源
-- 写法
** href：链接的资源的地址，#为默认，不打开任何资源，只是占位
** target：设置打开的方式，默认是在当前页面打开，_black(在新窗口打开)，_self(在当前页打开)
-- 代码
事例这是一个超链接
结果如下：
点击之后会弹出一个新页面
- 定位资源
-- 定义位置
** 写法： 顶部
-- 回到该位置
-- pre标签
** 作用：在
输出的内容中，内容是原样输出的，即程序怎么写，网页就如何显示
8. 表格标签(重要)
- 写法
**
：表示表格的范围** table中有属性border：表示表格线的粗细，bordercolor：表示表格线的颜色，cellspacing：表示单元格的间隙(若为0，则表示没有间隙)，height：表示表格的高，weight：表示表格的宽度
** 在table里面
：表示一行** 在tr中可以设置显示方式align：left，center，right
** 在tr里面
：表示每行的一个单元格** 在td中可以设置显示方式align：left，center，right
** 将td改为th可以将单元格中的字体加粗并居中
**
：设置表格的题目，写在table中- 代码
事例姓名年龄学院哈哈20计算机科学与技术学院结果如下：
若不加cellspacing="0"，结果如下：
- 合并单元格
** rowspan：跨行
** colspan：跨列
** 代码(跨列操作)：
事例人员信息
哈哈20计算机科学与技术学院结果如下：
9. 表单标签(非常重要)
- 写法
**
：定义一个表单的范围** 属性：action属性将提交结果送入该地址，并跳转的该页面
method属性表示表单提交的方式，常用的有两种：get(默认)和post，区别为a .get请求地址栏会携带提交的数据，post不会携带，b. get的请求的安全级别较低，c. get请求有数据大小的限制
enctype属性(一般情况下不需要)，在文件上传的时候需要该属性
** 输入项：可以输入或选择的部分内容
- 大部分的输入项使用 ，必须要写name属性，不然不会提交
1.普通的输入项：
2.密码输入项：
3.单选输入项：，需要有属性name，并且属性值必须相同，才能保证是单选，必须要写value值区分不同选项
实现默认选中的属性：checked="checked"
4.复选输入项：`，需要有属性name，并且属性值必须相同，必须要有value值
实现默认选中的属性：checked="checked"
5.文件输入项(用于文件上传)：
6.隐藏项：
7.提交按钮：，按钮中的内容可用属性value
使用图片提交：
8.重制按钮：，回到默认状态
9.普通按钮：，和js在一起使用
- 不使用input
10.下拉输入项：select中包括
实现默认选中：selected="selected"
11.文本域：
- 代码
事例手机号码：密码：
性别：女男
爱好：乒乓球羽毛球足球
文件上传：
隐藏项：
生日：
请选择
1993
1994
自我描述：
结果如下：
** 填写之后点击注册按钮，地址会变为tele=1542367892&password=123456&sex1=女&hobby=p&hobby=y&birth=1993&dis=我是一个学生，将数据按照name=value的方式提交
10. 其他常用标签
** b、u、i、s标签
代码：
事例西
电
学
生
结果如下
** pre标签：原样输出
** sub、sup标签
代码：
事例 1004 200结果如下：
** div、span标签(在css时使用)
代码：
事例这是span1
这是span2
这是span3
结果如下：
** p标签：段落标签，比br标签多换一行
11. html头标签的使用
html由两部分组成：head和body
** 头标签：在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** meta标签：设置页面相关的内容
三秒之后自动跳转的url后的地址页面
** base标签：设置超链接的基本信息
所有的超链接都在新窗口打开
** link标签：引入外部文件，在css中使用(用于引入css文件)
12. 框架标签
rows：按照行划分，
，表示将页面划分为两行，*表示剩余部分cols：按照列划分
：具体显示的页面
使用框架标签不能写在body里面，需要把body去掉
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
