前端学习之HTML基础（一）

最新推荐文章于 2024-04-28 23:24:05 发布
最新推荐文章于 2024-04-28 23:24:05 发布
阅读量1k 收藏 24
点赞数 6
文章标签： 前端 html 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/queen_is_king/article/details/125659761
版权

本人小白笔记，欢迎交流

文章目录

前言

首先要明白网页开发在现在都需要什么，这里就不一一罗列了

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
学习HTML就是学习各种标签，然后针对我们想要的内容来使用相应的标签。

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML的基本标签（框架）

<!DOCTYPE HTML>#文档声明
<!DOCTYPE html>
<html lang="en">
<head>#页面的头
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
   <body>#页面的身
   ……
   </body>
</html>

1、html标签

整个网页是从这里开始的，然后到结束

2、head标签

head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”
可供学习

3、body标签

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）

二、段落与文字、网页特殊符号、自闭合标签、块元素和行内元素

1、段落和文字标签

1.1、段落和文字标签

标题标签：<h1></h1>~<h6></6>
段落标签：<p></p>
本人制作总结，仅供学习

1.2、文本格式化标签

本人制作总结，仅供学习

2、网页特殊符号

网页特殊符号（有很多，并且实用，可以点开这个超链接看看，这位博主总结的很全！）只需要记忆一个就行了，就是HTML空格“ ”，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就可以了

3、自闭合标签

一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。

一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。

3.1、一般标签

如：<body></body>

3.2、自闭合标签

如：<br/>、<hr/>

4、块元素和行内元素

块元素特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。

行内元素特点：

（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。

三、列表

1、html的三种列表

有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。

目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。

1.1、有序列表

语法：

<ol>
		<li></li>
		....
	</ol>

举个例子：

<ol>
	<li>你</li>
	<li>是个</li>
	<li>小可爱</li>
</ol>

属性：
1、类型（表达方式： type=“1/A/a/I/i”）如下：

1: 默认值，默认是阿拉伯数字排序
A：大写的英文字母
a：小写的英文字母
I：大写的罗马数字
i：小写的罗马数字

2，起始位置（start=“数字”） 数字是几，从第几位开始排列

<ol type="a" start="2">
	<li>你</li>
	<li>是个</li>
	<li>小可爱</li>
</ol>

1.2、无序列表

无序列表一般用作网站的导航
语法：

<ul>
		<li></li>
		....
	</ul>

举个例子：

<ul>
		<li>你</li>
		<li>是个</li>
		<li>小可爱</li>
	</ul>

属性：
1、类型（type=“disc/circle/square”）如下：

disc:默认值，实心圆
circle：空心圆
square：实心方块

举个例子：

<ul type="square">
	<li>你</li>
	<li>是个</li>
	<li>小可爱</li>
</ul>

2、列表的嵌套

<ul>
		<li>
			<ul>
				<li></li>
			</ul>
		</li>
	</ul>

注意：ul和li不分家，必须搭配使用，不能分开单独使用！

1.3、定义列表

语法：

<dl>
		<dt>自定义标题</dt>
		<dd>自定义描述</dd>	
	</dl>

<dl>即定义列表，<dt>即定义名词，而<dd>即定义描述。

在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。

<dl>
		<dt>html</dt>
		<dd>
			超文本标记语言，就是网页，后缀名是html或者htm。
		</dd>
		<dt>四季春秋</dt>
		<dd>
			春夏秋冬，四季更迭。
		</dd>
	</dl>

四、表格

1、表格语义记忆

1、<table></table>是用于定义表格的标签。

2、<tr></tr>标签用于定义表格中的行，必须嵌套在 <table></table>标签中。

3、<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4、字母td指表格数据（table data)，即数据单元格的内容。

5、<th></th>标签表示HTML表格的表头部分，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

举个例子：

 <table>
        <tr><td>季节</td> <td>月份</td> <td>时间</td></tr>
        <tr><td>春</td> <td>1、2、3</td> <td>3个月</td></tr>
        <tr><td>夏</td> <td>4、5、6</td> <td>3个月</td></tr>
        <tr><td>秋</td> <td>7、8、9</td> <td>3个月</td></tr>
        <tr><td>冬</td> <td>10、11、12</td> <td>3个月</td></tr>
    </table>

<table>
        <tr><th>季节</th> <td>月份</th> <th>时间</th></tr>
        <tr><td>春</td> <td>1、2、3</td> <td>3个月</td></tr>
        <tr><td>夏</td> <td>4、5、6</td> <td>3个月</td></tr>
        <tr><td>秋</td> <td>7、8、9</td> <td>3个月</td></tr>
        <tr><td>冬</td> <td>10、11、12</td> <td>3个月</td></tr>
    </table>

2、表格基本结构

