初识HTML简单入门

最新推荐文章于 2024-08-24 09:46:30 发布

Angels_Descent

最新推荐文章于 2024-08-24 09:46:30 发布

阅读量310

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/Angels_Descent/article/details/92797118

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基础知识，包括浏览器内核、Web标准构成、HTML开发工具和基本结构。详细讲解了HTML标签，如标题、段落、图像、超链接和表格，并探讨了HTML5的新标签及特性，如多媒体标签和新的input类型。

摘要由CSDN通过智能技术生成

@月月鸟

一、浏览器内核分类

Trident——IE/Edge浏览器使用
Gecko——火狐浏览器使用
Webkit——safari浏览器使用
Chromium/Blink——Chrome浏览器使用
Presto——Opera浏览器使用（新版Opera已经使用Blink内核）

二、Web标准构成

Web标准是由W3C及其他标准化资质制定的标准集合。包括：结构（Structure）、表现（Presentation）、行为（Behavior）

结构标准：用于对网页元素进行整理和分类，包括 xml、xhtml 两部分
样式标准：用于设置网页元素的版式、颜色、大小等外观，主要指 Css
行为标准：网页模型的定义及交互的编写。包括 DOM和ECMAScript两部分

所以，理想状态下，一个网页的源码中需要包含：.html、.css、.js

三、HTML开发工具

Dreamweaver、Sublime、WebStorm、HBuilder、Visual Studio Code

四、html基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

1、<!DOCTYPE>

<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。

HTML5可以向下兼容，所以，现在直接指定为<!DOCTYPE html>即可。

2、charset（字符编码集）

GB2312：简体中文字符集，含6763个常用汉字
BIG5：繁体中文，港澳台地区使用
GBK：含全部中文字符，是对GB2312的扩展，支持繁体字
UTF-8：支持中文和英文等，是最常用的字符集

五、HTML标签

HTML大量使用语义化标签，所谓语义化就是见名知意

1、排版标签

（1）、标题标签

h 即 head 的简写
有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。
基本格式<h1></h1>
像<h7>这种错误的标签在展示时不起作用

（2）、段落标签

p 即 paragraph 的简写
基本格式<p>段落内容</p>
段落中的文本内容超出浏览器宽度之后会执行自动换行

（3）、水平线标签

hr 即 horizontal 的缩写
其作用是在页面中插入一条水平线
基本格式<hr />
这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）

（4）、容器标签 `<div></div> 和 <span></span>`

div 即 division 的缩写，分割、区分的意思
span 即 span ，跨度、范围的意思
这俩本质上是一个容器，类似于 Android 中的ViewGroup
基本格式<div>这是div标签中的内容</div> <span>这是span标签中的内容</span>

2、文本格式化标签

3、标签的属性

基本格式：<标签名属性1=”属性值1“ 属性2=”属性值2“></标签名>
标签可以拥有多个属性
属性必须写在开始标签中，位于标签名后面
属性之间不区分顺序
标签名与属性、属性与属性之间使用空格隔开
任何属性都有默认值，省略该属性表示使用默认值

4、图像标签 `<img />`

img 即 image 的缩写
基本格式<img src="图片URI/URL" />
常用属性如下：
设置图像的宽高时，如果想等比缩放，则只设置其中一个即可

5、超链接标签

(1)、超链接标签`<a></a>`

anchor 的缩写
基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>
- href 即 HyperText Reference , 指定要跳转的URL地址
- target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开

注意：

外链需要添加 http:// 或 https:// 前缀
内部链接直接链接内部页面名称即可，如首页
如果当时没有确定链接目标时，可以为 href 赋值为 “#” ,即 href="#",表示一个空连接
各种网页元素，如文本、图像、表格、音频、视频等都可以作为超链接的载体

（2）、锚点

通过创建锚点，可以快速定位到目标内容区域
创建锚点分为两步
- 为目标内容（即锚点）创建id 并赋值
- 将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a>

6、`<base>` 标签

<base> 标签可以限定同一页面内所有超链接的打开方式。
<base target="_blank">
设置之后依旧可以为某个单独的超链接设置打开方式。

<img /> 、 < br/>、 <hr />、<base/> 都是自闭合标签

7、转义字符

在这里插入图片描述

