HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布
最新推荐文章于 2023-01-12 15:14:08 发布
阅读量173 收藏
点赞数 1
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haisdw/article/details/120557664
版权
本文详细介绍了HTML的基础知识，包括初步认识HTML结构、设置文本样式、使用图像、建立超链接、创建表格以及构建表单。重点讲解了各种标签的用法，如段落(p)、换行(br)、标题(h1~h6)、文本列表(ul, ol)、图像(img)、超链接(a)、表格(table)和表单(form)等，同时涵盖了HTML5的特性。" 113537187,10539854,C/C++内存管理：避免越界与内存泄漏的5大规则,"['C++', '内存管理', '内存错误']
摘要由CSDN通过智能技术生成

HTML学习笔记

1、初步认识HTML结构

1、标签成对存在
2、第一个标签html，里面有head(头），还包含body(身体），还包含title（标题），

<html>
<head>
<title>初步认识HTML</title>
</head>
<body>
hi
</body>
</html>

在这里插入图片描述

2、设置文本

2.1、文本排版

2.1.1、段落标签：p

<html>
<head>
<title>文本排版</title>
</head>
<body>
<p>shgbshjdjvhs</p>
<p>gsghfdhj</p>
</body>
</html>

在这里插入图片描述

2.1.2、换行标签：br

<html>
<head>
<title>换行标签</title>
</head>
<body>![请添加图片描述](https://img-blog.csdnimg.cn/3950b8477abe4311bfcdd9c297f742c5.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yek5Yek5byA5b-D,size_20,color_FFFFFF,t_70,g_se,x_16)

我是换行标签<br/>换行了
</body>
</html>

在这里插入图片描述

2.1.3、标题标签 ：h1~h6

<html>
<head>
<title>标题标签</title>
</head>
<body>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
</body>
</html>

在这里插入图片描述

2.1.4、文字居中标签：center

<html>
<head>
<title>文字居中标签</title>
</head>
<body>
<center>我是文字居中标签</center>
</body>
</html>

在这里插入图片描述

2.1.5、文字段落缩进标签：blockquote

<html>
<head>
<title>文字段落缩进标签</title>
</head>
<body>
<blockquote>abcdyfjqajksyr</blockquote><br/>
<blockquote>fhsjhavdjfjkfb</blockquote><br/>
</body>
</html>

在这里插入图片描述

2.2、文字列表

2.2.1、无序列表：ul

<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	<li>第四项</li>
</ul>
</body>
</html>

在这里插入图片描述

2.2.2、有序列表：ol

<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
	<li>第四项</li>
</ol>
</body>
</html>

在这里插入图片描述

2.3、HTML标记与属性

2.3.1、align属性控制段落水平位置

<html>
<head>
<title>align属性控制段落水平位置
</title>
</head>
<body>
<p   align="center">align属性控制段落水平位置</p>
</body>
</html>

在这里插入图片描述

2.3.2、bgcolor属性设置背景颜色

<html>
<head>
<title>bgcolor属性设置背景颜色
</title>
</head>
<body   bgcolor="red">
<p >bgcolor属性设置背景颜色</p>
</body>
</html>

在这里插入图片描述

2.3.3、文字的特殊样式

<html>
<head>
<title>文字的特殊样式
</title>
</head>
<body>
<b>文字以粗体方式显示</b><br/>
<i>文字以斜体方式显示</i><br/>
<u>文字以加下划线方式显示</u><br/>
<s>文字以加下删除方式显示</s><br/>
<big>文字以放大方式显示</big><br/>
<small>文字以缩小方式显示</small><br/>
<strong>文字以加强强调方式显示</strong><br/>
<em>文字以强调方式显示</em><br/>
<address>wangfeng2021@520.com</address><br/>
<code>ABC</code><br/>
</body>
</html>

在这里插入图片描述

2.3.4、文字大小和颜色font标签

<html>
<head>
<title>font标签</title>
</head>
<body >
<font     color="yellow"      size="10"       face="宋体">王凤真乖</font>
</body>
</html>

在这里插入图片描述

2.4、特殊文字符号

<html>
<head>
<title>特殊文字符号</title>
</head>
<body >
&lt;3.14159/&gt;<br/>
版权所有&copy;www.feng1234.com<br/>
5<sup>6</sup><br/>
4<sub>2</sub><br/>
</body>
</html>

在这里插入图片描述

3、在网页中使用图像img

**注意事项**：要把所需要的图片和网页放在一起

在这里插入图片描述

3.1、初识网页图片

<html>
<head>
<title>初识网页图片</title>
</head>
<body >
<img  src="sd.jpg"/>
</body>
</html>

在这里插入图片描述

3.2、相对路径VS绝对路径


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  我开学了（ '▿ ' ）
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










              
                



	

		

			

				
					
HTML笔记整理（个人笔记）

				
			

			

				

					w3535222的博客
				

				

					03-07
					
					3656
					
				

			

		

		

			
				
个人笔记

			
		

	



                


  
              

                


	

		

			

				
					
HTML笔记

				
			

			

				

					Anansoul的博客
				

				

					12-21
					
					193
					
				

			

		

		

			
				
标签中——鼠标悬浮效果，一定要按照“lvha”的顺序
link：正常的链接
visited：访问过的链接（只能定义字体的颜色）
hover：鼠标滑过的链接
active：正在点击的链接
标签中适用
	：before  指定元素前
	：after      指定元素后
	：frist-letter    首字母
	：frist-line    首行
	：first-child   选择第一个子标签
...

			
		

	





	

		

			

				
					
HTML笔记（全）

				
			

			

				

					程序猿小九九的博客
				

				

					06-04
					
					3425
					
				

			

		

		

			
				
HTMLHTML5HTML5的优势W3C标准常见IDEhtml基本机构、等成对的标签，分别叫开放标签，和闭合标签单独呈现的标签（空元素），如意为用/来关闭空元素
03.网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号


04.图像标签
常见的图像格式
05.超链接标签及应用

文本超链接
图像超链接

超链接
06.块元素和行内元素

块元素

无论内容多少，该元素独占一行
(p、h1-h6、…)


行内元素

内容撑开宽度，左右都是行内元素的可以排在一行
(a  

			
		

	



		

			
		



	

		

			

				
					
html学习笔记

				
			

			

				

					06-22
				

			

		

		

			
				
### HTML学习笔记  #### 一、属性  **1. `contenteditable` 属性**  - **定义**: `contenteditable` 属性用于指定一个元素的内容是否可以被用户编辑。 - **值**:  - `true`: 表示元素内容可编辑。  - `false`: 表示...

			
		

	





	

		

			

				
					
Html学习笔记

				
			

			

				

					10-29
				

			

		

		

			
				
自己学习html的笔记,普通文本格式，适合非前端专业开发者参考。学的好还得自己好好理解。

			
		

	





	

		

			

				
					
HTML简单笔记

				
			

			

				

					HelloWorld
				

				

					05-18
					
					1126
					
				

			

		

		

			
				
编码：目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。


HTML 标题（Heading）是通过 -  标签来定义的.


HTML 链接是通过标签  来定义的.


HTML 图像是通过标签  来定义的.


HTML 标签对大小写不敏感： 等同于 。许多网站都使用大写的 HTML 标签


HTML 链接由  标签定义。链接的地址在 href 属性中指定



hr 元素可用于分隔内容





如果您希望在不产生一个新段落的情..

			
		

	





	

		

			

				
					
【HTML】HTML学习笔记（全）

					
热门推荐

				
			

			

				

					Bitdancing的专栏
				

				

					12-09
					
					1万+
					
				

			

		

		

			
				
前端HTML学习笔记大全

			
		

	





	

		

			

				
					
HTML学习笔记(全)

					
最新发布

				
			

			

				

					weixin_63676550的博客
				

				

					01-12
					
					5666
					
				

			

		

		

			
				
HTML学习笔记  视频教程：https://b23.tv/LbTHmRE

			
		

	





	

		

			

				
					
HTML基础笔记

				
			

			

				

					zhangheiwa0122的博客
				

				

					04-11
					
					955
					
				

			

		

		

			
				
HTML基础笔记

			
		

	





	

		

			

				
					
HTML笔记整理

				
			

			

				

					qq_46063425的博客
				

				

					06-21
					
					833
					
				

			

		

		

			
				
HTML笔记整理
自学前端快一年了，现在感觉学的东西好多、好杂、好乱，知识不成体系，所以下定了决心花一点时间来整理一下学过的前端知识，帮助自己记忆的同时，也希望可以帮助到更多学习前端的小伙伴。这是我整理的第一篇——HTML笔记
一、认识HTML
1、html的发展史
1993年（IETF）HTML 1.0
1995年（W3C） HTML 2.0
1996年 （W3C） HTML 3.2
1997年 （W3C） HTML 4.0
1999年 （W3C） HTML 4.01
2000年 （W3C） XHTML 

			
		

	





	

		

			

				
					
HTML学习笔记：常见错误与修复

				
			

			

				

					
				

			

		

		

			
				
“html学习笔记，包括html，javascript，css的学习与工作经验总结，更新至2013-6-15。”  在HTML、JavaScript和CSS的学习过程中，了解并掌握常见的问题和解决方案是至关重要的。这份学习笔记主要涵盖了这些方面，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值