zoukankan      html  css  js  c++  java
  • html 标签

    <hn></hn> 共有6类,从h1到h6,用作设置文本标题

    <p></p>段落标签,用于设置文本的段落

    <span></span>没有语义,只是为了设置单独文本的样式。

    //////////////////////////////////////////////////////////////

    <strong></strong>强调字体,加粗

    <q></q>短文本引用,如:引用了别人的名言等。默认添加双引号

    <blockquote></blockquote>长文本引用,引用较长的话。默认添加双引号

    html中不识别回车和空格,所以要实现回车和空格,用标签

    <br/>分行显示,即回车

    &nbsp;空格

    <hr/>添加水平横线,分割用,默认灰色,有点粗

    <address></address>地址标签,为网页添加地址信息,默认斜体

    <code></code>在文本中插入一行代码

    <pre></pre>用于在文本中插入多段代码

    ///////////////////////////////////////////////////////////

    <ul>
      <li>精彩少年</li>
      <li>美丽突然出现</li>
      <li>触动心灵的旋律</li>
    </ul>                                            用于显示信息列表,默认li标签前面会带个小点。

    <ol>
       <li>前端开发面试心法 </li>
       <li>零基础学习html</li>
       <li>JavaScript全攻略</li>
    </ol>                                           用于有顺序的显示信息列表,默认li标签前面会带个数字顺序,默认从1开始。

    <div></div>把逻辑独立的区域划分出来

    id=""为div命名,唯一的

    ////////////////////////////////////////////////////////////////

    创建表格的四个元素:

    table、tbody、tr、th、td

    1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

    2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。

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

    4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

    5、<th>…</th>:表格的头部的一个单元格,表格表头。

    6、表格中列的个数,取决于一行中数据单元格的个数。

    7、复杂表格

      (1)rowspan 属性规定单元格可横跨的行数;

      (2)colspan 属性规定单元格可横跨的列数

    默认:

    1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

    2、表头,也就是th标签中的文本默认为粗体并且居中显示

    <table summary="表格简介文本" >  <caption>2012年到2013年库存记录</caption>    为表格添加摘要和标题,不会显示在页面中,主要用于搜索引擎抓取

    /////////////////////////////////////////////////////////////////////////

    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>     title 用于语义化,便于搜索引擎抓取

    <a href="目标网址" target="_blank">click here!</a>   链接默认在当前窗口打开,设置target,在新的窗口打开

    mailto 属性发送电子邮件:

    如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 为网页插入图片

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

    例如:

    <form    method="post"   action="save.php">
               <label for="username">用户名:</label>
               <input type="text" name="username" />
               <label for="pass">密码:</label>
               <input type="password" name="pass" />
    </form>                                                            所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息提交不到服务器上)。

    文本输入框、密码输入框

    1、type:

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

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

       当type="submit"时, 为提交按键。

        当type="reset"时, 为重置按键。

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

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

    举例

    <form>
      姓名:
      <input type="text" name="myName">
      <br/>
      密码:
      <input type="password" name="pass">
    </form>

    <textarea  rows="行数" cols="列数">文本</textarea> 当用户需要在表单中输入大段文字时,需要用到文本输入域

    form表单中的label标签

    小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。

    label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该 label标签相关连的表单控件上)。

    语法:

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

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

    例子:

    <form>
      <label for="male">男</label>
      <input type="radio" name="sex" id="male" />
      <br />
      <label for="female">女</label>
      <input type="radio" name="sex" id="female" />
      <label for="email">输入你的邮箱地址</label>
      <input type="email" id="email" placeholder="Enter email">
    </form>

     css总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

    常用的块状元素有:

    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

    常用的内联元素有:

    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

    常用的内联块状元素有:

    <img>、<input>

    //////////////////////////////////////////////////////////////////////////

    文字排版

    letter-spacing  字母间距

    word-spacing   字间距

    text-align:center;  居中(图片、字)

    line-height:1.5em;  1.5倍的行高

    text-indent:2em; 首行缩进2个字符

    text-decoration:line-through;  文字删除线。用于把原价划掉

    text-decoration:underline  下划线

    font-style:italic; 斜体

    font-weight:bold; 粗体

     ///////////////////////////////////////////////////////////////////////////////////

    层模型有三种形式:

    1、绝对定位(position: absolute)

    2、相对定位(position: relative)

    3、固定定位(position: fixed)

     

  • 相关阅读:
    核心编程笔记8——用户模式下的线程同步
    核心编程随笔7——线程调度和优先级
    深入浅出mfc随笔——MFc程序的生死因果
    opengl
    核心编程6——线程
    深入浅出mfc学习笔记——六大关键技术之仿真_运行时和动态创建
    深入浅出mfc学习笔记——六大关键技术仿真_Persistence(永久保存)
    Gdi+编程
    深入浅出mfc学习笔记1
    file open等待事件
  • 原文地址:https://www.cnblogs.com/xiejingpeng/p/4471452.html
Copyright © 2011-2022 走看看