学习HTML时做的笔记，方便复习。

HTML学习笔记

01.HTML文档的标准结构

1
2
3
4
5
6
7
<html>
    <head>
    </head>
    <body>
        This is my first html.
    </body>
</html>

02.head标签学习

1
2
3
4
5
6
7
8
<head>
    <meta charset="utf-8"/> <!--网页解析编码格式配置(HTML5)-->
<title>HTML学习</title> <!--网页标题标签-->
    <meta name="keywords" content="HTML"/> <!--网页关键字-->
    <meta name="description" content="描述。"/> <!--网页描述-->
    <meta name="author" content="作者"/> <!--网页作者-->
    <meta http-equiv="refresh" content="5;url=http://www.google.com"/> <!--网页自动跳转-->
</head>

03.body标签(文本标签)

  • 标题标签

    • h1 - h6 六级标题

    • 属性： align: center left right 居中/左/右对齐

  • 水平线标签

    • hr

    • 属性：width 宽度 size 高度 color 颜色

  • 段落标签

    • p
    • 会将一段数据作为整体进行显示，主要是进行css和js操作时比较方便.会自动换行(块`级元素)
    • 特点：段间距比较大

  • 换行符

    • br 告诉浏览器需要在此换行

  • 空格符

    • &nbsp

  • 权重标签

    • b 会将内容加黑显示

    • i 会将内容斜体显示

    • u 会将内容增加下划线

    • del 增加中划线

04.body标签(列表标签)

  • 无序列表
1
2
3
4
5
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>
  • 有序列表
1
2
3
4
5
<ol type="I">  <!--可以改变顺序编码的值,可以是1 a A I-->
    <li>打游戏</li>
    <li>打篮球</li>
    <li>看电影</li>
</ol>
  • 自定义列表
1
2
3
4
5
6
<dl>
    <dt>数据的标题</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dd>内容3</dd>
</dl>

05.图片标签学习

本地资源/网络资源

相对路径/绝对路径

1
<img src="./1.png" width="100px" height="100px" title="图片" alt="加载失败" />

06.超链接标签

超链接

1
<a href="http://www.google.com" target="_blank">谷歌搜索</a>

  • 属性：target

    • _self 在当前页中刷新显示

    • _blank 在新的标签页中显示

    • _top 在顶层页面中显示

    • _parent 在父级页面中显示

锚点

1
2
<a name="锚点名"><a/> <!--锚点-->
<a href="#锚点名">点击跳转<a/>

07.表格标签

  • table tr th

    • 属性：width height border cellpadding cellspacing

    • 单元格合并：rowspan colspan

08.iframe标签

  • iframe

    • 属性：src width height name(结合超链接标签的target使用)

    • 作用：在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的。

09.frameset标签

  • frameset

    • rows=”30%,*,30%” 按照行进行切分页面

    • cols：按照列进行切分页面

    • 子标签：frame

      • src：资源路径

      • name：区域名，结合超链接使用

10.form标签

  • form表单标签

    • 作用：收集并提交用户数据给指定服务器

    • 属性：

      • action：收集的数据提交地址也就是URL

      • method：get/post 收集的数据的提交方式

    • 注意：

      • 表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交。

      • 提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据。

      • form标签会收集其标签内部的数据。

      • form表单的数据提交需要依赖于submit提交按钮。

  • form表单域标签

    • 文本框：input

      • type：

        • text 收集少量的文本数据,用户可见

        • password 收集用户密码数据

      • name：数据提交的键，也会被js使用

      • value：默认值

    • 单选框：input

      • type：radio

      • name：name属性值相同的单选框只能选择一项数据

      • value：要提交的数据

      • checked: 使用此属性的单选默认是选择状态

    • 多选框：input

      • type：checkbox

      • name：一个多选组需要使用相同的name属性值

      • value：要提交的数据

      • checked:checked 使用此属性的多选框默认是选择状态

    • 单选下拉框：select

      • name：数据提交的键名,必须声明

      • 子标签option：一个option标签表示一个下拉选项

        • value：要提交的数据

    • 文本域：textarea

      • name：数据提交的键名,js和css也会使用

      • rows：声明文本域的行数

      • cols：声明文本域的列数

    • 普通按钮：input

      • type：button

      • value

    • 普通按钮：input

      • type：hidden

      • name

      • value

    • submit按钮：input

      • type: submit

      • vaule

  • form表单标签的使用：在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指明的提交地址。