HTML学习心得

于 2024-09-24 16:26:08 发布
阅读量501 收藏 17
点赞数 19
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ax_99/article/details/142493240
版权

说起网页技术,今天给大家介绍一个网页开发中的主要技术——HTML。HTML是什么呢？HTML官方定义为超文本标记语言，全称为Hypertext Markup Language。HTML是Web的核心语言，它是使用标记来描述网页的一种语言，它的语法简单、结构清晰。

所谓HTML页面就是我们常说的网页，也会称之为HTML文档。HTML文档中包含HTML标签和文本内容，浏览器会读取HTML文档，并将它们以网页的形式呈现给用户。在HTML页面中可以包含图片、文字、声音、视频、动画、超链接等等。

在网页文档中标签是构成网页的基本单位，也被称为标记、元素，是由尖括号包围起来的关键词，HTML标签分为单标签、双标签，单标签是在开始标签中直接闭合，而双标签由开始标签和结束标签组成，在标签的中间填入内容，大部分的HTML标签可以添加属性用以修饰该标签。在HTML标签不区分大小写，但是W3C建议我们使用小写

一. 最常见的网页结构

<!DOCTYPE html>
<html>
 <head>
 <meta charset='utf-8'>
 <title>开始HTML</title>
 </head>
 <body>
 <h1>你今天码代码了吗？</h1>
 </body>
</html>

以上代码保存为.html格式，然后用浏览器打开即为最简单的网页。可以试一试~

二. HTML元素

元素是HTML的最基本部件，由成对尖括号<>及括号间的内容组成。例如：<h1>你今天码代码了吗？</h1>。

2.1 基本元素（文字粗细，斜体，上/下标，链接，加载图片，删除线，下划线）

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
    <a href="http://www.runoob.com">这是我的第一个链接</a>
    <br />
    <img src="/images/logo.png" width="258" height="28" />
    <br />
    <b>加粗文本</b>
    <br />
    <i>斜体文本</i>
    <br />
    <p>这是<sub>下标</sub></p>
    <p>这是<sup>上标</sup></p>
    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

</body>
</html>

上述元素包括文字粗细，斜体，上/下标，链接，加载图片，删除线，下划线等。以上代码运行后，如图：

2.2 表格

如何生成表格？

