HTML学习笔记

记录一下CSS学习笔记。

概念

  • HTML hyper text markup language 超文本标记语言
    • 超文本
      • 超文本使用链接的方式,将不同的文字信息连接在一起
    • 标记语言
      • 不是编程语言

快速入门

  • 语法

    • 1、html文档.html或者htm

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <html>
      <head>
      <title>
      Title
      </title>
      </head>
      <bady>
      <font color="red"> HELLO WORLD!</font>
      </bady>

      </html>
    • 2 标签分类

      • 围堵标签:有开始标签和结束标签
      • 自闭合标签: 开始标签和结束标签在一起
    • 3 标签可以嵌套

    • 4 可以在开始标签中定义属性,属性由键值对构成,值需要用引号包括起来(单引号和双引号都可以)

    • 5 HTML标签不区分大小写,但是建议小写

标签学习

  • 1、文件标签

    • html:标识HTML文档的根标签
    • head:头标签。用于指定HTML的一些属性,可以引入外部资源
    • title:定义标题的标签
    • body:体标签
  • 2、文本标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    注释<!--注释-->
    <h1> to <h6>:标题标签
    <p></p>:段落标签
    <br>换行,自闭合
    <hr>:水平线,自闭合 与Markdown一致
    <b>字体加粗</b>
    <i>斜体标签</i>

    <!-- 相对路径 以“./目录” 表示当前目录-->
    <!-- 以“../” 表示上一级目录-->

  • 3、图片标签

    • <img src="路径"> 与Markdown语法一致
  • 4、列表标签

    • 有序列表 order list <ol>

      • <ol>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
        </ol>
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12



        - 无序列表unorder list ``<ul>``

        ```html
        <ul type="disc">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        </ul>
  • 5、链接标签

    • <a href="https://www.baidu.com">点我</a> 
      
      1
      2
      3
      4

      - <a herf="https://www.baidu.com">点我</a> <!--与Markdown一致-->

      -
      <a href="https://www.baidu.com" target="_self">点我</a> <!-- 默认 --> <a href="https://www.baidu.com" target="_blank">点我</a>
      1
      2

      -
      <a href="mailto:1679190840@qq.com">测试邮件</a>
      1
      2

      -
      <!--a标签嵌套图片--> <a href="https://www.baidu.com"><img src="D:\图片\爱壁纸UWP\视觉\视觉 - 1.jpg" height="100" width="100"/></a>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38

      - **6、表格标签**

      - table:定义表格

      - tr:定义行

      - td:定义单元格

      - th:定义表头单元格

      - ```html
      <table border="1" width="50%" cellpadding="0" cellspacing="0">
      <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>成绩</td>
      </tr>

      <tr>
      <td>1</td>
      <td>test1</td>
      <td>99</td>
      </tr>

      <tr>
      <td>2</td>
      <td>test2</td>
      <td>88</td>
      </tr>
      <tr>
      <td>3</td>
      <td>test3</td>
      <td>77</td>
      </tr>


      </table>
    • width :宽度

    • boder:边框

    • cellpadding :内容与单元格空隙

    • cellspacing:单元格间的空隙

    • bgcolor:背景颜色

    • align:对齐方式

    • caption:表格信息

    • thead:表示表头

    • tbody:表示表体

    • tfoot:表示表尾

    • rospan:占两行

    • cospan:占两列

  • 7、语义标签

    • <header></header>
      <footer></footer>
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
        
      -

      - **8、div和span标签**

      - ```html
      <span>测试Span</span><!-- 起包裹作用,没有任何效果,和CSS结合,默认一行 ,行级标签-->

      <div>测试div</div><!-- 同样没有任何样式,占满一行,块级标签 -->
  • 9、表单标签

    • 用于采集用户输入数据
    • 实用的标签form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!-- form标签用于定义表单的标签 -->
<form action="#" method="get">
用户名:<input name="UserName" /><br />
密码:<input name="Password"/><br />
<input type="submit" value="登录"/>
</form>

</body>
</html>
  • 属性:action:指定提交数据的URL

  • 属性: method:指定提交的方式

    • GET 会在地址栏中显示

      GET 从指定的资源请求数据

      GET 请求可被缓存

      GET 请求保留在浏览器历史记录中

      GET 请求可被收藏为书签

      GET 请求不应在处理敏感数据时使用

      GET 请求有长度限制

      GET 请求只应当用于取回数据

    • POST 不会再地址栏中显示,会分装在请求体中

      POST 向指定的资源提交要被处理的数据

      POST 请求不会被缓存

      POST 请求不会保留在浏览器历史记录中

      POST 不能被收藏为书签

      POST 请求对数据长度没有要求

  • 表单数据要被提交必须指定name属性

  • input标签

    1. 可以通过type属性改变样式
      • text :placeholder=”请输入用户名” 提示信息
      • password
      • radio:单选框 ,多个单选框要想实现单选name值必须一致,需要给每个单选框设置value设置值
      • checkbox:复选框 checked="checked"默认选中
      • <lable>标签for属性和id属性绑定,有点击效果
      • file:文件选择框
      • hidden:隐藏的数据
      • button:一个按钮,
      • image:图片提交按钮
      • data:日期
      • email:会做正则校验
  • select标签:下拉标签 注意必须设置name属性才能被提交

    • 子元素:<option></option>
  • testarea标签:文本域

    • cols:指定列数,每一行多少字符
    • rows:指定行数

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!-- form标签用于定义表单的标签 -->
<form action="#" method="get">
<label for="username">用户名</label>:<input type="text" name="UserName" id="username" placeholder="请输入用户名" /> <br />
<label for="password">密码</label>:<input type="password" name="Password" id="password" /> <br />
<label>性别</label>:<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
<br />

<!-- 复选框 -->
爱好:<input type="checkbox" value="movie" checked="checked" /> 看电影 <br />
爱好:<input type="checkbox" value="game" /> 玩游戏 <br />
爱好:<input type="checkbox" value="java" /> 学java <br />
<br />

选择图片:<input type="file" /> <br />

隐藏域:<input type="hidden" id="hidden" /> <br />

生日:<input type="date" /><br />
生日:<input type="datetime" /><br />
邮箱:<input type="email" /><br />
数字:<input type="number" /><br />


省份:<select name="provience">
<option>北京</option>
<option>上海</option>
<option>江西</option>
<option>山东</option>
<option>福建</option>
</select><br />

自我描述:<textarea cols="20" rows="5" name="description"></textarea>
<br />
<input type="button" /> <br />
<input type="image" src="D:\图片\爱壁纸UWP\艺术\艺术 - 2.jpg" width="50" /><br />
<input type="submit" value="登录" />
</form>

</body>
</html>