HTML 简单学习

最新推荐文章于 2023-09-04 21:59:50 发布
最新推荐文章于 2023-09-04 21:59:50 发布
阅读量643 收藏 4
点赞数
分类专栏： HTML 和 CSS 学习笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanhuaibeian/article/details/104299361
版权

具体可参考

文章目录

一、概念

是最基础的网页开发语言：Hyper Text Markup Language 超文本标记语言

超文本:是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言:
	* 由标签构成的语言。<标签名称> 如 html，xml
	* 标记语言不是编程语言

二、快速入门

  1. html文档后缀名 .html 或者 .htm
  2. 标签分为
围堵标签：有开始标签和结束标签。如 <html> </html>
自闭和标签：开始标签和结束标签在一起。如 <br/>

  1. 标签可以嵌套：
    需要正确嵌套，不能你中有我，我中有你
    错误：<a><b></a></b>
    正确：<a><b></b></a>

  2. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

  3. html 的标签不区分大小写，但是建议使用小写。

三、标签学习

1. 文件标签：构成html最基本的标签

* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* <!DOCTYPE html>：html5中定义该文档是html文档

2. 文本标签：和文本有关的标签

* 注释：<!-- 注释内容 -->
* <h1> to <h6>：标题标签 * h1~h6:字体大小逐渐递减
* <p>：段落标签
* <br>：换行标签
* <hr>：展示一条水平线
	  * 属性：
	  * color：颜色
	  * width：宽度
	  * size：高度
	  * align：对其方式
			* center：居中
			* left：左对齐
			* right：右对齐
* <b>：字体加粗
* <i>：字体斜体
* <font>:字体标签
* <center>:文本居中
* 属性：
		* color：颜色
		* size：大小
		* face：字体

属性定义：
		* color：
			1. 英文单词：red,green,blue
			2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
			3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF（推荐写法）
		* width：
			1. 数值：width='20' ,数值的单位，默认是 px(像素)
			2. 数值%：占比相对于父元素的比例

3. 案例分析

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>黑马程序员简介</title>
</head>
<body>

<h1>
    公司简介
</h1>
<hr color="#ffd700">

<p>
    <font color="#FF0000">"程序员训练营"</font>是由<b><i>CSDN</i></b>联合中关村软件园、CSDN，
</p>

<p>
    一直以来，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>

<hr color="#ffd700">

<font color="gray" size="2">
    <center>
        XXXXX 科技股份有限公司<br>
        版权所有Copyright 2006-2018&copy;, All Rights Reserved
    </center>
</font>
</body>
</html>

4. 图片标签

img：展示图片
属性 src：指定图片的位置
属性 alt：规定图像的替代文本

<img src="image/tupian.jpg" align="right" alt="图片" 
  width="500" height="500"/>
alt属性：表示图片加载失败时显示

相对路径：以.开头的路径

./：代表当前目录：./image/1.jpg
../:代表上一级目录： <img src="../image/jiangwai_1.jpg">

5. 列表标签

有序列表：

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

无序列表：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

6. div 和 span 标签

div:每一个div占满一整行。块级标签（实际上，换行是 <div> 固有的唯一格式表现）
span：文本信息在一行展示，行内标签 内联标签
	（span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。）

7. 语义化标签

语义化标签就是 html5 中为了提高程序的可读性，提供了一些标签

<header>: 标签定义文档的页眉（介绍信息）
<footer>：标签定义文档或节的页脚。

8. 表格标签

table：定义表格

属性：
	* width：宽度
	* border：边框
	* cellpadding：定义内容和单元格的距离
	* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
	* bgcolor：背景色
	* align：对齐方式

tr：定义行

属性：
	* bgcolor：背景色
	* align：对齐方式

td：定义单元格

	* colspan：合并列
	* rowspan：合并行

th：定义表头单元格

	* <caption>：表格标题
	* <thead>：表示表格的头部分
	* <tbody>：表示表格的体部分
	* <tfoot>：表示表格的脚部分

四、案例实现

1. 前期分析

（1） 确定使用 table 来完成布局
（2）如果某一行只有一个单元格，则使用

<tr>
	<td></td>
</tr>