会用到以下标签<table></table>,<tr>行标签设置</tr>,<tr>列标签设置</tr>,<th>表头标签设置</th>

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<!--给表格加样式--->
<style type="text/css">
th {background-color:lightskyblue;color: #255e95}
</style>
<body>
<table border="1" cellspacing="0" >
<caption>工资单</caption>
<tr>
    <th>年份</th>>
    <th>季度</th>>
    <th>姓名</th>>
    <th>工资</th>>
    <th>奖金</th>>
    <th>个税</th>>
    <th>扣除个税工资</th>>
</tr>
<tr>
    <td rowspan="4">2019</td>
    <td>1</td>
    <td rowspan="4">王建民</td>
    <td>28900</td>
    <td>3458</td>
    <td>3988</td>
    <td>21454</td>
</tr>
<tr>
    <td>2</td>
    <td>27366</td>
    <td>3458</td>
    <td>3988</td>  
    <td>21454</td> 
</tr>
<tr>
    <td>3</td>
    <td>27366</td>
    <td>3458</td>
    <td>3988</td>  
    <td>21454</td> 
</tr>
<tr>
    <td>4</td>
    <td>27366</td>
    <td>3458</td>
    <td>3988</td>  
    <td>21454</td> 
</tr>
</table>
</body>
</html>

2.3 列表(有序列表/无序列表/嵌套列表)

2.3.1 有序列表

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
</ol>
</body>
</html>

有序列表-水果

2.3.2 无序列表

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ul type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
</ul>
</body>
</html>

无序列表-水果

2.3.3 嵌套列表

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ul type="A">
    <li>苹果</li>
    <ol>
        <li>大苹果</li>
        <li>小苹果</li>
    </ol>
    <li>香蕉</li>
    <li>雪梨</li>
    <li>西瓜</li>
</ul>
</body>
</html>

2.4 <style>和<script>

  • style元素可以给HTML增加css样式
<!--给表格加样式--->
<style type="text/css">
th {background-color:lightskyblue;color: #255e95}
</style>

以上是给表格增加背景色的代码，一般这段加在HTML的<head></head>之间

加入css样式有三种形式：内联样式，内部样式表，外部样式表

内联样式：<h1 style="font-family:arial;"> 文字文字文字</h1>

内部样式表：<style type="text/css"> body {background-color:yellow;} </style>

外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">

  • script+脚本

ax_99
关注
HTML学习总结
09-16
学习前端，HTML、CSS是必不可少的基础内容，但是有太多的标签需要记忆，初学者可能因此而感到烦恼，这也是我在学习过程中的一些感受，通过这段时间的努力学习，我将这段时间所学的内容进行了一番总结，希望对初学者看了这篇文档后有所帮助
前端基础之HTML入门速成（简单的标签学习）
Java小萧博客
03-11 638
昨天有粉丝私信我，说我分享的哪些教程好多都比较抽象，代码也看不懂，还有电子书，也不知道从哪个开始看起，觉得很迷茫。 那么今天工作之余，我自己整理了一些比较简单的前端入门代码，主要是HTML的标签，希望帮助各位初学者快速找到自己想要的网页制作所需要的HTML代码。 一. 最常见的网页结构 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>开始HTML</ti
HTML速成1
lianxiangbus
07-16 119
1、学习HTML的目的 ．作为一个Web开发人员．不可避免的要接触和使用HTML, .JSP实际上是一种动态网页开发的技术．我们经常要在HTML文档中嵌入Java代码．或者动态愉出HTML文档，作为JSP的开发人员，当然应该掌握一些常用的HTML标记，知道在什么位置嵌入Java代码，以及如何将动态内容和标记结合在一起。 .HTML与XML有很多相似的地方．通过和XML的对比学习．将会非...
html学习总结
07-15 182
经过这几天的学习，已经基本掌握制作静态网站的方法。第一节，老简单介绍了什么是html，为什么要学，以及学习的过程。首先，什么是HTML，html是一种超文本语言，html属于前端技术，学好前端技术也有利于我们就业，以下是我对这几天老是讲的内容的个人总结。 1.一些常用标签： b：字体加粗； i：斜体； strong：加粗强调； img：图片标签； solid：实线； ...
Html的一点点收获
06-07 130
结束了牛腩，总结了自己的收获，我开始了征战HTML的计划，在看《提高班培养计划》的时候，我很诧异，因为《HTML孙鑫》这个项目竟然就只有一天的时间，怎么可以这样，但是，我还是决定按照培养计划上来，制定自己的计划，告诉自己，只要做好时间安排，肯定也能完成。 可是，当我拿到HTML孙鑫相关教程视频的时候，我知道了为什么这个项目只给了一天的时见： 1、视频只有一集，12...
HTML5学习心得总结(推荐)
09-28
以下是对HTML5学习心得的总结： 首先，HTML（HyperText Markup Language）超文本标记语言，是一种用于创建网页和网络应用的标准标记语言。HTML不是编程语言，而是一种标记语言，用来描述网页的内容和结构。HTML通过...
html学习心得，我感觉很好
08-28
HTML学习心得 本篇文章总结了 HTML 中 table 标签的各种属性和方法，涵盖了 ACCESSKEY、ALIGN、ATOMICSELECTION、BACKGROUND、BEGIN 等多个方面。这些属性和方法可以帮助开发者更好地理解和使用 HTML table 标签，...
HTML学习心得：掌握table与input标签详解
在本文档中，作者分享了他们的HTML学习心得，强调了HTML基础知识和一些关键元素的理解。主要讲解了两个核心部分：table和input元素。 1. **table**：表格是HTML中的重要组成部分，用于展示数据。学习者首先了解了...
html和css学习心得.doc
最新发布
12-21
HTML和CSS学习心得 HTML和CSS基础知识 在学习Web前端开发时，HTML和CSS是两个基础知识点。HTML（HyperText Markup Language）是一种标准通用标记语言，用来创建网页；CSS（Cascading Style Sheets）是一种样式表...
前端学习：HTML的学习总结
菜鸟-传奇
09-17 495
html简介 1 html是什么：超文本标记语言 超文本：文字/图片/音频/视频 标签/标记：<body></body> 怎么做：使用标签来创建网页 2 HTML的用途：是用来编写静态网页的。 搭建整个网页。（框架）CSS用来装修。。。 3 html结构 1 <html> 2 <head> 3...
HTML速成
我翱翔的天空
06-02 2649
看了HTML孙鑫视频后，对HTML有了基本明确的掌握，梳理知识点对其进行一下总结。              首先我们要了解我们为什么要学习HTML，我们搞Web开发，不可避免要接触HTML。JSP也是要学习到的知识，先来简单认识一下，它是一种动态网页开发的技术。我们经常要在HTML中嵌入Java代码，作为JSP开发人员，必须掌握一些常用的HTML标记。            认识一下HTML
学习HTML总结
weixin_41027007的博客
08-29 163
一、元素分类 块级元素 特点： 1、继承父元素的长宽100%； 2、每个块级元素独占一行； 3、行高padding和margin可设置； 4、块级元素中可以包含块级元素和行内元素 常见的块级元素： 1、<div>块级容器 2、ul li 无序列表 ol li 有序列表 3、<form>表单 4、<p>段落 5、<table>表...
学习html总结
u014272911的专栏
12-04 346
首先我们要知道Html是一门超文本语言（超越了文字所能描述的范围）简单来说它就是除了可以展示基本的文字信息以外还可以展示像图片之类文字所不能描述的信息，它之所以能够展示这些超文本信息是因为它是由标签组成的它可以通过标签的组合来实现超文本信息的展示，我们主要使用它来写网页。 接下来总结一下html的基本语言特点: html代码是分为两个部分的,分别是头和体,很明显头是用来存放一些说明
学习HTML总结1
小陈同学的博客
04-08 241
学习HTML第一天总结 其实，我得说在前面，我呢，其实是学过的了。只是基础打得不是很牢固，所以趁着放假重新整一整（有看书和看视频）。所以初学的朋友，也就不要太较真了，也是可以看的，我加了一些自己的见解。我这总结也是仅供参考，也是督促自己进行学习和总结。【弱弱说一句，之前的总结断了的原因是，作业实在太多了，还要多学其他的，就。。。能原谅我吧？等我有空可以慢慢更】 （不要以为我真是教程，我没有那么厉害...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值