html标签用法及详细介绍

单标签

eg:注释标签: ctrl+/

1.容器盒子


<div class="box"></div>

2.换行标签:<br>
3.横线标签:<hr>
4. 标题标签:<h1> <h2><h3><h4><h5> <h6> 在页面中代表页面标题的层级和大小。
6.段落标签:<p></p> 在页面中代表段落标签,填充文字即可。
7.表示强调标签:<font> 文字</font>  
8.属性: color:改变文字颜色
        size:改文字大小属性
        例如:<font color="pick" size="5">文字</font>
9.文本加粗显示:<strong></strong>或者 <b></b>
10.文字斜体显示: <em></em>或 <i></i>
11.下划线标签:<ins></ins>或者<u></u>
12.删除价格标签:<del></del>或者<s></s>
13. 图片标签:<img src=>
       sec:设置一个图片要显示的路径        
       title:设置鼠标悬停图片显示的文字
       alt:对图片描述 为方便引擎搜索 

       width:设置图片宽度
       height :设置图片高度
14.没有语义的标签:
     <div>页面内容 </div> 实现网页布局    div可包含任何标签
     <span></span> 在网页布局中使用
  15. 超链接标签:
  <a herf="网站网址">百度</a>
  <a href="http://www.baidu.com"><img sec="1.jpg"></a>
  title:设置鼠标悬停到超链接的文字提示
  target:-self
  <base target="-blank">超链接跳转页面其他写法  在<head>页面写
16.锚链接
 <div id=""路径位置>目标文字</div>
 <a herf="l路径位置">目标</a>
17.meta标签用法
  <meta charset="Utf-8"> 防止网页面乱码      
  charset:字符集    
  utf-8: 编码格式 (其他格式:gbk    gb2312   big5)
  eg:
    <meta name="keywords" content"女装 男装 休闲"> 注意关键字是给搜索引擎看的搜索(网站推广)
    <meta name="description  " content"女装 男装 休闲"> 网页描述信息给搜索引擎看的搜索(网站推广)
18.网站重定向(网址指向另一个网页)
   <meta http-equiv="refresh" content="3; 网址路径都可以http://www.baidu.com">3秒跳转百度
19.link 标签用法
      设置网站图标 <link rei="icon" href="favicon.ico(小图片格式)" >(图标路径  )注意1 最好把图标放到根目录下,  方便寻找。      
      2.用处 引用外来样式表
20.列表分类 
   1.无序列表
	      <ul (type="square"改变圆点) >列表项如下
	        <li>吃</li>
	        <li> 玩</li>
	        <li>睡</li>
	      </ul>
	      注意:<li>列表内可以包含任何标签(图片 链接标签都可以)
	    2 有序列表
	           <ol type="A">
	              <li>开门 </li>
	              <li>放进去 </li>
	              <li>关门 </li>
	           </ol>
	    3.自定义列表
	     <dl>
	        <dt>标题</dt>
	        <dd>列表项</dd>
	        <dd>列表项</dd>
	        <dd>列表项</dd>
         </dl>
 注意:dt标签只能包含行内元素
      dd标签可以包含所有标签
      一般网页结尾处用自定义列表
21.表格    
     作用:1.表格显示数据 2.网页布局 
    1.表格组成
      表头 th
      行  tr  
      列  td
    表格  table
   <table>
         <tr>  (第一行)
	        <td>姓名</td>
	        <td>年龄</td>
	        <td>职业</td>
	   </tr>
	   <tr> (第二行)
	       <td>小明</td>
	   </tr>
	</table>
2.表格属性在<table>标签内:border: 设置边框   width  设置宽度  height 设置高度   cellspacing  设置td与td之间的距离 默认值为2
3.cellpadding  设置内容与td的左侧的距离    align: left center right  设置对齐方式 注意:1.如果给table标签设置align属性,只会
4.让标签居中 不会让内容居中,给td 或者tr设置align属性可以让其内容居中。
5.bgcolor:"pink"设置表格背景颜色  <th></th>设置表头加粗 用法和td相同   caption 设置标题  用法在table内 
6.便捷写法:  table>tr*4>td*4(创建表格 加中括号可设置属性)
7.表格结构  <thead></thead>    <tbody></tbody>  <tfoot></tfoot>
8.去掉单元:横向合并 <colspan="">  竖向合并:<rowspan=""> 
22.表单      
1 提示信息   2 表单控件  3 表单域 
<legend></legend>表单外面的框框
23. 表单域  <from>    </from>    action:设置后台处理数据的后台程序   method:提交程序给后台的方式  get:提交数据   (将数据显示在地址栏中)   post提交数据:通过后台提交数据 (安全性)
  <from  action="1.php" method="pdst">
               用户名:<input type="text"  name="username">
            <br>
            <br>
               密码:<input type="password"  name="pwd">
             <br> 
              <br>
           <input type ="sumbit">
<button class="submit">提交</button>
     </from>  

24.表单控件 
   1.文本输入框 
     <input  type="text">
     属性: maxlength="" 设置输入最大长度       readonly  设置控件为只读   disabled 禁止用户输入    value  设置默认值     name   设置控件名称    id  控件编号  
  2.密码输入框 
    <input type="password">  该控件属性与文本输入框属性一样 
  3.单选控件 
    <input type="radio">  注意:该控件实现单选效果需要给控件设置相同的name 名称
  属性:checked    设置控件默认选中项 
 4.下拉列表 
   <select>
         <option>河南</option>
         <option>河北</option>
         <option>山东</option>
   </select>  属性:selected设置控件默认选中项 
    其他写法:
    <select>
          <optgroup  label="河北省">
          <option>邯郸</option>
          <option>石家庄</option>
          <option>保定</option>
          </optgroup>
    </select>  
 5.多选控件:  <input type="checkbox">    属性:  checked  设置控件默认选中项 
      爱好:  <input type="checkbox"checked > 看书or学习 orluyou旅游 
  6.inpu控件:  
    <input type="file">资源上传控件
	<input type="search">自带删除功能 后标删除叉号
	<input type="namber" value="60" min="" max=""> 数字设置最大值和最小值
    <input type="range" value="60" min="" max=""> 设置范围
    <input type="color">设置颜色
    <input type="time">
	<input type="date">
  	<input type="tel"> 在移动端实现弹出数字键盘\    required: 必须输入 如不阻止当前提交
    关闭表单提示   autocomplete="off"
    placeholder 输入框的文本占位符 
    文本域  <textarea></textrea>    
    隐藏控件:<input type="hidden">  value="123"      按钮      
    1. 提交按钮:<input type="submit">   
    2.普通按钮:<input type="button">不能提交表单数据    
    3. 重置按钮:<input type="reset">(将数据恢复单默认值)     
    4. 图片提交按钮:<input type="image" src="图片.jpg">  (提交表单数据)
24.<iframe> 标签 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
您可以把需要的文本放置在 <iframe> 和 </iframe> 之间 详情查看 https://www.w3school.com.cn/tags/tag_iframe.asp
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值