HTML学习笔记-CSDN博客

本文链接：https://blog.csdn.net/origin_120911/article/details/79196378

top

1.HTML的规范遵循
2.HTML语言的操作思想
3.HTML中常用的标签

根据黑马的培训课程《超全面的JavaWeb视频》day01的学习笔记
学习是一个长期的过程，每天进步一点点

by匍匐向前

1.HTML的规范遵循

top
1. 一个HTML文件开始标签和结束标签<html></html>
2. HTML包含两部分内容：
* <head>设置相关信息</head>
* <body>显示在页面上内容都写在标签body里面</body>
3. HTML的标签又开始标签，也有结束标签
<head>/</head>
4. HTML代码不区分大小写
5. 有些标签，没有标签，在标签内结束
- 比如换行 <br/> 水平线<hr/>

2.HTML语言的操作思想

top

网页有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值实现标签内数据样式的变化。

3.HTML中常用的标签

top

1.文字标签和注释标签

top

文字标签：修改文字的样式
- <font></font>
- 属性：
  - size：文字的大小取值范围1-7，超出了是，7默认还是7
  - color：文字颜色
    - 两种表达方式
    - 英文单词：read green black white yellow gray……
    - 使用十六进制表示 #ffffff ： RGB
      - 通过工具实现不同的颜色 #66cc66
注释标签：

HTML注释： !-英文格式

2.标题标签水平标签和特殊字符

top

标题标签

<h1></h1> <h2></h2> <h3></h3>……<h6></h6>
从h1到h6，大小是一次变小，同时会自动换行

水平线标<hr>
- 属性
size：水平线粗细取值范围1-7
color：颜色
特殊字符
- 想要在页面上显示这样的内容 :是页面的开始！
- 需要对特许字符进行转义
  
  < <
  > \>
  空格： 
  & &
  @ &cope
  " &quot
3.列表标签

top
```
比如现在显示这样的效果
    传智播客
        财务部
        学工部
        人事部
```
- <dl></dl>: 表示列表的范围
- 在dl里面 <dt></dt>: 上层内容
- 在dl里面 <dd></dd>：下层内容
  代码
```
<dl>
    <dt>传智播客</dt>
    <dd>财务部 </dd>
    <dd>学工部 </dd>
    <dd>人事部  </dd>
</dl>
```
  - <ol></ol>:有序列表的范围
    
    属性 type：设置排序方式 1(默认) a(a,b,c) i (i,ii,iii,)
    格式<ol type="a"></ol>
  - 在ol标签里面 <li>具体内容</li>
  - <ul></ul>: 表示无序列表的范围
    
    属性：type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
    格式<ol type="ciecle"></ol>
  - 在ul标签里面 <li>具体内容</li>
4.图像标签

top
* <img src="图片的路径"/>
```
- src:图片的路劲
- width:图片的宽度
- hight:图片的高度
- alt:图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容 >> 有些浏览器不显示（没有效果），兼容性差
```
5.路径的介绍:绝对路径和相对路径

top
- 绝对路径
  - c:\user\asue\desktop\code\logo.png
  - http://www.baidu.com
- 相对路径
  - 一个文件相对于相对于另一个文件的位置
  - 三种：
    - HTML文件和图片在一个路径下，可以直接写文件名称
      
      <img src="logo.png">
    - 图片在HTML文件的下层目录
      在HTML文件中，使用img文件夹下面的a.jpg
      
      c:\user\asue\desktop\code\ hello.html
      c:\user\asue\desktop\code\ image\logo.png
    - 在HTML文件中，使用img文件夹下面logo.png
      
      <img src="img\logo.jpg">
    - 图片在HTML文件的上层目录 ../ 在往上…/等
      
      <img src="../logo.jpg">
综合练习：列表一-列表的标签案列

6.超链接标签

top
* 链接资源 <a href="链接到资源的路径">显示在页面上的内容</a>
* href:链接的资源的地址
* target:设置打开方式，默认是当前页打开

_blank : 在一个新窗口打开
_self : 在当前页打开
* 当超链接不需要任何地址在href加一个#
* 第一天学习笔记
- 定位资源（例：网页里面回到顶部）
  - 如果想要定位资源：定义一个位置
    <a name="top">顶部</a>
  - 回到这个位置
    <a href="#top">回到顶部</a>
    例：引入一个标签 <pre>原样输出
7.表格标签