<table>、<tr>和<td>是HTML表格最基本的3个标签,这3者必须要有。
语法：

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

<table></table>标记着表格的开始和结束，<tr></tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td></td>标记着单元格的开始和结束。

3、表格完整结构

表格完整结构应该包括表格标题、表头、表身和表脚4部。<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚
语法：

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
    <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>

4、合并行和合并列

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

4.1、合并行

语法：<td rowspan="跨度的行数">
举个例子：

<table>
        <!--第1行-->
        <tr>
            <td>你是谁？</td>
            <td>小可爱</td>
        </tr>
        <!--第2行-->
        <tr>
            <td rowspan="2">你喜欢哪两个季节</td>
            <td>春天</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>秋天</td>
        </tr>
    </table>

4.2、合并列

语法：<td colspan="跨度的列数">
举个例子：

<table>
        <!--第1行-->
        <tr>
            <td colspan="2">唯美四季</td>
        </tr>
        <!--第2行-->
        <tr>
            <td>春</td>
            <td>夏</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>秋</td>
            <td>冬</td>
        </tr>
    </table>

五、图像

1、图像标签

在HTML中，图像标签为<img>。img标签我们一般掌握这3个属性就可以了：src、alt、title。
语法：<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
src和alt这两个属性是img标签必不可少的属性。其他属性我们一般很少遇到。

2、相对路径和绝对路径

1、如果源文件和引用文件在同一个目录里，直接写引用文件名即可，这时引用文件的方式，就是使用相对路径。

2、HTML绝对路径在网页制作中指带域名的文件的完整路径。

3、图片格式

对于初级小白来说，我们现在只需要掌握三种图片格式就可以啦，如：.jpg、.png和.gif。

1、JPG最主要的优点是能支持上百万种颜色，从而可以用来表现照片。此外，由于JPG图片使用更有效的有损压缩算法，从而使文件长度更小，下载时间更短。
经过压缩的JPG的图片一般不适合打印，在备份重要图片时也最好不要使用JPG

2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据，图像文件格式允许连续读出和写入图像数据。

3、GIF格式支持背景透明、动画、图形渐进、无损压缩。
GIF这种索引颜色格式最大的缺点就是它只有256种颜色，这对于照片质量的图片是显然不够的。

六、链接

在一个HTML源文件里加入一个超链接代码的语法如下：<a href="链接地址" target="目标窗口的打开方式">

<a>标签target属性： 仅供学习
超链接根据不同的链接分为：

（1）外部链接（外部链接就是外部的网站页面）

（2）内部链接（内部指的是自身网站的页面，内部链接一般都使用相对路径）：①内部页面链接；②锚点链接；

这里细细讲讲锚点链接：

有些页面内容比较多，导致页面过长，为了方便用户操作，我们可以使用锚点链接来优化用户体验。

要想实现锚点链接需要定义以下两个参数：目标元素的id，a标签的href属性指向该id。给a标签的href属性赋值时，需要在id前面加上#，用来表示这是一个锚点链接。

 <div>
           <a href="#season">四季</a><br/>
           <a href="#skill">琴棋书画</a>
       </div>
       <div id="season">
           <h3>喜欢的季节</h3>
           <ul>
               <li>春</li>
               <li>秋</li>
           </ul>
       </div>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       ......<br/>
       <div id="skill">
           <h3>熟练的技能</h3>
            <ul>
                <li>棋</li>
                <li>画</li>
            </ul>
       </div>

七、表单

表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。

1、input标签表单

1、该标签用于搜集用户信息；

2、根据不同的type属性值，输入字段拥有很多形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选框等；

3、在html中，<input>标签没有结束标签，但在xhtml中<input>必须被正确地关闭；

语法：<input type="表单类型"/>
在这里插入图片描述

2、textarea标签表单

2.1、多行文本框

1、单行文本框只能输入一行信息，而多行文本框可以输入多行信息。多行文本框使用的是textarea标签，而不是input标签。

2、在该语法中，不能使用value属性来建立一个在文本域中显示的初始值，这一点跟单行文本框不一样。

3、对于多行文本框的默认文字内容，可以设置，也可以不设置。

语法：< textarea rows=”行数(高度)” cols=”列数(宽度)”>多行文本框内容< /textarea>

2.2、3种文本框对比

单行文本框和密码文本框使用<input>标签，而多行文本框使用<textarea>标签。

1、单行文本框

语法：<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>
举个例子：

<form name="my_Form" method="POST">
        姓名：<input type="text">
    </form>

这里注意text的几个重要属性：

value ： 定义文本框的默认值，也就是文本框内的文字

siae : 定义文本框的长度，以字符为单位

maxlength : 设置文本框中最多可以输入的字符数

2、密码文本框

