HTML基本标签

什么是HTML

  • Hyper Text Markup Langeage(超文本标记语言)
  • W3C标准包括
    • 结构化标准怨言(XHTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAcript)
  • HTMl网页基本结构
    “`

    我的第一个网页程序

    ““

  • 工具 Edit Plus

1. 标签 charset= 消除网页乱码

2. 页面背景色或背景图像:

  • 行内元素: em i strong b span,一行可以自定义多个,独占一个。

  • 行内快 Button、
  • 块级元素:h1~h6 div p 这些标签宽度高度不可更改独占一行


  • 水平线、
    换行标签 单标记斜线加在后面

3. 文本相关标签

  • 字体、字号

    • 标题标签

      ,字体依次递减;
    • 标签

    • 特殊符号
      • 空格  
      • 引号 “
      • 小于 <
      • 大于 >
      • 版权号 ©
  • 行的控制

    • 段落标签

    • 换行标签

4. 图像标签

4.1 图像的基本语法

5. 文字布局的标签

5.1
– 5.2 内容分割,水平分割线
<hr size ="" color = "red" width ="像素宽度相对标签">
5.3 如何使用列表
无序列表


    <ul type= "circle"> //从*开始 。
    <li>----</li>
    </ul>

    有序列表

      <ol type= "1" start=""> //从1开始。
      <li>----</li>
      </ol>

      定义序列
      每个标签独占一行,默认没有标记

      <dl type =>
      <dt></dt>
      <dd></dd> 对dt进行解释
      </dl>

      5.4 预格式文本
      标签   
  • 页面链接 标签 :[显示内容]
    • 在同一个文件下有两个html文件,从一个文件超链接到另一个文件的路径有两种方式:相对路径和绝对路径。
    • ../(两点一斜杠) 代表返回上级根目录。
    • 本页进行导航(锚链接)
      • HTML的name属性用于创建锚标记
      • < A name = “marker” > 主题名称
      • 为达到这种跳转效果,请在herf参数中使用该标记
      • 主题名称 –>_self 覆盖原网页,_blank 弹开新标签,打开网页。
    • mailto:XXXX@163.com 右键链接

6. 滚动标签

direction = “up”>
scrolldelay ->滚动延迟时间,毫秒,默认值为90。
direction ->滚动对象的方向。默认从右向左走。
滚动文字或图像

onmounseover=”this.stop()” onMouseOut=”this.start()”>
示例:

// 滚动文字 
<marquee scrolldelay ="100" direction ="up" onmounseover="this.stop()" onMouseOut="this.start()">
    <A href="#" <img src ="路径" border ="0" align ="middle" 描述文字 </A> <BR>
</marquee>  
<form action=""method="post">
    <div>
        <label for="">名字:</label>
        <input type="text"name="uname"value="必须是中文"/>
    </div>

    <div>
        <label for="">登录名:</label>
        <input type="text"name="lname"/>
        <span>必须包含字母或者下线</span>
    </div>

    <div>
        <label for="">密码:</label>
        <input type="password" name="passwd"/>
    </div>
    <div>
        <label for="">确认密码:</label>
        <input type="password"name="repasswd"/>
    </div>
    <div>
        <label for="">邮箱</label>
        <input type="email" name="E-mail" />
    </div>
    <div>
        <label for="">性别:</label>
        <input name="gender" type="radio"id="female"/> <label for="female"></label> <input type="radio"id="male"name="gender"/><label  for="male"></label> <input type="radio"id="secret" name="gender"/><label for="secret">保密</label> <br/><br/>
    </div>
    <div>
        <label for="">头像:</label>
        <input type="file"/><br/><br/>
    </div>
    <div>
        <label for="">兴趣:</label>
        <input type="checkbox" name="hobby"id="playGame"/><label for="playGame">打游戏</label> <input type="checkbox"name="hobby"id="reader"/><labelfor="reader">读书</label> <input type="checkbox"name="hobby"id="movie"/><label for="movie">看电影</label> <br/><br/>
    </div>
    <div>
        <label for="">出生日期:</label>
        <select name="year"id="" multipe size="1"readonly>
            <option value="2017"selected="selected">2017</option>
            <option value="2016">2016</option>
            <option value="2015">2015</option>
            <option value="2014">2014</option>
        </select><select name="month">
            <option value=""></option>
            <option value="1"selected="selected">一月</option>
            <option value="2">二月</option>
            <option value="3">三月</option>
            <option value="4">四月</option>
        </select><select name="day">
            <option value="1"selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>day
    </div>
    <div>
        <textarea name="clause" id=" clause" cols="30" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum expedita illo ipsum labore officiis optio tempore ut vero voluptate voluptatibus? Asperiores enim esse minus molestiae, molestias nobis quisquam ratione reiciendis.</textarea>
    </div>
<input type="submit"name="Login"value="注册"disabled="disabled"/>
<input type="reset"/>

</form>
IT文库 » HTML基本标签
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址