HTML5第一阶段（第一章HTML基础）

来源：互联网发布：Python开发安卓编辑：程序博客网时间：2024/05/21 06:45

目录：
一、WEB标准的概念及组成
二、HTML及相关概念的介绍
三、HTML5基本结构
四、HTML基本语法
五、HTML常用标记

一、WEB标准的概念及组成

1.1    WEB标准不是某一个标准，而是一系列标准的集合。    网页主要由三部分组成：结构，表现，行为。1.2    W3C制定：结构和表现的标准    ECMA制定：行为1.3    结构化标准语言：XHTML、XML    表现标准语言：CSS    行为标准：对象模型{W3C DOM}、ECMAScript1.4    W3C{world wide web consortium万维网联盟}    ECMA制定的{欧洲电脑厂商联合会}

二、HTML及相关概念的介绍

2.1    HTML指的是超文本标记语言{hyper text markup language}    XHTML指的是可拓展超文本标记语言{EXtensible hyper text markup language}    HTML5是W3C和WHATWG合作的结果2.2    W3C：从HTML1.0到HTML4.01；从XHTML1.0到XHTML2.1    WHATWG:HTML5

三、HTML5基本结构

3.1    HTML页面是由标签和属性构成3.2 HTML架构    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">    定义文档类型有三种：Strict（严格型)、 Trasitional（过渡型）、Frameset（框架型）    <html></html>    html的根元素    <head></head>    文件头    <body></body>    文件主体    <meta /> 设置字符集、内容类型、编码格式    <title></title>       文件标题 3.3 注意点     标签名和属性名称必须小写     HTML标签必须关闭     属性值必须用引号括起来     标签必须正确嵌套     必须添加文档类型声明 3.4 HTML5基本结构     <!doctype html> 命名文档类型    <html> 说明我们写的是标记语言    <head>文件头部    <meta charset="utf-8"> 编码格式    <title></title> 文件标题    </head>    <body> 文件主体        <div></div>    </body>    </html>

四、HTML基本语法

4.1 常规标记 也叫双标记    <标记 属性="属性值" 属性="属性值"></标记>4.2 空标记 也叫单标记    <标记 属性="属性值" / >4.3 说明    写在<>中的第一个单词叫做标记，标签，元素    标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内    一个标记可以没有属性也可以有多个属性，属性和属性值之间不分先后顺序    空标记没有结束标签，用“/”代替。例如：<hr />

五、HTML常用标记