语法：<input type="password">
举个例子：

 <form name="my_form" method="POST">
        账号：<input type="text" value="zql" size="20"><br>
        密码：<input type="password" size="20">
    </form>

3、多行文本框

语法：<textarea rows="行数" cols="列数">多行文本框内容</textarea>
举个例子：

 <form name="my_form" method="POST">
        <textarea cols="8" rows="20">介绍一下自己</textarea>
    </form>

3、select和option

select 元素可创建单选或多选菜单。<select> 元素中的 <option> 标签用于定义列表中的可用选项。

语法：

<select multiple="mutiple" size="可见列表项的数目">

    <option value="选项值" selected="selected">选项显示的内容</option>

    ……

    <option value="选项值">选项显示的内容</option>

</select>

注意：<option> 标签可以在不带有任何属性的情况下使用，但是通常需要使用 value 属性，要与与 select 元素配合使用此标签，否则这个标签是没有意义的。如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。

总结

这里总结的HTML知识还没有结束，继续加更！！！

Autumn_Hibiscus
关注
  • 6
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端学习12：HTML头部、布局
RainstormGod的博客
04-19 2210
meta name="concrotion" content="这是一个网页">
前端学习之HTML
Dev-L的博客
06-24 779
HTML介绍 web服务的实质 import socket sk = socket.socket() sk.bind((&amp;quot;127.0.0.1&amp;quot;, 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b&amp;quot;HTTP/1.1 200 OK\r...
前端开发——HTML基础入门
m0_74304535的博客
04-08 2069
HTML指的是超文本标记语言，它是用来描述网页的一种语言，而非编程语言。HTML使用标签来描述网页，例如：(1).标签名(body)放在中。(body)属于双标签，成对出现。以(body)为开始标签，(/body)为结束标签。内容放在开始标签和结束标签之间。(2).少数标签为单标签，区别与双标签，它只有开始标签。(3).开始标签中有些时候可能会带有属性。
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
最新发布
HTML网页设计
04-28 912
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、个人总结四、更多干货 一、网页介绍 1 网页简介：此作
还不会写网页？10分钟后…会了，确定不来学习吗？
很高兴你能看到这里
05-30 1439
大家好！今天分享一下关于HTML的知识，一是帮助自己复习，二是想告诉小伙伴们，网页没你想的那么复杂，我会用大白话讲解，让你快乐走上前端之路，我是一个后端的，手动狗头，话不多说，coding 🍉...
HTML前端设计技术重要代码总结1
weixin_53926350的博客
01-11 370
在下面输入style，然后在style里面输入type="text/css"，之后所有的样式都在里面设置。如果不知道盒子的位置在哪里，可以设置background-color:red;在style里面输入以下代码，用来清除默认的外边距、内边距和列表的样式。先在空文件里面，输入html，点击第二个。画盒子，用div或者ul标签。
前端基础的学习html+css.zip
01-05
前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css...
前端小白-HTML基础知识学习总结
03-23
前端小白-HTML基础知识学习总结
前端基础入门html技术
11-18
前端入门提供给刚入刚的小伙伴们免费学习
基于html5的web前端设计（旅游景点介绍）
01-01
资源是本人在平时闲暇时间琢磨做的一个网站中的一个子网页，需要web课程设计的同学可以来下载，网页中包含css,html5,javascript
HTML5网页前端设计实战
08-16
资源包含文档和代码，循序渐进介绍了一些基于HTML，CSS和JavaScript的基础项目，帮助读者打好基本功
html5网页前端设计案例
07-07
html5网页前端设计案例，精选的商业网页案例，实用经典。
前端html学习记录，可
02-24
1. **基础语法**：学习HTML的基本元素，如、、等，以及属性的使用，比如class、id和href。 2. **语义化标签**：理解并使用语义化的HTML5标签，如、、、等，以提升网页可读性和搜索引擎友好性。 3. **结构与布局**：...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
HTML基础知识点总结
cx0112的博客
03-16 2140
HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML 文本可以说明文字、图形、动画、声音、表格、链接等。
网页设计前端作品（大一）HTML+CSS
有问必答，欢迎打扰，项目开发，网页设计
09-30 9113
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
Java学习篇——JavaWeb：CSS
zhang19971014的博客
04-06 952
CSS:层叠样式表： 作用:,美化页面. 内联样式：在标签的style属性中添加样式代码, 弊端:不能复用 <h1 style="color: red;background-color: green">内联样式1</h1> 内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用 <style> /*css注释*/ /*通过选择器找到元素然后再添加样式代码*/ ..
Java Web前端学习笔记：HTML到AJAX基础
本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从HTML基础入手。HTML（HyperText Markup Language）是网页内容的基石，用于定义网页的结构。1-1部分简单介绍了HTML，而1-2部分则列出了常用的HTML标签。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值