关于HTML的学习记录

最新推荐文章于 2024-01-23 16:55:53 发布

JustA-LoNg

最新推荐文章于 2024-01-23 16:55:53 发布

阅读量216

点赞数

文章标签： web

本文链接：https://blog.csdn.net/weixin_45189628/article/details/115333222

版权

一、HTML简介

——转自百度百科

在本次学习中，我将采用VSCode来作为编辑器来编辑HTML。

二、HTML的结构

1.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

例如

<html>		//开始标签
</html>		//结束标签

2.HTML元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签
例如

<p>我的猫咪脾气暴。</p>

3.<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。出于历史原因需要，现在可有可无。

4.中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

5.HTML头

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

6.HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

以上代码在网页中显示为
在这里插入图片描述
可以看到大小的区别。

7.HTML 段落

HTML 段落是通过标签 <p> 来定义的，一般放在<body>中。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

以上代码在网页中显示为
在这里插入图片描述

8.HTML文本格式化

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

以上代码在网页中显示为
在这里插入图片描述

9.HTML 链接

HTML 链接是通过标签 <a> 来定义的。

点击超链接来跳转到新的文档或者当前文档中的某个部分。
在标签中使用了href属性来描述链接的地址。

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

以上代码在网页中显示为
在这里插入图片描述
点击即可跳转到百度搜索的主页

10.HTML 图像

HTML 图像是通过标签 <img> 来定义的.<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。源属性的值是图像的 URL 地址。

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

以上代码在网页中显示为
在这里插入图片描述

11.HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <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>

以上代码在浏览器上显示为
在这里插入图片描述
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
表格的表头使用 <th> 标签进行定义。

12.HTML 列表

(1) HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签

在这里插入图片描述

以上代码在浏览器中显示为
在这里插入图片描述

(2) HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。

以上代码在浏览器中显示为
在这里插入图片描述

13.HTML区块

HTML 的元素可以以称为区块或内联的方式进行显示。

(1) HTML 区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

(2) HTML 内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

14.HTML布局

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

以上代码在浏览器上显示为
在这里插入图片描述

15.HTML 表单和输入

(1) HTML 表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>

(2) HTML 表单 - 输入元素

输入类型是由类型属性（type）定义的。

①文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

显示为
在这里插入图片描述

②密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

显示为
在这里插入图片描述

③单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

显示为
在这里插入图片描述

④复选框（Checkboxes）

用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

显示为
在这里插入图片描述

⑤提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

显示为
在这里插入图片描述

JustA-LoNg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于HTML的学习记录

目录一、HTML简介二、HTML的结构1.HTML的构成2.HTML标签3.HTML元素4. 声明5.中文编码6.HTML头7.HTML标题8.HTML 段落9.HTML文本格式化10.HTML 链接11.HTML 图像12.HTML 表格13.HTML 列表(1) HTML无序列表(2) HTML 有序列表(3) HTML 自定义列表14.HTML区块(1) HTML 区块元素(2) HTML 内联元素(3) HTML `` 元素(4)HTML `` 元素15.HTML布局16.HTML 表单和输入(1)
复制链接

扫一扫