HTML简单教程

最新推荐文章于 2023-03-01 15:49:11 发布

橘子的心脏

最新推荐文章于 2023-03-01 15:49:11 发布

阅读量387

点赞数

文章标签： html css web js html5

本文链接：https://blog.csdn.net/qq_43693115/article/details/118524071

版权

HTML简单教程（HTML5标准）

HTML简介

HTML：超文本标记语言（HyperText Markup Languag）是一种用于创建网页的标准标记语言。 **结构：**

<!DOCTYPE html> 
<html> 
<head> 
<!-- 下面这个是声明编码 中文网页需要声明utf-8 -->
<meta charset="utf-8"> 
<!-- 下面这个是网页上的标题 会显示在网页的标签上面 -->
<title>这里是网页的标题</title> 
</head> 
<body> 
    <!-- 这里的h1...h4对应文档里的一至四级标题 -->
    <h1>标题一</h1> 
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>

    <!-- p 相当于文档里一个自然段得到标记 -->
    <p>一个段落</p>
    <p>还是一个段落</p> 
</body> 
</html>

这是一个简单的网页结构。

显示结果：
运行结果

< !DOCTYPE html >声明为html5文档。
< html > 元素是 HTML 页面的根元素。
< head >元素包含了文档的元数据，有定义的网页编码格式。有脚本（scripts）, 样式文件（CSS），及各种meta信息。
< title >元素是网页标题，处于< head >中间。
< body >元素是页面可见内容的区域。
< h1 > 元素是标题，其中h1…h4对应文档里的一至四级标题。
< p >元素是一个文档的段落。

HTML标题

html的标题是通过< h1 >...< h6 > 的标签来定义的。分别对应一到六级标题。
代码如下：

    <h1>标题一</h1> 
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>

运行结果如下

HTML段落

html的段落是通过< p >标签来定义的。
代码如下：

    <p>一个段落</p>
    <p>还是一个段落</p>

运行结果如下：

HTML链接

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

<!-- 可以通过点击这个文字访问CSDN -->
<a href="https://www.csdn.net/" target="_black">这是一个链接</a>

其中 target="_black" 是让点击链接文字打开新的标签页，如果不添加就会在原网页上重新加载这个页面。
而 href="https://www.csdn.net/"是存放链接地址的一个地方。href的内容也可以是某个html元素的id，可以通过点击链接文字访问连接的html元素的位置。
其中链接文本不一定是文本，图片或者其他的html也可以成为链接。

HTML图像

html图像是通过标签< img >来定义的。
代码:

<img src="img/image1.jpg" alt="这是一张照片" style ="width:20%;">

src 指 “source”。源属性的值是图像的 URL 地址。就是图片的存放位置。
alt 属性用来为图像定义一串预备的可替换的文本。
style是指图片的样式风格。这里设置的样式风格是宽度是20%。
并且HTML图像可以不通过CSS直接设置高度和宽度。而是直接通过height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

<img src="123.jpg" width="100" height="100">

HTML元素

HTML 元素以开始标签起，HTML 元素以结束标签终止，元素的内容是开始标签与结束标签之间的内容。
并且大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。像：

<body> 
    <h1>标题一</h1>
</body>

这样的就是body元素嵌套h1。

HTML空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

< br> 就是没有关闭标签的空元素。其作用是换行。

HTML属性

HTML 元素可以设置属性，属性可以在元素中添加附加信息，属性一般描述于开始标签。

例：

<a href="https://www.csdn.net/" target="_black">这是一个链接</a>

其中 href 、target就是< a>的属性。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
html部分属性参考表

属性	描述
href	超文本引用（用 < a> ）
src	SouRCe 资源位置资源的路径
border	边框数字(像素)
size	尺寸数字(像素)
width	宽度数字(像素)
height	高度数字(像素)
type	列表类型
align	对齐 Left、right、center
alt	替换(图片不显示时提示信息)
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML 格式化标签

