一篇快速入门HTML

HTML概述

HTML，Hypertext Markup Language，超文本标记语言

• 用于描述网页信息的内容和结构
• 用开始和结构标签包围文本内容
• 把每个标签的名字称为元素
• 语法：
  <元素>内容</元素> 【相当于一对括号】
  例如：<p>This is a paragraph</p>
• HTML中大部分的空格是无关紧要的（被忽略或者折叠成一个空格）
• 当前HTML的最新版本HTML5，里面具有很多新特性

HTML页面结构

整体结构

详细解释

HTML块元素与行内元素

HTML常用块元素

块元素包含整个大区域的内容

1、段落（p）

		<p>
            白日依山尽<br>
            黄河入海流<br>
        </p>

• 放置在body标签内
• <br> 换行元素，它没有结束标签。
• <br> 是 HTML 写法。
• <br/>；<br /> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。
• HTML5 因为兼容 XHTML，所以以上写法都可以使用。

2、标题（h1-h6）

• 不同标题显示字号不同，h1最大

<h1>这是一个标题1</h1>
<h2>这是一个标题2</h2>
<h3>这是一个标题3</h3>
<h4>这是一个标题4</h4>
<h5>这是一个标题5</h5>
<h6>这是一个标题6</h6>

• 

3、列表

<!--有序列表-->
        <ol type="i">
            <li>first</li>
            <li>second</li>
        </ol>

<!-- 无序列表-->
        <ul type="none">
            <li>first</li>
            <li>second</li>
        </ul>

<!--定义列表-->
        <dl >
            <dt>HTML</dt>
            <dd>- 超文本标记语言</dd>
        </dl>

 dl：表示列表术语的定义；dt：表示每个术语；dd：对应术语的描述。

4、表格（table）

<!--表格-->
        <table border="1">
<!--            border设置边框；0 无边框-->
            <caption>表格头</caption>
            <tr>
                <th>列标题 1</th>
                <th>列标题 2</th>
            </tr>
            <tr>
                <td colspan="2">第一行第一列</td>
                <td rowspan="2">第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
        </table>

• 
• cellpadding：规定单元边沿与其内容之间的空白：
  <table border=“1” cellpadding=“10”>
• cellspacing：规定单元格之间的空白；
  <table border=“1” cellspacing=“0”>
• width：规定表格宽度
• colspan（跨列居中）与rowspan（跨行居中）

5、表单（form）

       <!--form标签就是表单
        input type="text"      是文件输入框   value属性设置文本框的默认值
        input type="password"  是密码输入框   value属性设置文本框的默认值
        input type="radio"     单选框        name属性可以对其进行分组     checked="checked"表示默认选中
        input type="checkbox"  复选框
        input type="reset"     重置按钮      value属性设置按钮名
        input type="button"    是按钮
        input type="file"      文件上传
        input type="hidden"    隐藏域    当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交时同时发送服务器）



        select   标签是下拉列表框
        option   标签是下拉列表框中的选项      selected="selected"表示默认选中

        textarea 表示多行文本输入框
        rows     属性设置可以显示几行的高度
        cols     属性设置每行可以显示几个字符宽度
        -->
    <form>
        用户名称：<input type="text" value="默认值"/> <br/>
        用户密码：<input type="password" value="默认值"/> <br/>
        确认密码：<input type="password" value="默认值"/> <br/>
        性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
        兴趣爱好：<input type="checkbox"/>Java<input type="checkbox"/>C++<input type="checkbox"/>Python<br/>
        国籍：<select>
                <option>--请选择国籍--</option>
                <option >中国</option>
                <option>美国</option>
                <option>英国</option>
                </select><br/>
        自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/>
        <input type="reset"/>
        <input type="submit"/>
    </form>

6、预格式化文本（pre）

• 块元素，适合显示大片的按原格式输出的内容

7、div标签

默认独占一行

8、水平线 (hr)

如下面：

---

HTML常用行内元素

1、图像（img）

 语法：<img src=“url” alt=“some_text”>；
 <img src=“url” alt=“some_text” width=“100” height=“100”>
 src属性：指出图片的URL；
 alt属性来描述图片
 width、heigh：设置图片的宽高；

2、链接（a）

 语法：<a href=“url”>链接文本</a>

3、换行（br）

4、强调（em，strong）

 em:倾斜强调；<em>强调文本</em>
 strong：加粗强调；<strong>重要的文本</strong>
 标签必须正确地嵌套；一个结束标记必须匹配最近打开地标签

5、span

div和span这两个东西，都是最最重要的“盒子”。
div标签 默认独占一行；<div>是换行的。
span标签 它的长度是封装数据的长度；<span>是不换行的。

HTML常用其他元素

1、引用：

• 块引用<blockquote>：浏览器通常会对 <blockquote> 元素进行缩进处理
• 行内引用<q>：对引用内容加引号；
• 字符实体引用：
• 一些字符无法从键盘输入；若要在网页中显示一些HTML字符；都需要使用字符实体
• 两种方式表示字符实体：
• 用实体名：&实体名
• 用实体数字：&#实体数
  

2、音频（audio）

• <audio src=" " controls=“controls”>您的浏览器不支持</audio>
• 允许多个 source 元素：
  <audio controls=“controls”>
  <source src=“song.ogg” type=“audio/ogg”>
  <source src=“song.mp3” type=“audio/mpeg”>
  您的浏览器不支持.
  </audio>
• control 属性供添加播放、暂停和音量控件。
• 

3、视频（video）

• <video src=“movie.ogg” controls=“controls”>您的浏览器不支持.</video>
• <video width=“320” height=“240” controls=“controls”>
  <source src=“movie.ogg” type=“video/ogg”>
  <source src=“movie.mp4” type=“video/mp4”>
  您的浏览器不支持.
  </video>
• 

返回首页