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>

  有序列表
  1. 
     
<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>