（3）如果某一行有多个单元格，则使用表格的嵌套完成

<tr>
		<td>
			<table> </table>
		</td>
</tr>

2. 问题

<tr>
            <td align="center" bgcolor="#ffd700" height="40">
                <font color="gray" size="2">
                    JavaWeb 开发开发
                    版权所有 Copyright 2020-2&copy;All Rights Reserved
                </font>
            </td>
        </tr>

搞不懂什么状况，对于 tr 和 td 标签添加背景色不好使了，纳闷，在 w3school 上练习还好好的的。

3. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游网</title>
</head>
<body>
<!-- 采用 table 来完成布局   -->
<!--    最外层的 table，用于整个页面的布局-->
    <table width="100%" align="center">
<!--        第1行--->
        <tr>
            <td>
                            <!--width表示图片的屏幕占比-->
                <img src="image/top_banner.jpg" width="100%" alt="">
            </td>
        </tr>
<!--        第2行-->
        <!--        如果某一行有多个单元格，则使用表格的嵌套完成-->
        <tr>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="image/logo.jpg">
                    </td>
                    <td>
                        <img src="image/search.png">
                    </td>
                    <td>
                        <img src="image/hot_tel.jpg">
                    </td>
                </tr>
            </table>
        </tr>
<!--        第3行-->
        <tr>
            <td>
<!--                cellspacing 表示单元格之间的距离-->
                <table width="100%" align="center" cellspacing="0">
                    <tr bgcolor="#ffd700" align="center" height="45">
                        <td>
                            <a href="">首页</a>
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            酒店
                        </td>
                        <td>
                            香港车票
                        </td>
                        <td>
                            出镜游
                        </td>
                        <td>
                            国内游
                        </td>
                        <td>
                            港澳游
                        </td>
                        <td>
                            抱团定制
                        </td>
                        <td>
                            全球自由行
                        </td>
                        <td>
                            收藏排行榜
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
<!--        第4行-->
        <tr>
            <td>
                <img src="image/banner_3.jpg"alt="" width="100%">
            </td>
        </tr>
<!--        第5行-->
        <tr>
            <td>
                <img src="image/icon_5.jpg">
                网站精选
                <hr color="#ffd700">
            </td>
        </tr>
<!--        第6行-->
        <tr>
            <td>
                <table>
                    <tr>
                        <td>
                            <img src="image/jiangxuan_1.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
<!--        第7行-->
        <tr>
            <td>
                <img src="image/icon_6.jpg">
                国内游
                <hr color="#ffd700">
            </td>
        </tr>
<!--        第8行-->
        <tr>
            <td>
                <table align="center"width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="image/guonei_1.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="image/jiangxuan_2.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
<!--        第9行-->
        <tr>
            <td align="center" bgcolor="#ffd700" height="40">
                <font color="gray" size="2">
                    JavaWeb 开发开发
                    版权所有 Copyright 2020-2&copy;All Rights Reserved
                </font>
            </td>
        </tr>
    </table>

