zoukankan      html  css  js  c++  java
  • 000 Html基本标签与案例

      在CSS之前,需要先介绍一下HTML的常用标签。

    1.html与css的关系

      

    2.程序

     1 <!DOCTYPE HTML>
     2 <html>
     3     <head>
     4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5         <title>Html和CSS的关系</title>
     6         <style type="text/css">
     7         h1{
     8             font-size:12px;
     9             color:#999;
    10             text-align:center;
    11         }
    12         </style>
    13     </head>
    14     <body>
    15         <h1>Hello World!</h1>
    16     </body>
    17 </html>

    3.效果

      

    4.注释

      <!--注释文字 -->

    5.p标签

      <p>段落文本</p>

    6.hx标签

      文章的标题用什么标签呢?在本节我们将使用<hx>标签来制作文章的标题。

      标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

      <hx>标题文本</hx>

    7.strong与em标签

      但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。

      并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

       <em>需要强调的文本</em>

      <strong>需要强调的文本</strong>

    8.span标签

      使用<span>标签为文字设置单独样式

      标签是没有语义的,它的作用就是为了设置单独的样式用的

      

    9.q标签

      <q>标签,短文本引用。

      注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

    10.blockquote

      <blockquote>标签,长文本引用

      浏览器对<blockquote>标签的解析是缩进样式。

    11.br标签(*)

      <br />标签作用相当于word文档中的回车。

      这是一个空标签。

      空标签只需要写一个开始标签,这样的标签有<br /><hr /><img />

    12.添加空格

      要想输入空格,必须写入&nbsp;

      

    13.hr

      <hr>标签,添加水平横线

      

    14.address

      <address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。

       在浏览器上显示的样式为斜体。

    15.code标签

      加入一行代码。

      <code>var i=i+300;</code>

    16.pre标签

      需要在网页中预显示格式时都可以使用它。

      如果是多行代码,可以使用<pre>标签。

      标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

    17.ul标签

      添加信息列表。

      这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

    18.ol标签

      在网页中展示有前后顺序的信息列表。

      <ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始。

    19.div标签

      在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

      为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。

      

    20.table标签  

      创建表格的四个元素:table、tbody、tr、th、td。

      <tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。

      <th>…</th>:表格的头部的一个单元格,表格表头。也就是th标签中的文本默认为粗体并且居中显示。

      <tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

    21.为表格添加边框(css样式)

      添加黑色边框。

      <style type="text/css">

        table tr td,th{border:1px solid #000;}

      </style>

    22.caption标签

      为表格添加标题和摘要。

      A:摘要

      <table summary="表格简介文本">。

      摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

      B:标题 

      <caption>标题文本</caption>

      用以描述表格内容,标题的显示位置:表格上方,tr上方。

    23.a标签

      <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

      

    24.在新的窗口打开链接

      <a href="目标网址" target="_blank">click here!</a>

    25.img标签 

      1、src:标识图像的位置;

      2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

      3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

      4、图像可以是GIF,PNG,JPEG格式的图像文件。

    26.form表单

      表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

      <form method="传送方式" action="服务器文件"> 

      <label for="username">用户名:</label>

      <input type="text" name="username" />

    27.输入框(文本,密码)

      <form>

        <input type="text/password" name="名称" value="文本" />

      </form>

      1、type:

         当type="text"时,输入框为文本输入框;

         当type="password"时, 输入框为密码输入框。

      2、name:为文本框命名,以备后台程序ASP 、PHP使用。

      3、value:为文本输入框设置默认值。(一般起到提示作用)

     

    28.textarea文本域

      <textarea rows="行数" cols="列数">文本</textarea>

     

    29.单选框与复选框 radio/checkbox

      <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

      1、type:

         当 type="radio" 时,控件为单选框

         当 type="checkbox" 时,控件为复选框

      2、value:提交数据到服务器的值(后台程序PHP使用)

      3、name:为控件命名,以备后台程序 ASP、PHP 使用

      4、checked:当设置 checked="checked" 时,该选项被默认选中

      

    30.下拉框select

      设置selected="selected"属性,则该选项就被默认选中。

      

     

    31.提交按钮

      <input type="submit" value="提交">

      value按钮上显示的文字

     

    32.重置

      <input type="reset" value="重置">

      value按钮上显示的文字

     

    33.label标签

      如果你在 label 标签内点击文本,就会触发此控件。

      就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

      <label for="控件id名称">

      标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

      

      




  • 相关阅读:
    219. Contains Duplicate II
    189. Rotate Array
    169. Majority Element
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    119. Pascal's Triangle II
    118. Pascal's Triangle
    88. Merge Sorted Array
    53. Maximum Subarray
    CodeForces 359D Pair of Numbers (暴力)
  • 原文地址:https://www.cnblogs.com/juncaoit/p/7227665.html
Copyright © 2011-2022 走看看