HTML基本标签及语法

HTML简介

什么是HTML

本文素材来源于黑马程序员Pink老师

HTML 指的是超文本标记语言(Hyper Text Markup Language) ，它是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言(markup language)。

标记语言是一套标记标签(markup tag)。

Web 标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

  • 结构 --> 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
  • 表现 --> 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
  • 行为 --> 行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

Web 标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML 文件中，表现写到CSS 文件中，行为写到JavaScript 文件中。

HTML基本语法

HTML基本骨架

标签名 定义 说明
<html><\html> HTML标签 页面中最大的标签，所有内容都包含在该标签内
<body><\body> 文档头部 设置一些属性，以及引进文件样式
<title><\title> 文档标题 浏览器所显示的网页标题
<body><\body> 文档主题 基本上一个网页的所有页面元素都放进该标签内

一个基本的网页骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我的第一个网页</div>
</body>
</html>

基本语法概述

  1. HTML 标签是由尖括号包围的关键词，例如<html>。

  2. HTML 标签通常是成对出现的，例如<html> 和</html> ，我们称为双标签。标签对中的第一个标签是
    开始标签，第二个标签是结束标签。

  3. 有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。

  4. 双标签关系可以分为两类：包含关系和并列关系

    如body与div这样的标签关系我们称为包含关系

    <body>
    <div></div>
</body>

    又如body中div与div这样的标签关系我们称为并列关系

    <body>
    <div></div>
    <div></div>
</body>

HTML 常用标签

  • HTML 提供了6 个等级的网页标题，标题标签<h1> - <h6>

  • <p>标签用于定义段落，它可以将整个网页分为若干个段落。

  • 如果希望某段文本强制换行显示，就需要使用换行标签<br />。

  • 字体加粗<strong></strong>

  • 字体倾斜<em></em>

更多标签请移步W3C：https://www.w3school.com.cn/tags/index.asp

图像标签

该标签可实现在文档中插入一张图片

基本语法

<img src="图片地址" alt="图片显示不出来时的替换文字">

锚点链接

该标签可实现在文档中插入一个外部标签

基本语法：

<a href="跳转地址"></a>

tips：

如果想在浏览器中实现类似于百度百科那种点击连接达到页面的某一处，可以设置锚点连接

<a href="#live">个人生活</a><br />
<h3 id="live">个人生活</h3>

这样便可实现锚点连接

<div>和<span>标签

<div>和<span> 是没有语义的，它们就是一个盒子，用来装内容的

<div> 这是头部</div>
<span> 今日价格</span>

div 是division 的缩写，表示分割、分区。span 意为跨度、跨距

表格标签

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有理。

表格标签基本格式

  1. <table> </table> 是用于定义表格的标签。
  2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在<table> </table>标签中。（tr即 table row）
  3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
  4. 字母td 指表格数据（table data），即数据单元格的内容。

表头标签

<th> 标签表示HTML 表格的表头部分(table head 的缩写)

表头标签会使单元格内的文本加粗居中显。

合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

列表

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序列表

<ul>标签表示HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
无序列表的基本语法格式如下：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  2. <ul></ul> 中只能嵌套<li></li>，直接在<ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
  3. <li> 与</li> 之间相当于一个容器，可以容纳所有元素。
  4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS 来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项。

有序列表的基本语法格式如下：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
  1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li> 与</li>之间相当于一个容器，可以容纳所有元素。
  3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS 来设置。

自定义列表

在HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

其基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
</dl>
  1. <dl></dl> 里面只能包含<dt> 和<dd>。
  2. <dt> 和<dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

表单

基本格式

表单域是一个包含表单元素的区域。

在HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。

<form> 会把它范围内的表单元素信息提交给服务器.

<form action="url地址" method="提交方式"  name="表单域名称">
        各种表单元素控件 
</form>

三种表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

  1. input输入表单元素
  2. select下拉表单元素
  3. textarea 文本域元素

<input>表单元素

在<input> 标签中，包含一个type 属性，根据不同的type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />

<input>表单元素：

button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

tips：

<label> 表单元素

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验.
语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心：<label> 标签的for 属性应当与相关元素的id 属性相同。

<select> 表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表.

语法：

<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>
  1. <select> 中至少包含一对<option> 。
  2. 在<option> 中定义selected =“selected " 时，当前项即为默认选中项。

<textarea> 表单元素

<textarea rows="3" cols="20">
    文本内容
</textarea>
  1. 通过<textarea> 标签可以轻松地创建多行文本输入框。
  2. cols=“每行中的字符数”，rows=“显示的行数”
posted @ 2021-04-17 20:01  JSW79  阅读(721)  评论(0)  编辑  收藏  举报
隐藏目录