top
* 可以对数据进行格式化，使数据显示更加清晰
* <table></table>:表示表格的范围
```
- 属性
    > border：表格线
    > bordercolor：表格线颜色
    > cellspacing：单元格直线距离
    > width：表格的宽度
    > hight：表格的高度

* 在table里面\<tr>\</tr>
    > 设置对齐方式 `align: left   center  right`

* 在tr里面<td></td>
    > 设置显示方式 `align: left   center  right`

* 使用th也可以表示单元格
    > 表示可以实现居中和加粗
```
- 表格程序的写法：
  - 首先定义一个表格的范围用table
  - 定义一行使用tr
  - 定义一个单元格用td
- 操作技巧
  - 先数有多少行，数每行里面有几个单元格
    *表格的标题
    <caption></caption> 写在table下面
- 合并单元格
  - rowspan:跨行
  - colspan:跨列
8.表单标签

top
1. 可以提交数据到开心网服务器，这个过程可以使用表单标签实现
2. <form></form>:定义一个表单的范围
- 属性：

action:提交到地址，提交到当前页面
method:表单的提交方式：
* get(默认)：带数据提交
* post：不带数据提交
* enctype:文件上传需要设置，一般不需要设置
- 面试题：get和post的区别
get请求地址栏带数据提交，post不会携带
get请求安全级别较低，post请求较高
get请求数据不小有限制，post没有限制

4.输入项：可以输入内容或者选择内容的部分
- 大部分的输入项使用 <input type="输入项的类型"/>
- 普通输入项: <input tpye="text"/>
- 密码输入项: <input type="password"/>
- 单选输入项: <input type="radio"/>
  
  在里面需要属性：name
  name的属性值必须相同
  实现默认选中的属性：checked=”checked”
- 复选输入项: <input type="checkbox"/>
  
  在里面需要属性：name
  name的属性值必须相同
  实现默认选中的属性：checked=”checked”
- 文件输入项:<input type="file"/>（文件上传使用）
- 下拉输入项（不是input标签里面）
```
<select name="birth">
 <option value="0">请选择</option>
 <option value="1990">1990</option>
 <option value="1991">1991</option>
 <option value="1992">1992</option>
</select>
```
  实现默认选中的属性：selected=”selected”
  - 文本域 <textarea cols="10" row="10"></textarea>
    
    clos:行
    row:列
  - 隐藏项（不会显示在页面上，但是存在与html代码里面）
```
   <input tpye="hidden"/>`
```
  - 提交按钮
    - <input tpye="submit"/>
```
<input type="submit" value="注册"/>
```
    - 使用图片提交
```
<input tpye="image" sre="图片路径"/>
```
  - 重置按钮回到输入项的初始状态
```
<input type="reset"/>
```
  - 普通按钮
```
<input type="button" value="">
```
9.其它标签的使用

top
1. b:加粗
2. u：下划线
3. i：斜体
4. s：删除线
5. pre：原样输出
6. p：段落标签，剩余部分另起一个段落，比br标签多换一行
7. sub：下标
8. sup：上标
9. div：自动换行
10. span：在一行显示
注：CSS会一直使用div和span

10.HTML的头标签

top
1. HTML分为两部分：head和body
2. 在head里面的标签就是头标
```
* title标签：表示在标签页上显示的内容
* meta标签
```
<mete http-equiv="refresh" content="3,utl=http://www.baidu.com">

作用：可以作为页面的定时跳转
http-equiv:模拟一个请求
refresh:页面刷新
3：3秒之后
util：跳转路径

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

作用:html文件编程utf-8格式，没有乱码
http-equiv:模拟一个请求
content-tpye:文本类型
text/html:HTML类型的文件
charset=utf-8:字符设置成utf-8格式
- base标签：超链接基本设置
  <base target="_blank">当前页面，所有超链接都在新窗口打开
- link标签：引入外部文件（可以引入CSS标签）
11.框架标签

top
1. <frameset>
  - rows:按照行进行划分
    <frameset rows="80,*">
  - cols:按照列进行划分
    <frameset cols="80,*">
2. <frame>
  - 具体显示的页面
    <frame name="lower_lest" src="b.html">
3. 使用框架标签的时候，不能卸载body里面，使用了框架标签，必须把body去掉
```
<frameset rows="80,*">
    <frame name="top" sre="a.html">

    <frameset cols="80,*">
        <frame name="lower_left" src="b.html">
        <frame name="lower_right" scr="c.html">
    </frameset>
</frameset>
```
- 如果左边的页面超链接，想让显示右边的页面中
  - 设置超链接里面属性 target的值设置成名称
  - <a href="01-hello.html" target="right">超链接1</a>
top