</body>
</html>
南淮北安
关注
专栏目录
HTML简单学习
weixin_45830683的博客
05-17 346
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> head 标签 掌握标签： <title></title>网页标题标签 告诉浏览器使用什么标题 <meta charset="utf
HTML简单学习笔记
bjxiaxueliang的CODING技术小馆
04-26 809
HTML学习菜鸟教程： http://www.runoob.com/html/html-tutorial.html html简单学习笔记案例github地址： https://github.com/xiaxveliang/Html_Demo html标签定义的更像格式； css确定的更像是样式；<!DOCTYPE html> <html><!-- head文档标题 --> <head> <
HTML+CSS简单学习笔记
chenHARDEN的博客
06-30 282
HTML+CSS 学习资源： 入门： HTML+CSS基础入门视频教程（从第三章开始）：2020前端「HTML+CSS」零基础入门 - 网易云课堂 入门实战操作（OPPO网站）：Web前端开发_中国大学MOOC(慕课) 进阶： H5/C3视频教程：H5C3零基础入门 - 网易云课堂 进阶实战操作（淘宝网站制作）：淘宝项目 文章目录HTML+CSS**学习资源：**lesson1 HTMLHTML初级篇-基础标签HTML高级篇-高级标签lesson2 CSS基础16进制颜色代码原理：引入css：选择器：*
HTML学习系统
02-10
个人开发的HTML学习软件，包括HTML标签的查询、代码测试、简易的考试系统等等，是学习HTML语言的好工具。
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
最新发布
qq_53058639的博客
09-04 2864
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 58万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
学习html的心得体会
weixin_47978224的博客
03-19 1万+
1、HTML的简介及大体介绍： HTML 是用来描述网页的一种语言。 它是一种超文本标记语言，并不是一种编程语言。它包含了一套标记标签，并用此来描述网页。因此HTML文档包含了HTML标签和文本内容。 HTML标签是由尖括号包围的关键词， HTML 标签通常是成对出现的，比如 <p> 和 </p> 标签对中的第一个标签是开始标签，第二个标签是结束标签 一个HTML元素包含了开始标签、内容、结束标签。例如：<p>这是一个段落。</p> 2、HTML的运用
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
努力是为了站在万人之中，成为别人的光
08-16 3万+
如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示
HTML制作个简单的网页
Piwrim的博客
11-29 6263
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 注意：对于中文网页需要使用<meta charset="utf-8">声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为<meta charset="gbk">。
HTML简单入门 代码加注释详解
Slide-楠的博客
06-03 5816
HTML 初识网页 <!DOCTYPE html> <html lang="en"> <!--head标签代表网页头部--> <head> <!--meta描述性标签，它用来描述我们网站的一些信息--> <!--meta一般用来做SEO--> <meta charset="UTF-8"> <meta name="keywordls" content="Java，博客"> &
简单html个人网站
07-04
"简单html个人网站"标题表明我们正在讨论一个基础的HTML模板，适用于构建个人网站。这个模板可能是初学者在学习HTML时创建的，用以实践基本的网页布局和设计。 在描述中提到的“HTML网页编程”和“主页模板”，暗示...
测开学习篇-html
亚索的博客
07-14 1万+
2.有序列表和无序列表 3.div分区 4.语义标签 div和span 对于div和span这两个元素，不少新手也不知道它们之间有什么区别，使用起来也很随便。因此，这里有必要简单介绍一下。div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素 样式的。div和span区别如下：(1 ) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操
使用HTML制作一个简单的个人主页
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
HTML做一个简单的页面（纯html代码）地球专题学习网站
HTML网页设计
08-02 2823
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
HTML 和 CSS 简单实现注册页面
南淮北安的博客
02-17 8130
文章目录一、效果页面二、代码1. 页面样式代码2. 页面内容代码 一、效果页面 二、代码 1. 页面样式代码 *{ margin: 0px;/*所有的外边距为0*/ padding: 0px;/*所有的内边距为0*/ box-sizing: border-box;/*规定两个并排的带边框的框*/ } body{ background: url("image/reg...
HTML 简单实现注册页面
南淮北安的博客
02-16 6481
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <!-- 定义表单 form--> <!-- action 属性规定当提交表单时向何处发送表单数据。--&...
Python爬虫学习：网页基础
南淮北安的博客
01-08 822
1.网页的组成 网页可以分为三大部分，HTML、CSS和JavaScript。将网页当成一个人的话，HTML为人的骨架，CSS为人的皮肤，JavaScript为人的肌肉，三者结合起来才能形成一个完善的网页。 HTML 超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。不同类型的元素通过不同的标签来表示，如视频用video标签表示...
一文快速入门 HTML 和 CSS（珍藏版）
南淮北安的博客
02-29 710
文章目录一、学习目录二、扩展目录 一、学习目录 HTML 简单学习 HTML 表单标签 HTML 简单实现注册页面 CSS 简单学习 HTML 和 CSS 简单实现注册页面 二、扩展目录 ...
HTML基础教程：学习创建简单段落
"HTML基础教程学习——简单段落示例" 在HTML（超文本标记语言）中，学习基础知识是创建网页的第一步。HTML是一种用于构建网页结构的语言，它允许我们将文本内容与标记结合，以呈现丰富的网页布局。不同于普通的文本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南淮北安

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值