html-1
html的简介
- HyperText Markup Language(超文本标记语言）
- 网页语言
- 超文本：超出文本的范畴，使用HTML可以轻松实现这样的操作
- 标记：HTML所有的操作都是通过标记实现的，标记就是标签。<标签名称>
- 网页语言 - 第一个html程序：
- html后缀是.html或htm 直接通过浏览器运行
- 这是我的第一个html程序！
- 改变字体大小和颜色
代码
<font size = " 5 " color = " red ">这是我的第一个html程序！</font>
这是我的第一个<font size = " 5 " color = " red ">html程序！</font>
html的规范
- 一个html文件开始标签和结束的标签 (如定义一个Java方法)
<html></html>
- html包含两部分内容
（1）<head>设置相关信息</head>(如<title></title>)
（2）<body>显示在页面上面的内容</body>
（3）html的标签有开始标签，也要有结束标签(如<title></title>)
（4）html的代码不区分大小写
（5）有些标签没有结束标签，在标签内结束。
-如：<br><hr>
html的操作思想
- 网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来(封装)，通过修改标签的属性值实现标签内数据样式的变化
- 一个标签相当于一个容器。想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
html常用标签
文字标签和注释标签
-文字标签：修改文字的样式
<font></font>
属性：
size:字体大小 取值范围1-7，超出7后按默认为7
color：字体颜色 按英文单词或是十六进制数表示（如：浅绿色为#66cc66）
-注释标签
< !--html的注释-- >：不会在页面显示，但查看源文件会显示注释
标题标签
<h1></h1>、<h2></h2>、<h3></h3>......<h6></h6>
示例
<html>
<head>
<title>html示例</title>
</head>
<body>
< ! -- 演示标题标签 -- >
<h1>标题一</h1>
<h2>标题二</h2>
<h6>标题六</h6>
</body>
</html>
运行结果为
标题一
标题二
标题六
从h1-h6字体依次变小，同时会自动换行
水平线标签
<hr/>
属性：
(1)size:水平线粗细[1,7]
(2)color：水平线颜色
特殊字符
想要显示在页面上的内容可能会被当作标签处理，故需要特殊字符的转义
< : <；
> : >；
空格: ；
&：&；
示例
<html>:是网页的开始！
Run-
<html>:是网页的开始！
列表标签
列表标签
<dl>
<dt>上层内容</dt>
<dd>下层内容</dd>
<dd>下层内容</dd>
<dd>下层内容</dd>
</dl>
运行结果如图所示
有序列表
<ol type="_">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ol>
属性：
* type : 设置排序方式
* target ：设置打开方式
运行结果如图所示
<ol></ol>:定义了有序列表的范围
<li></li>:列表内容
无序列表
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>柠檬</li>
</ul>
运行结果如图所示
图片标签
<img src = "图片的路径"/ alt = "_">
属性：
- src : 图片的路径
- width：图片宽度
- height：图片高度
- alt：图片上显示的文字
路径的介绍
1.绝对路径
绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
如：C:\Users\Kinoray...
或者https://www.jianshu.com
2.相对路径
相对路径：一个文件相对于另一个文件的位置
- html文件和图片在同一路径下，可以直接写文件名
- html文件中使用下层文件夹图片
先将html文件和图片路径的绝对路径写出
如
-C:\Users\Kinoray\1.html
-C:\Users\Kinoray\img\a.jpg
可见1.html和img在同一路径下，所以可以写成img\a.jpg - html文件中使用上层文件夹图片
先将html文件和图片路径的绝对路径写出
-C:\Users\Kinoray\1.html
-C:\Users\a.jpg
可见Kinoray和a.jpg在同一路径下，所以可以写成..\a.jpg
Tips:表示上层目录
../表示上层目录
./表示此目录
超链接标签
链接资源
<a></a>：超链接标签
属性：
- href : 链接资源地址
- target：设置打开方式（默认当前页打开）
--_blank :新标签页打开
--_self :当前页打开
当超链接不需要链接到任何网址时，需要一个占位符#，否则会跳转到当前路径的文件夹
定位资源
如果想要定位资源，需要定义一个位置
<a name = "top">顶部</a>
回到这个位置
<a href = "#top"></a>
TIps：name里面的内容可以任意定义，把定义的位置随便放在一个地方再点击跳转链接就会跳转到定位的位置。
预格式化标签
<pre></pre>：原样输出，格式不变