HTML可以使用标签< strong>和< em>对显示的文本进行格式化，分别对应粗体和斜体。例子：

<p>这是 <strong>一句话。</strong> 这还是 <em>一句话。</em> </p>

这是显示结果：

这是 一句话。 这还是 一句话。

这种文本格式化标签还有很多

标签	描述
b	定义粗体文本
em	定义斜体文字
i	定义斜体字
strong	定义粗体文本
del	定义删除字
ins	定义插入字

这是部分格式化标签

HTM< head>元素

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

可以添加在头部区域的元素标签为: < title>, < style>, < meta>, < link>, < script>, < noscript> 和 < base>。

元素	描述	例子
title	标签定义了不同文档的标题。	< title>文档标题< /title>
base	签描述了基本的链接地址/链接目标	< base href=“链接地址” target="_blank">
link	标签定义了文档与外部资源之间的关系。	< link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
style	标签定义了HTML文档的样式文件引用地址	< style type=“text/css”>< /style>
meta	标签描述了一些基本的元数据。	< meta name=“author” content=“Runoob”>
script	加载脚本文件	< script> < /script>

HTML样式CSS

CS用于渲染HTML元素标签的样式。通过一下方式进行添加：

内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

<p style="color:rgb(0, 255, 200);margin-left:10px;">这是一句话</p>

运行结果：

内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在< head> 部分通过 < style>标签定义内部样式表。
代码：

<head>
<style type="text/css">
p {color:red;}
</style>
</head>

外部引用
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

这些都是简单的CSS样式，想要真的学号CSS样式。还是要系统的学习CSS样式。

HTML表格

HTML是由< table>标签来定义的。每个表格的行用< tr>来表示。列用 < td>来表示。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。示例代码：

<table border="1">
        <tr>
            <td>123</td>
            <td>456</td>
        </tr>
        <tr>
            <td>789</td>
            <td>012</td>
        </tr>
    </table>

这里的 border是表格的边框线的大小。
运行结果：

123	456
789	012

如果不定义边框属性，表格将不显示边框。
表格的表头可以使用th标签来定义。因为大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
        <tr>
            <th>123</th>
            <th>456</th>
        </tr>
        <tr>
            <td>789</td>
            <td>012</td>
        </tr>
    </table>

运行结果：

123	456
789	012

HTML列表

HTML支持有序列表跟无序列表还有自定义列表。
其中有序列表用< ol>标签定义，每个列表项始于< li>标签。
代码：

<ol>
    <li>这也是一行</li>
    <li>这也是一行</li>
    <li>这还是一行</li>
    <li>这里还是一行</li>
    <li>还是一行</li>
</ol>

运行结果：

这也是一行
这也是一行
这还是一行
这里还是一行
还是一行

其中ol标签可以设置有序列表的有序值，通过type属性进行设置。代码：

<ol type="A">
    <li>这也是一行</li>
    <li>这也是一行</li>
    <li>这还是一行</li>
    <li>这里还是一行</li>
    <li>还是一行</li>
</ol>

运行结果：

其中这个type的值可以是a、A、I、i(其中I、i对应罗马数字大写小写)等，默认就是数字。

无序列表使用

标签，默认使粗体圆进行标记。
代码：

<ul>
        <li>这也是一行</li>
        <li>这也是一行</li>
        <li>这还是一行</li>
        <li>这里还是一行</li>
        <li>还是一行</li>
    </ul>

运行结果：

这也是一行
这也是一行
这还是一行
这里还是一行
还是一行

其中也可以为无序列表改变符号，通过css样式style="list-style-type:circle"就可以改成空心圆。详细的查阅CSS样式。
代码：

<ul style="list-style-type:circle">
        <li>这也是一行</li>
        <li>这也是一行</li>
        <li>这还是一行</li>
        <li>这里还是一行</li>
        <li>还是一行</li>
    </ul>

运行结果：

自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。
代码：

<dl>
        <dt>第一</dt>
        <dd>这是一行</dd>
        <dt>第二</dt>
        <dd>这还是一行</dd>
    </dl>

