1.HTML概述

1.HTML：超文本标记语言。是一种标识性语言，非编程语言，不能使用逻辑运算。通过标签将网络上的文档格式进行统一，使分散的网络资源链接为一个逻辑整体。

超文本是一种组织信息的方式，通过超级链接将多种媒介链接起来

标记:标签。用<>包裹的具有一定含义的内容，比如:…

静态网页:不变

动态网页：跟后台同时改变

2.HTML标签结构

1.文档结构：

    
    
    
    
    
    
    
    



    
这是一个段落

2.常用标签：

    
     
     

     
     
...

     
     

     
     

     
     文本
     文本
     文本
     文本
     锚点链接 href=https://www.jb51.net/web/'' 目标位置的属性要设置为与其一直 id=https://www.jb51.net/web/''
     
     src路径 alt替换文本 title 图片提示文本 width:图像宽度 height:图像高度 border边框
     
     
     
     
     

        
li1
        
li2
        
li3
    
    

        
li1
        
li2
        
li3
    
     //自定义列表 重点每个网站的最下面基本都是通过自定义
    
 dl中只能有dt和dd 一个dt对应多个dd 为兄弟关系
        
名词1
        
名词1解释1
        
名词1解释2
    
自定义列表

4.标签属性:

            下面的title class就是属性名，而后面的就是属性值
    
这是一个测试段落

5.部分其他标签:

   加粗
   加粗且强调
   
   倾斜
   倾斜且强调
   
   
       pre预格式化
       文本,保留换行和空
       格及宽度
   
   
   
   
   
我是正常的
   我是小一号的文字
   
   
   
正常显示:X1+X2=Y
   
下标:X1+X2=Y
   
下标:X1+X2=Y
   
   删除线  
   下划线  
   转义字符：  空格 < 小于号  >大于号

6.表格标签以及表单标签

表格标签结构: 作用:显示 展示数据
     表头单元格
        单元格
        行
    
    属性
    align left center right 对齐
    border边框 cellpadding 文字和单元格的距离 cellspacing 单元之间的距离 width
     表格结构标签
     表头区域
     主体区域
    
    合并单元格:跨行合并:rowspan行和行 跨列合并:colspan列和列
    合并代码:跨行:在最上侧单元格为目标单元格，写合并代码
    跨列:在最左侧单元格为目标单元格，写合并代码
    跨行或跨列步骤:
    	1.确定跨行还是跨列 2.找到目标单元格 3.删除多余单元格

7.表单标签:

表单标签:主要用途:收集用户信息
    表单由表单域 表单控件（元素） 提示信息组成
    表单域 实现用户信息传递

    action跟着的为地址 method提交方式 name名称
    
    input输入表单元素:
     
	   type属性值:text文本 password密码 button ridio单选框() checkbox(多选按钮).....
	   	 submit(提交按钮，将表单值提交给服务器) reset 清除表单的所有数据
	   	 button 普通按钮 结合js使用 file 上传文件
	   	 
	   name属性:表单元素的名字，单选按钮必须有相同的名字才可以多选1 
	    			单选按钮和复选框都要有相同的name
	   value属性 定义值
	    	每个元素都应该有的，主要给后台人员来使用的
	
		checked 针对单选和多选 当页面打开的时候默认选择
	
		maxlength 最大长度

	select下拉表单元素
    使用场景:有多个选项，想节约空间
							    	
							   	  
    select至少包含一个option 在option中的属性selected = selected进行默认选择

	使用场景 for 和表单元素的id属性相同就对应上
	textarea文本域表单元素 输入文本较多时
	<textarea>一般规定长度通过css</pre>

<p>到此这篇关于HTML基本标签及结构详解的文章就介绍到这了,更多相关HTML基本标签及结构内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！</p>
						
						
						<span id="art_bot" class="jbTestPos"></span> 
        </div>
        <div class="pagebar">  </div>
        <div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div>
        <div class="mbd_ad">
          <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5850285417076520"
     data-ad-slot="9825815134"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </div>
        <div class="rights">
          <h5>版权声明</h5>
          <p>本文仅代表作者观点，不代表本站立场。<br>
            本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/HTML/70258.html</p>

<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script>

        </div>


<div class="r-pn-post">
               
<div class="shang"><a title="浅谈HTML文件引入外部CSS文件时路径的写法总结 游戏攻略" href="/web/HTML/70257.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> 浅谈HTML文件引入外部CSS文件时路径的写法总结 游戏攻略 
</a></div>
<div class="xia"><a href="/web/HTML/70259.html" rel="bookmark" class="next_p"><span>下一篇 :</span> Unicode中的CJK(中日韩统一表意文字)字符小结 游戏攻略</a></div>

              
              <div class="clear"></div>
            </div>
      </div>
      <div class="related">
        <h4>相关文章</h4>
        <ul>
                </ul>
      </div>
      <div class="post_comments">
        <div id="comment">
<link href="/skin/ecmspl/css/pl.css" rel="stylesheet">
<div class="showpage" id="plpost">
<table width="100%" border="0" cellpadding="0" cellspacing="0"  style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;">
<tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr>
</table>
<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script>
<form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">
<tr>
<td>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<script src="/e/pl/loginjspl.php"></script>
<textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!">
   


验证码：