HTML入门基础

哆啦e梦
164 阅读4分钟

一、常用的HTML标签

h1~h6,p,img,a,div,input,button,ul,li,dl,dt,dd

1、文本元素

标题 h

6个标题元素，h1~h6。每个元素代表文档不同级别内容。

  • h1 主标题
  • h2 二级标题
  • h3 三级标题

设置标题时候使用。

语法格式

<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>

段落标签 p

语法

<p>内容</p>

paragraph---段落：只要在页面上想表达一段长文本，可以使用这个标签

2、img

img.gejiba.com/

<img src="https://img.gejiba.com/images/4360c186540b4daa34cffdde0657682e.jpg" />

image ----img 单标签

source ---src 标签属性，指定图片所在的路径

3、a超链接

正是因为超链接元素的存在, 将世界上所有的网页联系在一起, 使互联网成为一个互相联系的网络.

超链接可以使我们的文档跳转到任何其他的文档（或其他资源 resource）

<a href="统一资源定位符(URL)">显示信息</a>

<a href=https://baidu.com/>百度</a>

anchor---a 超链接

href 属性，作用：指定a标签需要跳转的地址

4、div

需要在网页上获取一个区域，就使用div。

<div> </div>

5、input-button

<input type = "text">
<button>百度一下</button>

6、无序列表ul-li

<ul>
	<li>html</li>
  <li>css</li>
</ul>

7、有序列表ol-li

<ol>
  <li>html</li>
  <li>css</li>
</ol>

8、定义列表dl-dt-dd(了解)

<dl>
  <dt>gis的概念</dt>
  <dd>GIS地理信息系统(Geographic Information System)...</dd>
</dl>

9、换行标签


二、重点难点标签

1、a 标签

正是因为超链接元素的存在, 将世界上所有的网页联系在一起, 使互联网成为一个互相联系的网络

作用

超链接可以使我们的文档跳转到任何其他的文档（或其他资源 resource）

属性

  • href
  • target
  • download
  • rel=noopener

作用

跳转外部页面跳转内部锚点跳转到邮箱或电话等

a标签的href

//网址
<a href="统一资源定位符(URL)">显示信息</a>
<a href="http://www.baidu.com">百度</a>

//路径
<a href="./index.html">百度</a>

<!--伪协议  -->
<a href="javascript:代码;">百度</a>
<a href="tel:+49.157.0156">+49 157 0156</a>

<!-- id -->
<a href="#xxx">百度</a>

a标签的target

<a target=_self">百度</a> 当前页面加载
<a target=_blank">百度</a> 通常在新标签页打开，但用户可以通过配置选择在新窗口打开。

2、img标签

作用

发出一个get请求，展示一张图片

属性

alt / height / width / src

事件

onload onerror

示例用法，见mdn

developer.mozilla.org/zh-CN/docs/…

src：图片的路径

alt：图片出不来在页面的显示

3、Input标签

作用

让用户输入内容

属性

类型 type: button /checkbox / email / file / hidden/number/password/radio / search submit / tel/text

其他 name / autofocus/ checked / disabled/ maxlength/ pattern/ value/ placeholder

事件 onchange / onfocus / onblur

示例用法

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">
  • button： 没有默认行为按钮，value的属性值默认为空
  • CheckBox：复选框
  • email：编辑邮箱地址的字段。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有验证参数和相应的键盘。
  • file：让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。
  • hidden：不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
  • number：用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
  • password：单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户
  • radio：单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
  • search：用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
  • submit：用于提交表单的按钮
  • tel：用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘
  • text：默认值。单行的文本字段，输入值中的换行会被自动去除。

4、Table标签

元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。

相关的标签

  • table
  • thead
  • tbody
  • tfoot
  • th

示例用法

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

其他标签

标签

  • video
  • audio
  • canvas
  • svg

三、html标签分类

### 1、块标签

特点：

（1）独占一行

（2）可以设置width、height

<body>
    <!-- 块标签 
     特点 
    1、独占一行
    2、可以设置width、height -->
    <h1>h1</h1>
    <p>p</p>
    <div>div</div>
    <ul>
        <li>html</li>
        <li>css</li>
    </ul>
</body>

2、内联标签

特点：

（1）并排显示

（2）不能设置width、height

（3）内联不能设置margin-top，margin-bottom

<body>
    <!-- 内联标签
        特点 
    1、并排显示
    2、不能设置width、height -->
    <a href="#">a</a>
    <span>span</span>
</body>


a{
      margin-top: 1000px;
      margin-bottom: 100px;
  }

3、内联块标签

特点：既有块标签的特点，又有内联标签的特点

（1）并排显示

（2）可以设置width、height

<!-- 内联块
既有块标签的特点，又有内联标签的特点
 1、并排显示
 2、可以设置width、height-->
<br>
<input type="text">
<button>btn</button>
<img src="../images/yan.jpg" alt="">

4、标签转换

（1）内联标签转化为块标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            /* 原本内联标签： display: inline;*/
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="#">中南大学</a>
</body>
</html>

结果：

（2）块标签转化为内联标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            /* 原本内联标签： display: inline;*/
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        h1{
            /* 原本块标签： display: block;*/
            display: inline;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="#">中南大学</a>
    <h1>湖南省长沙市</h1>
</body>
</html>

结果：

4、display

（1）display:block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /* display: none; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

结果：

（2）display: none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

结果：没有显示（body没有了）

（3）head的 display为none

所以head标签内的内容不显示

avatar
文章
阅读
粉丝