8、注释标签

格式为 < !-- 注释内容 -- >

9、路径

（1）、相对路径

图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img src="logo.gif"/>
图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img src="image/logo.gif"/>
图像文件位于HTML文件的上一级，在文件名之前加 " …/ ", 上两级则使用 " …/…/ ",依次类推。<img src="../image/logo.gif"/>

(2）、绝对路径

本地绝对路径： D:\web\img\logo.gif
网络绝对路径：https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip|imageView2/2/w/700

10、列表标签

（1）、无序列表 `<ul>`

所谓无序列表就是以小圆点或者小方块作为行首标志的列表
无序列表的各项之间是并列的，没有顺序级别的区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表 ul</title>
</head>
<body>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>

</body>
</html>

注意：

<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
<li></li> 之间相当于一个容器，可以嵌套任意标签

（2）、有序列表 `<ol></ol>`

内部也是嵌套<li></li>
默认以 1、2、3…作为行首排序标志

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表ol</title>
</head>
<body>
    <ol >
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
</body>
</html>

（3）、自定义列表 `<dl></dl>`

<dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd>
自定义列表项前不具有任何项目符号，既没有小圆点也没有1234

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>自定义列表项1</dt>
            <dd>自定义列表项1 的内容解释1</dd>
            <dd>自定义列表项1 的内容解释2</dd>
        <dt>自定义列表项2</dt>
            <dd>自定义列表项2 的内容解释1</dd>
            <dd>自定义列表项2 的内容解释2</dd>
    </dl>
</body>
</html>

11、表格标签 table

<table></table> 用来定义表格，
<tr></tr> 用来定义行，嵌套在 <table></table> 中
<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素
表格相关的属性如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
    <tr>
        <td>第一行第1列</td>
        <td>第一行第2列</td>
        <td>第一行第3列</td>
    </tr>
    <tr>
        <td>第二行第1列</td>
        <td>第二行第2列</td>
        <td>第二行第3列</td>
    </tr>
</table>
</body>
</html>

12、表头标签

表头一般位于表格的第一行或者第一列。
表头标签为，在显示的时候默认会显示为加粗的效果
增加表头时，使用替代对应位置的即可

13、表格标题标签 caption

<caption></caption> 标签用来定义标题的标签
必须写在 <table></table> 中，和 <thead></thead>平级

14、单元格合并

适用于 <td></td>、<th></th>
colspan 跨列合并（水平合并）
rowspan 跨行合并（垂直合并）

15、表单标签

html 中一个完整的表单通常由表单元素、提示信息、表单域（即多个表单的父容器）三部分组成。

（1）、imput 输入标签

<input/> 为单标签（自闭合标签）
type 是其基本属性，用来控制输入的类型

在这里插入图片描述

多个 radio 使用相同的 name ，则表示这是一组数据，这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
    用户名：<input type="text" maxlength="15"/>
    <br/>

    <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
    密　码：<input type="password"/>
    <br/>

    <!--使用name 限定了一组内容，从而实现单选-->
    性　别：
    <input type="radio" name="sex" checked="checked"/> 男
    <input type="radio" name="sex"/> 女
    <br/>

    爱　好：
    <input type="checkbox" name="hobby"/> 看电影
    <input type="checkbox" name="hobby"/> 读书
    <br/>

    <input type="button" value="普通按钮"/>
    <br/>
    <input type="submit" value="提交按钮"/>
    <br/>
    <input type="reset" value="重置按钮"/>
    <br/>
    <input type="image" src="../image/imgButton.png"/>
    <br/>

    请选择文件：<input type="file"/>

</body>
</html>

效果图如下：
在这里插入图片描述

(2)、label 标签(理解)

label 标签为 input 标签定义标注/标签
用来绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获取焦点
通过 for 属性，可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label的使用</title>
</head>
<body>
    <!--label 中直接包裹 input,可以实现绑定-->
    <label>点击此处文本，用户名输入框会获取焦点 <br> 用户名：<input type="text"/></label>
    <br/>

    <hr/>
    <!--使用 label 的 for 属性绑定input-->
    <label for="#two">点击此处文本，密码输入框会获取焦点</label>
    <br/>
    用户名：<input type="text"/>
    <br/>
    密　码：<input type="text" id="#two"/>
</body>
</html>

(3)、textarea 文本域标签

<textarea></textarea>用来做大量文本的输入，支持多行
有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。（这两个属性通常不被使用，更多使用会使用CSS样式做相关控制）

（4）、下拉菜单

<select></select> 用来定义下拉菜单
<option></option> 用来定义下拉菜单选项
<select></select> 中至少包含一对 <option></option>
在 option 中定义了属性 selected=“selected” 之后，表示该项被默认选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select标签</title>
</head>
<body>
    设置家乡
    <select >
        <option>选择省份</option>
        <option>山东</option>
        <option>内蒙古</option>
        <option>黑龙江</option>
        <option>山西</option>
    </select>
    <select>
        <option>济南</option>
        <option selected="selected">临沂</option>
        <option>聊城</option>
        <option>莱芜</option>
        <option>青岛</option>
    </select>
</body>
</html>

在这里插入图片描述

(5)、表单域 `<form></form>`

该标签用来定义表单域，以实现用户信息的收集和传递，form 中的内容通常都会被提交到服务器。
基本语法格式：

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

常用属性有action、method、name
- action : 指定接收并处理表单信息的服务器url地址
- method : 表单数据的提交方式。分为 post / get
- name : 指定表单名称，用来区分页面中的多个表单
每个表单都应该有自己的表单域
使用form 包裹之后点击提交按钮才有提交的动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单域</title>
</head>
<body>
    <!--使用 form 包裹之后，提交按钮和图片按钮点击时就有效果了-->
    <form action="https://www.baidu.com" method="post" name="userInfo">
        用户名：<input type="text" maxlength="15"/>
        <br/>

        <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
        密　码：<input type="password"/>
        <br/>

        <!--使用name 限定了一组内容，从而实现单选-->
        性　别：
        <input type="radio" name="sex" checked="checked"/> 男
        <input type="radio" name="sex"/> 女
        <br/>

        爱　好：
        <input type="checkbox" name="hobby"/> 看电影
        <input type="checkbox" name="hobby"/> 读书
        <br/>

        <input type="button" value="普通按钮"/>
        <br/>
        <input type="submit" value="提交按钮"/>
        <br/>
        <input type="reset" value="重置按钮"/>
        <br/>
        <input type="image" src="../image/imgButton.png"/>
        <br/>

        请选择文件：<input type="file"/>

    </form>
</body>
</html>

六、HTML5新标签及新特性

1、文档类型设定

即 <!Doctype > 对应的属性值。

HTML , 对应早期的 HTML4.0.1, 其基本结构如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <title>Document</title>
     </head>
     <body>
     </body>
 </html>

XHTML ，其基本结构如下：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>Document</title>
  </head>
  <body>
  
  </body>

HTML5 ，其基本格式如下

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  <body>
  
  </body>
  </html>

在webStorm 中，如果想查看上述三种类型的基本格式，可以按如下步骤：new > file > 输入文件名为 xxx.html > 分别输入 html:4s / html:xt / html:5 然后回车即可
如果想查看某个页面使用了两种 HTML，可以右击，然后选择查看网页源码，然后查看<!Doctype > 中的信息即可

2、字符设定

XHTML、HTML中设置字符集时使用：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5 中设置字符集时使用：

<meta charset="UTF-8">

3、常用新标签

在这里插入图片描述

(1)、datalist 示例

datalist 中包裹 option
datalist 与 input 关联后，input 就具备的 select 的效果，同时具有了输入联想功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inputlist</title>
</head>
<body>
    <input type="text" value="请输入姓名" list="names">
    <datalist id="names">
        <option>张三</option>
        <option>李四</option>
        <option>王五</option>
    </datalist>

</body>
</html>

（2）、fieldset 示例

fieldset 默认宽度满屏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fieldset</title>
</head>
<body>
    <fieldset>
        <legend>用户登录</legend>
        用户名:<input type="text"/>
        <br/>
        密　码:<input type="password"/>
    </fieldset>
</body>
</html>

效果图如下：
在这里插入图片描述

4、新增的input type属性值

这些新增的类型，更加细化的限定了输入内容，如果输入格式不对，在提交的时候会自动给出相应提示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>newInputType</title>
</head>
<body>
    <form action="http://www.baidu.com">
        email：<input type="email"/>
        <br/>
        tel：<input type="tel"/>
        <br/>
        url：<input type="url"/>
        <br/>
        number：<input type="number"/>
        <br/>
        search：<input type="search"/>
        <br/>
        range：<input type="range"/>
        <br/>
        time：<input type="time"/>
        <br/>
        date：<input type="date"/>
        <br/>
        datetime：<input type="datetime-local"/>
        <br/>
        month：<input type="month"/>
        <br/>
        week：<input type="week"/>
        <br/>
        color：<input type="color"/>
        <br/>
        <input type="submit"/>
    </form>
</body>
</html>

在这里插入图片描述

5、新增的input 属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>newInputAttr</title>
</head>
<body>
    <form action="form.html">

        <input type="text" placeholder="请输入用户名"/>
        <br/>
        <br/>
        <!--可以简化为 <input type="text" autofocus/>  -->
        <input type="text" autofocus="autofocus" placeholder="自动获取焦点"/>
        <br/>
        <br/>
        <input type="file" multiple/>
        <br/>
        <br/>
        <input type="text" autocomplete name="identify" placeholder="下次自动补足输入内容"/>
        <br/>
        <br/>
        <!--在火狐浏览器中，如果没有输入内容，点击输入框外部区域，边框会变红-->
        <input type="text" required placeholder="这是必填项"/>
        <br/>
        <br/>
        <input type="text" accesskey="s" placeholder="获取焦点的快捷键为 alt+s"/>
        <br/>
        <br/>
        <input type="submit"/>
    </form>
</body>
</html>

在这里插入图片描述

6、综合案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <label>姓　　名：<input type="text" placeholder="请输入学生姓名"/></label> <br/>
            <label>手 机 号：<input type="tel" placeholder="请输入学生手机号"/></label><br/>
            <label>邮　　箱：<input type="email"/></label><br/>
            <label>所属学院：<input type="text" list="academy"/></label>
            <datalist id="academy">
                <option >JAVA学院</option>
                <option >前端学院</option>
                <option >PHP学院</option>
            </datalist><br/>
            <label>出生日期：<input type="date"/></label><br/>
            <label>语文成绩：<input type="number" max="100" min="0" value="0"/></label><br/>
            <label>数学成绩: <meter max="100" min="0" low="59" value="10"></meter></label><br/>
            <label>英语成绩: <meter max="100" min="0" low="59" value="90"></meter></label><br/>
            <input type="submit"><br/>
            <input type="reset">

        </fieldset>
    </form>
</body>

7、多媒体标签

embed : 定义嵌入的内容
audio : 播放音频
video : 播放视频

（1）、embed

用来插入各种多媒体，格式可以是 Midi、Wav、 AIFF 、AU 、Mp3等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>embed</title>
</head>
<body>
<embed src="http://player.video.iqiyi.com/44cb2ab93ef163fea5a206e52da7c390/0/0/v_19rqyv6lfo.swf-albumId=1268727400-tvId=1268727400-isPurchase=0-cnId=3"
       allowFullScreen="true" quality="high" width="480" height="350" align="middle"
       allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>

上面示例代码中，embed 节点中的内容是直接从爱奇艺网站下复制的。做法是：找到一个视频 > 分享 > 点击向下的箭头（即更多）> 复制 html 代码即可

(2)、audio

html5 通过 <audio></audio> 标签实现音频播放
audio 开始和结束标签之间可以嵌入文本，当浏览器不支持该标签时，该文本可以作为提示语。

常用属性如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
    <!--使用方式1-->
    <audio src="../assets/audio/皇后大道东.mp3" autoplay="autoplay" controls="controls" loop="loop">
        提示语：您的浏览器不支持audio标签
    </audio>

    <br/>

    <!--使用方式2: 通过 source 定义三种音频格式，从而达到不同浏览器上都能播放的情况-->
    <audio loop controls preload="auto">
        <source src="../assets/audio/皇后大道东.mp3">
        <source src="../assets/audio/皇后大道东.ogg">
        <source src="../assets/audio/皇后大道东.wav">
        提示语：您的浏览器不支持audio标签
    </audio>
</body>
</html>

在这里插入图片描述