html总结

最新推荐文章于 2023-05-07 23:36:37 发布

weixin_46054760

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量160

点赞数 2

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_46054760/article/details/117513444

版权

前言

费曼学习法，源于一个农民让自己的儿子回来之后将学到的知识讲给自己最后以优异的成绩考上了清华。其重点就是输出。学到的知识只有最终经过自己的理解，输出，自己才可能会掌握。

本文是我结合我学习html中遇到的问题来总结的，简要的概括了html常用的知识点，再加上一些自己的理解，以一名学习者的身份写的一篇文章，难免有些问题。希望大家不吝赐教，一起学习。

一.简介

1.1 HTML概述

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML文档的主要特点：

1、容易创建。

2、文件占用空间小，能够尽快地在网络环境下传输和显示。

3、平台无关性。HTML独立于操作系统平台，能对多平台兼容。

4、简单易学，不需要很深的编程知识。

5、可扩展性好。

1.2 文档结构

<!DOCTYPE HTML>
<html>
    <head>...</head>
    <body>...</body>
</html>

<!DOCTYPE HTML>是HTML文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
<html></html>称为HTML根标签，所有的网页标签都在
<html></html>中。
<head></head>标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在标签中的内容最终会在浏览器中显示出来。

1.3 编写工具

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

vscode的安装和html的配置也十分简单。这里推荐一个网站https://blog.csdn.net/caohongxing/article/details/108632859
有较为详细的安装和配置教程，在这就不赘述了。

二.文本和图像

2.1 添加文本

2.2.1文本输入

普通文本在<body>标记部分直接输入就可以了。但对于一些特殊符号如:< , > , & , "等，需要使用html编码代替才能正常显示。
下面附上常用的转换表：

