HTML 简介

HTML 标签

  • HTML标签由尖括号包围的关键词,如<html>
  • 标签通常成对出现，如<p></p>
  • 通常HTML标签和HTML元素表达的是一个意思
  • 标签大全
  • 正常情况下HTML都会在标签前后自动添加空行
  • 您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果，当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML属性

HTML 基础

标题

通过h1>-<h6>标签定义,数字越大标题越小
不要为了粗体和大号字体而使用标签

段落

通过<p>标签定义

文本格式化

标签 描述
<b> 定义粗体文字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<ins> 定义插入字
<del> 定义删除字

链接

通过<a>标签定义

  • href属性：在开始标签定义，用于指定链接地址
  • target：_blank新窗口打开；_parent父窗口打开；_self默认选项 当前页面跳转；_top在当前窗体打开链接，并替换当前整个窗体
  • id属性：相当于页内快速跳转的功能，下面详解
  1. 首先在HTML中插入ID<a id="tips">要跳转到的地方</a>
  2. 当前页面使用href属性跳转<a href="#tips">点击跳转</a>
  3. 其他页面使用href属性跳转到需要的位置<a href="https://www.baidu.com#tips">点击跳转</a>

    注意：请始终将正斜杠添加到子文件夹，如href=”https://www.baidu.com/html"会产生两次HTTP请求，而href="https://www.baidu.com/html/"只会产生一次，应该用后面这种

图像

通过<img>标签定义，此标签无结束标签

  • src属性：找到图片所存放的位置
  • alt：图片加载失败后自定义提示信息
  • width：图片的宽度，默认单位像素
  • height：图片的高度

表格

通过<table>标签定义，tr(table row)表示行，td(table data)表示列，th(table head)表示表格标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

  1. 无序列表使用<ul>表示(unordered list)，后跟<li>
    1
    2
    3
    4
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
  2. 有序列表使用<ol>表示(orderly list)，后跟<li>
    1
    2
    3
    4
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

区块div

div用于组合其他HTML元素的容器，与CSS一同使用可用于对大的内容块设置样式属性

注意：<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

div和span的区别

div span
块级元素 内联元素
会自动换行 不会自动换行

表单

表单使用<form>标签包含，表单的输入类型是由类型属性（type）的值决定的，常用的type输入类型如下：

  • type=”text”：文本域
  • type=”password”：密码字段
  • type=”radio”：单选按钮，注意：多个单选按钮的name值必须相同，否则会出现单选按钮能多选的情况。name值相同则为同一组的意思
  • type=”checkbox”：复选框
  • type=”submit”：提交按钮。当单击提交按钮时，表单的内容会被传送到其他文件中。表单的动作属性（action）定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。method属性规定用什么方法将表单中的数据发送出去（POST方法和GET放法二选一，默认为GET方法）。示例如下：
    1
    2
    3
    4
    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>

文本域和密码字段应该加上name属性
单选按钮和复选框应该加上name属性和value属性

  • name属性：用于对提交到服务器后的表单数据进行标识，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
  • value属性：用于表示选择到的按钮对应的值是什么。submit和button的value属性表示按钮上的文字
1
2
3
4
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

其他

  1. <br/>：手动换行，后面有一个/用于关闭空元素
  2. <hr/>：水平线
  3. <!-- 注释 -->

head中的元素

  1. <base>元素 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
  2. <link>元素 标签定义了文档与外部资源之间的关系。**通常用于链接到样式表** 
    1
    2
    3
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
  3. 每30秒刷新当前页面`` 设置网页使用的字符集`charset="utf-8"` 关于head的[详细文档](https://www.runoob.com/html/html-head.html)