无聊的HTML

什么是HTML

HTML：超文本标记语言。HyperText Markup Language。

超文本：文字、图片、动画、音频和视频、超链接和程序等。

特点：

简单
通用性
平台无关

HTML结构

文档声明
头部
主题

注意：头部和主题必须放在htnl根标记中。

HTML标签

常用的核心标签：

结构：html head body title meta
文章：h1-h6 p br em strong
超链接 a
图片 img
布局 div span
列表 ul ol li dl dt dd
表格 table tr td th
表单 form input select option textarea

HTML标签构成

主要有三部分构成：

开始标签
内容
结束标签

    <head>  <!-- // 开始标签-->
    <meta charset="utf-8>
    </head>  <!--// 结束标签-->

这种写法的标签，称之为双标签，成双成对，结束标签中必须有/。

还有一类标签，单标签，如下：

    <meta charset="utf-8>

单标签只有一对尖括号，而且没有内容，在标签中可以使用属性，用来描述其他信息。

HTML标签语法

在写标签的时候，需要之一那些问题？

HTML的语法比较松散
不区分大小写
对于自结束标签，可以加/，也可以不加/
属性可以不加引号

培养良好的HTML代码书写习惯：

必须有文档声明——<!DOCTYPE html>或<!DOCTYPE HTML>
标签全部使用小写
为属性值加上引号
标签可以嵌套，但不能交叉
标签要正确的关闭，主要是双标签

关于嵌套和交叉

嵌套：

<h1>h1标签<h2>h2标签</h2></h1>

嵌套是正确的使用方法。

交叉：

<h1>h1标签<h2>h2标签</h1></h2>

交叉是错误的写法。

HTML基本标签

学习每一个标签要从如下几个方面考虑：

干什么的，作用和功能
如何写，格式
经典用法

1.标题标签

作用：用来定义标题，h1定义最大的标题，h6定义最小的标题。

格式：<h1>内容</h1> <h2>内容</h2> <h3>内容</h3>

2.段落标签

作用：用来分隔内容，使内容条理清晰。

格式：<p>内容</p>

3.超链接标签及其属性

作用：用于链接其他资源，从而形成万维网。

格式：<a href="target" name="title">内容</a>

target属性：表示目标的意思，我们打开的页面是在当前页面中打开，还是在新窗口打开。

_blank 表示在新窗口打开
_self 表示在当前窗口打开，这是默认值

<a href="https://www.baidu.com" target="_blank" name="百度">百度一下</a>

title属性，表示当前超链接的标题属性。当鼠标放在超链接的上方的时候，会显示提示信息。

a.站外链接

所谓的站外，就是web上的某一个页面或者网站。

<a href="https://www.baidu.com" target="_blank"
name="百度">百度一下</a>

b.站内链接

站内是指网站内部的一个链接。网站通常是由一系列的页面构成的。在站内，可以使用完整的URL来链接，但更常用的做法是用相对路径来实现。

<a href="1.hello,world.html" target="_blank">
相对路径页面
</a>

c.锚点链接

1.建立锚点，需要设置name属性。

2.链接到锚点，设置的href属性需要加上#。

<!-- 使用name属性建立锚点-->
<a name="t"></a>
<!-- 使用href，加上#name属性-->
<a href="#t">返回锚点</a>

在实际使用时，有一个默认的锚点#top，表示顶部。

4.图像标签及其属性

作用：用于显示图片

格式：<img src="" >

img标签是单标签，src表示图片的路径，默认情况下，图片以本身的大小来显示。在实际使用时，会根据需求设置图片的大小。

5.div和span

作用：用来组织划分结构

格式：<div>内容</div> <span>内容</span>

div标签会占据一整行，而span标签只会占据一行中的一部分。

6.列表标签

无序列表

将一组相关的列表项目排列在一起，列表中的项目没有特别的先后顺序。格式：

    <ul>
        <li>手机</li>
        <li>电脑</li>
        <li>手表</li>
    </ul>

默认情况下，列表项有一个实心圆点符号，可以通过ul的type属性改变。

type=disc:实心圆点，默认符号。
type=circle:空心圆圈
type=square:实心方块
type=none:没有符号

有序列表

作用：将一组相关的列表项目排列在一起，列表中的项目有特别的先后顺序。格式：

    <ol>
        <li>买菜</li>
        <li>洗菜</li>
        <li>炒菜</li>
    </ol>

默认的项目编号为十进制数字，使用ol的type属性可以设置（1，A，a，i）

定义列表

作用：用于显示名称及其对应的"值"

7.表单标签

作用：用于搜集不同类型的用户输入。

（1）form元素

功能：创建一个表单

重要属性：

action：表示需要表单内容提交给哪个页面处理

method：表单提交的方式。包括get和post，默认是get

（2)input

表示输入框，有多种属性值。

属性值	说明
text	单行文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	文件域
submit	提交
reset	重置
button	按钮

（3）select和option

select用来实现下拉列表，option用来设置列表中的内容。

（4）textarea

作用：提供输入大量文本的输入框

通过rows属性设置行数，cols属性设置每行的字符数。

周末整理——HTML