字符	十进制字符编号
半角大的空白	`&ensp;`
全角大的空白	`&emsp;`
不断行的空白格	`nbsp;`
<	`<`
>	`&gt`
&	`%amp;`
"	`"`
×	`×`
÷	`÷`

2.1.2文本样式

<b>加粗</b><br />
<strong>加粗</strong><br />
<big>字体放大</big><br />
<em>斜体</em><br />
<i>斜体</i><br />
<small>缩小</small><br />
a
<sub>2（下标）</sub>
+1=b
<sup>2(上标)</sup>

2.2 文本排版

换行<br />
<p>段落标记（会自动换行）</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>一级标题</h6>

2.3 文字列表

无序列表；
    <ul>
        <li>盛饭</li>
        <li>夹菜</li>
        <li>吃饭</li>
        <li>刷牙</li>
    </ul>
有序列表：
    <ol>
        <li>盛饭</li>
        <li>夹菜</li>
        <li>吃饭</li>
        <li>刷牙</li>
    </ol>

2.4 图像<img>

定义和用法
img 元素向网页中嵌入一幅图像。
注意: 从技术上讲，标签并不会在网页中插入图像，而是从网页上链接图像。标签创建的是被引用图像的占位空间。
基本格式：

<img src="图片路径">
<!-- 图片路径可以是绝对路径也可以是相对路径 -->
<!-- 如：
相对路径 -->
<img src="logo.png"><br />  <!--与现在这个html文件在同一路径-->
<img src="./picture/hh.jpg"><br \>
<!-- 绝对路径 -->
<img src="D:\code\html\picture\hh.jpg">

设置图像的宽度和高度：

<img src="logo.png">
<img src="logo.png" width="200">
<img src="logo.png"width="200" height="300">

图像的提示文字：

三.超链接

3.1 超链接<a>

<a href="网址">网页元素</a><br />
<!-- 如： -->
<a href="http://www.cqjtu.edu.cn/"><img src="logo.png"></a><br />
<a href="http://www.cqjtu.edu.cn/">重庆交通大学官网</a><br />
<!-- 另外超链接也可以指向文件和邮箱
如： -->
<a href="logo.png">logo</a><br />
<a href="mailto:565773804@qq.com">笔者的qq邮箱</a><br />

<!-- 设置新窗口方式打开 -->
<a href="http://www.cqjtu.edu.cn/" target="_blank"><img src="logo.png"></a><br />

细心的你可能发现那几个超链接的颜色好像不一样，这是因为在默认情况下，文本会自动增加下画线，并且文本颜色变为蓝色，单击过的超链接，文本会变成暗红色。如果需要更好的展示效果，就需要学习css了。

3.2 浮动框架

<style>
    iframe{
        width: 1200px;/*宽度*/
        height: 800px;/*高*/
        border: none;/*边框*/
    }
</style>

<iframe src="http://www.cqjtu.edu.cn/"></iframe>

iframe默认情况下为220*120像素，如果修改需要使用css样式。

四.表格

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

例如：

<table border="1">
	<tr>
		<td>第一行, 第一列</td>
		<td>第一行, 第二列</td>
	</tr>
	<tr>
		<td>第二行, 第一列</td>
		<td>第二行, 第二列</td>
	</tr>
</table>

HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：

<!--HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：-->
<table border="1">
    <tr>
        <th>一</th>
        <th>二</th>
    </tr>
    <tr>
        <td>第一行, 第一列</td>
        <td>第一行, 第二列</td>
    </tr>
    <tr>
        <td>第二行, 第一列</td>
        <td>第二行, 第二列</td>
    </tr>
</table>

合并单元格：

    <!-- 其中 border，bordercolor等都是设置表格格式的，等到学习css时再了解也可以 -->
    <ol>
        <li>基本表格</li>
        <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>
        <br />
        <li>表格合并列</li>
        <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
            <tr>
                <td colspan="3">1.1</td>
                <!--<td>1.2</td>-->
                <!--<td>1.3</td>-->
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>
        <br />
        <li>表格合并行</li>
        <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
            <tr>
                <td rowspan="3">1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <!--<td>2.1</td>-->
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <!--<td>3.1</td>-->
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>
        <br />
        <li>复杂表格</li>
        <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
            <tr>
                <td>1.1</td>
                <td colspan="2">1.2</td>
                <!--<td>1.3</td>-->
            </tr>
            <tr>
                <td>2.1</td>
                <td rowspan="2">2.2
                    <br />3.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <!--<td>3.2</td>-->
                <td>3.3</td>
            </tr>
        </table>
        <br />
    </ol>

五.表单

语法：

<form  method="post"（规定如何发送表单数据      常用值：get|post）
 action="result.html">（表示向何处发送表单数据）
   <p>  账号：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

表单元素：

属性	解释
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

<form>
    单选：
    <input name="gen" type="radio" (单选按钮框) value="男" (值) (单选按钮选中状态) checked/>男
    <input name="gen" type="radio" value="女" />女<br />
</form>
<form>
    多选：
    <input type="checkbox" (复选框) name="interest" value="sports" (值) />运动
    <input type="checkbox" name="interest" value="talk" (复选框选中状态)  checked/>聊天
    <input type="checkbox" name="interest" value="play" />玩游戏
</form>
<form>
    游戏：<br />
    <select (列表框) name="name" size="2" multiple>
    <option value="wzry"(默认选中项) selected="selected">王者荣耀</option>
    <option (选项) value="cj">吃鸡</option>
    <option (选项) value="qqdzz">球球大作战</option>
    </select>
</form>
<form>
    <input type="reset" (重置按钮) name="butReset" value="reset按钮" (按钮上显示的文字)>
    <input type="submit" (提交按钮) name="butSubmit" value="submit按钮">
    <input type="button" (普通按钮) name="butButton" value="button按钮" />
    <br />
    图片按钮：
    <input type="image" src="12833.png" /(图片路径)> <br />
    <textarea (多行文本域) name="showText" cols="x" (显示的列数)
    rows="y" (显示的行数)>文本内容 </textarea>
</form>

<form action="" method="post" enctype="multipart/form-data" （表单编码属性）>
    <p><input type="file" (文件域) name="files" />
        <input type="submit" name="upload" value="上传" /></p>
</form>
<p>邮箱:<input type="email" （邮箱） name="email" /></p>
<input type="submit" />
<p>请输入你的网址:<input type="url" （网址） name="userUrl" /></p>
<input type="submit" />
<p>请输入数字:<input type="number" (数字) name="num" min="0" (允许的最小值) max="100" (允许的最大值) step(合法的数字间隔)="10" />
</p>
<input type="submit" />
<p>请输入了解程度:<input type="range" (滑块) name="range1" min="0" (允许的最小值) max="10" (允许的最大值) step(合法的数字间隔)="2" />
</p>
<input type="submit" />
<p>请输入搜索的关键词:<input type="search" (搜索框) name="sousuo" /></p>
<input type="submit" />

<p>请输入搜索的关键词:<input type="search" (搜索框) name="sousuo" /></p>
<input type="submit" />

六、汇总

相信你现在对html有一定的了解了，可以试着写一个小网站，巩固一下知识。
比如像我这样：

<!DOCTYPE html>
<html>

<head>
    <title>
        网页标题
    </title>
    <meta charset="utf-8" />
    <!--编码-->
    <meta name="keywords" content="嘿嘿嘿,hhh,哈哈哈" />
    <!--关键词-->
    <!-- <meta http-equiv="refresh" content="10;https://www.bilibili.com/" /> -->
    <!--自动刷新网页跳转-->
    <link rel="shortcut icon" href="favicon.ico">
    <!--网页图标设置 -->
    <style>
        iframe {
            width: 500px;
            height: 500px;
            border: none;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <p><b>加粗</b></p>
    <!--p是段落关键词-->
    <p><em>强调文字</em></p>
    <p><strong>加强调文字</strong></p>
    <p><i>斜体</i></p>
    <br />
    <!--换行-->
    <h2>菜单（无序列表）</h2>
    <ul>
        <li>素食</li>
        <ul>
            <li>🌶</li>
            <li>🍆</li>
        </ul>
        <li>荤菜</li>
        <ul>
            <li>🐮</li>
            <li>🐖</li>
        </ul>
    </ul>
    <h2>小目标（有序列表）</h2>
    <ol>
        <li>先赚他一个亿</li>
        <li>再赚5亿</li>
    </ol>
    <hr>
    <!--水平线-->
    <br />
    <!--换行-->
    <img src="1283371.ico" alt="未加载完成时显示的替代文字" title="鼠标放在上面显示的文字"><br>
    <a href="https://www.bilibili.com/"><img src="favicon.ico"> </a> <br>
    <a href="http://www.baidu.com/" target="_blank">百度一下</a><br>
    <a href="mailto:565773804@qq.com">站长信箱</a><br>
    <!-- 热点地区 -->
    <!-- <img src="logo.png" usemap="#hhh"><br>
    <map id="#hhh">
        <area shape="circle" coords="120,120,50" href="https://www.bilibili.com/">
        <area shape="rect" coords="10,10,100,100" href="http://www.cqjtu.edu.cn/">
    </map> -->


    <iframe src="http://www.cqjtu.edu.cn/"></iframe>
    <table>
        <tr>
            <td colspan="3">成绩统计</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>58</td>
            <td>100</td>
        </tr>
    </table>
    <h2>表单</h2>
    <form>
        <h3>登录系统</h3>
        请输入账号：<input type="text" name="user" size="20" maxlength="6" value="123546"><br>
        请输入密码：<input type="password" name="pw" size="20" maxlength="15" required="required"><br>
        <input type="submit" name="signIn" value="登录">
        <input type="reset" name="re" value="重置"><br>
    </form>
    <form>
        反馈：<br>
        <textarea name="yj" cols="50" rows="5"></textarea><br>
        <input type="submit" name="feedback" value="提交"><br>
    </form>
    <form>
        评价：<br>
        <input type="radio" name="book" value="1" checked>满意<br>
        <input type="radio" name="book" value="2">一般<br>
        <input type="radio" name="book" value="3">不满意<br>
        <input type="submit" name="evaluate" value="提交">
    </form>
    <form>
        建议：<br>
        <input type="checkbox" name="b" value="11">加快网站速度<br>
        <input type="checkbox" name="b" value="22">丰富网站内容<br>
        <input type="checkbox" name="b" value="33">加强安全系数<br>
        <input type="checkbox" name="b" value="44">减少广告<br>
        <input type="submit" name="proposal" value="提交">
    </form>
    <form>
        打赏：<br>
        <select name="reward" id="007" size="3" multiple>
            <option value="r1">50￥
            <option value="r1">25￥
            <option value="r1">12￥
            <option value="r1">6￥
            <option value="r1">3￥
        </select>

    </form>
    <form>
        请输入百度一下的网址：<br>
        <input type="url" name="baidu" /><br>
    </form>
</body>

</html>

七.推荐网站及工具

HTML标签参考手册
https://www.runoob.com/tags/html-reference.html
我们老师写的一个教程，我觉得挺不错的，里面还有css，ts等方面的教程
https://qige.io/
菜鸟教程
https://www.runoob.com/html/html-tutorial.html

后记

html不难，知识点也比较少，只要多练习，相信你很容易就能掌握它。学完后可以试着像我一样写一个教程来巩固知识，加深印象。

本文参考了部分优秀博主的文章，但因为时间匆忙没有一一记录，深感抱歉。

== 完结，撒花。==

weixin_46054760

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html总结

HTML总结前言一.简介1.1 HTML概述1.2 文档结构1.3 编写工具二.文本和图像2.1 添加文本2.2 文本排版2.3 文字列表2.4 网页中的图像<img>三.超链接3.1 URL3.2 超链接<a>3.3 浮动框架四.表格4.1 基本结构4.2 样例五.表单5.1 基本元素5.2 高级元素六.学习建议6.1 推荐网站及工具6.2 学习方法前言       说实话，写本文的目的很简单，就是为了完成老师的作业，但我仔细想了想，写文
复制链接

扫一扫