5.1 文本标题标签    <h1></h1>……<h6></h6>5.2 字体标签    <i></i> <em></em> 倾斜    <b></b> <strong></strong> 加粗    <u></u> 下划线    <br /> 换行    <hr /> 水平线    <del></del> 删除    <ins></ins> 插入 经常与del在一起用    <sup></sup> 上标    <sub></sub> 下标    <P ></P> 段落    5.2.1 说明        物理风格:明确指明了字体的类型，无论是何种浏览器，遇到这些表示文字的标签时，        都用相同的方式进行显示。如：b、i、u        逻辑风格:并不能像物理风格那样明确知道字体的显示方式，而是让浏览器自行决定，        不同的浏览器解释的效果可能不一样。如：em、strong、cite、code、small、        big、samp、kbd、var、dfn、sup、sub5.3 实体标签    &nbsp; 不换行空格    &gt; 右尖括号    &lt; 左尖括号    &copy;备案中图标5.4 常用标签    <div></div>    <span></span>    5.4.1 说明        div可以把文档分割为独立的、不同的部分。他可以用作严格的组织工具，        并且不使用任何格式与其关联。        在DIV+CSS切图布局重构技术中，提到div，而在html中代码布局使用最多标签为div。        故我们通常将网页重构说成div css制作。        Div本身没有什么特别之处，而div标签替代了以前table标签布局。        他们通过对div标签对象设置不同样式实现我们要的美化效果。        特性，通常一对未设置任何样式的div，独占一行。        span是文本结点，可以是某一小段文本，或是某一个字。5.5 列表的应用    HTML中有三种列表，分别是无序列表{ul}有序列表{ol}自定义列表{dl}    5.5.1 语法        <ul>            <li>列表项内容</li>            <li>列表项内容</li>        </ul>        <ol>            <li>列表项内容</li>            <li>列表项内容</li>        </ol>        <dl>            <dt>名词</dt>            <dd>解释</dd>        </dl>    5.5.2 说明        无序列表 type值有 circle空心圆、disc实心圆、square方形 也可以设置start参数。        有序列表 type有1数字、a小写、A大写、i、I阿拉伯，也可以设置start参数。        <dl>标记不同于前两种列表，它主要用于解释名词，包含两个层次的列表。        第一层次是需要解释的名词，第二层次是具体的解释。<dd>作为解释的内容在显示时会自动缩进。        在自定义列表中，一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明。5.6 超链接    5.6.1 URL{统一资源定位符}    5.6.2 语法：        <a href="目标文件路径及全称/连接地址" alt="替换文本" title="提示文本">链接文本/图片</a>        空链接：<a href="#"></a>    5.6.3 说明        url后边跟的是链接页面的路径(包含文件名)        title属性，加入这个属性后，当鼠标移动到热点时，则在鼠标下方显示title的内容        target属性参数定义了打开链接的目标窗口。_blank属性值代表在新窗口中打开链接页面        _self属性值代表在当前窗体打开链接页面，此为默认值。5.7 图像    5.7.1 语法        <img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />    5.7.2 说明        src表示图片的来源        align标识图片相对于文字的对齐方式，值top、left、right、bottom、middle        border标识图片的边框        width和height设定其图像在页面上显示的宽度和高度        hspace和vspace属性设置图像周围的空间        title是专门做提示信息的，鼠标悬停图片上时显示一个小提示，鼠标离开就没有了        alt是在你的图片因为某种原因不能加载时在页面显示的提示信息    5.7.3 *相对路径的写法        当前文件与目标文件在同一目录下，写目标文件名+扩展名        当前文件与目标文件所在文件夹在同一目录下，写目标文件夹名/目标文件名+扩展名        当前文件所在的文件夹和目标文件所在的文件夹在同一目录下，        写../目标文件所在文件夹名/目标文件名+扩展名5.8 表格    5.8.1 语法        <table>            <tr>              <td>第一行第一格</td>              <td>第一行第二格</td>            </tr>            <tr>              <td>第二行第一格</td>              <td>第二行第二格</td>            </tr>        </table>        注：一对tr表示一行;一对td表示一列(一个单元格)    5.8.2 相关属性        width="表格的宽度"        height="表格的高度"        border="表格的边框"        bordercolor="边框色"        cellspacing="单元格外间距"        cellpadding="单元格内间距"        align="水平对齐" 取值：left、right、center        valign="垂直对齐" 取值：top、bottom、middle    5.8.3 合并单元格属性        合并列：colspan="合并列数"        合并行：rowspan="合并行数"5.9 表单    5.9.1 表单的作用        用来收集用户的信息的    5.9.2 表单框        <form name="表单名称" method="post/get" action=""></form>    5.9.3 说明        Post是向服务器上传数据，Get是从服务器获得数据。        出于安全性考虑，建议最好使用 Post 提交数据 action是给后端人员作为接口用的    5.9.4 语法        <input type=" " name=" " value=" " size=" " maxlength=" "/>    5.9.5 说明        input是表单中功能最为丰富的，        input标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。        name标识表单域的名称        type标识表单域的类型，可以是文本输入框text、密码password、复选框checkbox、        单选框radio、提交表单submit和重置键reset        value属性定义表单域的值        maxlength控制最多输入的字符数        size控制框的宽度    5.9.6 常用类型        文本框            <input type="text" value="默认值"/>        密码框            <input type="password" />        提交按钮            <input type="submit" value="按钮内容" />        重置按钮            <input type="reset" value="按钮内容" />        单选按钮            <input type="radio" name="" checked="checked" />(默认选中)        复选框            <input type="checkbox" name="like" disabled="disabled" checked="checked"/>        按钮            <input name="" type="button" value=“按钮内容” />            （button只起到跳转的作用，不进行提交）        下拉菜单            <select name="">              <option>下拉选项1</option>              <option>下拉选项2</option>            </select>        多行文本框            <textarea name="" cols="" rows=""></textarea>            rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。

阅读全文

1 0