运行结果：

第一

这是一行

第二

这还是一行

HTML的区块元素和内联元素

大部分 HTML 元素被定义为块级元素或内联元素

块级元素会进行换行来开始和结束
例如: < h1>, < p>, < ul>, < table>

内联元素在显示时通常不会以换行开始。
例如: < b>, < td>, < a>, < img>

其中< div >元素块级元素，它可用于组合其他 HTML 元素的容器。与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。可以用于文档布局。
div布局演示：

<div style="background-color: sandybrown; width: 500px;">
        <div style="background-color: seagreen;margin-bottom: 0px;" >
            <h1 style="margin-bottom: 0px;">123</h1>
        </div>
        <div style="background-color: skyblue;width: 100px;float: left;height: 100px;">
        <p>123</p>
        </div>
        <div style="background-color: slategray; width: 400px;float: left; height: 100px;">
        <p style="margin-bottom: 0px;">
            123
            <br>
            456
            <br>
            789
        </p>
        </div>
        <div style="background-color: teal;">
        0000
        </div>
    </div>

运行结果：

其原理就是多个div进行嵌套使用配合样式就是这样的效果。

其中布局还可以通过table来布置：
代码：

<table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color: teal;margin-bottom: 0px;">
                <h1 >123</h1>
            </td>
        </tr>
        <tr>
            <td style="background-color: turquoise;width: 100px;">
                <p>123</p>
            </td>
            <td style="margin-bottom:0px;background-color: violet;width: 400px;">123</td>
        </tr>
        <tr>
            <td style="background-color: wheat;"colspan="2">
                123
            </td>
        </tr>
    </table>

运行结果：

跟div是一样的原理通过表格行与列的嵌套配合CSS样式来完成布局。

< span>元素是内联元素，可用作文本的容器,与 CSS 一同使用，< span> 元素可用于对大的内容块设置样式属性。

HTML的表单和输入

HTML 表单用于收集不同类型的用户输入。其中表单是指包含表单元素的一个区域，通过< form>标签来进行输入。其中< form>有action、method等属性。其中action指向的文件，当提交表单时跳转到该文件。method是使用的方法。

表单元素有文本域、密码字段、单选按钮、复选框、提交按钮等。都是通过< input>标签来定义的。表单元素都是放在< form>标签里的。文本域：

 <form action="">
        姓名: <input type="text" name="firstname">
    </form>

运行结果：

密码字段：

<form action="">
        password: <input type="password" name="pw">
    </form>

运行结果：

可以发现在password的文本框里输入的字符变成了圆点。

单选按钮：

	<form action="">
        <input type="radio" name="sex" value="男">男
        <br>
        <input type="radio" name="sex" vale ="女">女
        <br>
    </form>

运行结果：

复选框：

 <form action="">
        <input type="checkbox" name="aihao" value="自行车">自行车
        <br>
        <input type="checkbox" name="aihao" value="跑车">跑车
        <br>
    </form>

运行结果：

提交按钮：
提交按钮就相当于把你的一切表单输入内容，提交到action属性所指定的某个界面或者某个函数。

<form action="">
        <input type="submit" name="Submit">
    </form>

运行结果：

HTML脚本

< script> 标签用于定义客户端脚本，比如 JavaScript。< script>既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 使 HTML 页面具有更强的动态和交互性。

例如：

<script>
document.write("Hello World!");
</script>

运行结果：

运行结果
JavaScript是一个很好的脚本语言。需要自己更详细的学习。

HTML的大概内容只有这么多。这些只是一个大概。可能还有很多细节没有深入比如HTML的框架，HTML的颜色等。这个内容借鉴了这个网站。这个网站讲述的更详细。

橘子的心脏

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML简单教程

HTML简单教程（HTML5标准）HTML简介HTML：超文本标记语言（HyperText Markup Languag）是一种用于创建网页的标准标记语言。**结构：**<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl
复制链接

扫一扫