html超文本标记语言

时间:2022-11-19 20:10:24

一、介绍

1、超文本:普通文本只能表示文字,超文本可以表示文字、图片、视频、声音、动画、交互等等。

2、标记:所有网站都是用<>标记构成。

3、统一资源定位符URL:用来在Internet上统一定位网络资源的一种格式。

      格式说明:

           协议://网址或IP地址:端口号/URI

   协议://

   --  http:// web服务

   --  https:// web安全服务

   --ftp://

URI 统一资源标识符:找到服务器根目录,下面的子目录及文件名

二、html文档基本结构

1.文档类型:告诉浏览器按照哪一个标准解释当前文档

说明:如果没有文档类型--怪异模式--会有大量的兼容性问题,浏览器会照最老标准就行解释

  <!doctype html>

  doctype document type

2.文档类型分类:

  --主流的文档类型:html5文档类型声明

   <!doctype html>

  --旧版本的文档类型:

    --xhtml1.0过渡型

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   --xhtml1.0严格型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.html文档结构:

<!doctype html>

<html>

    <head>

           <title>整个文档的标题</title>

    </head>

    <body>

       正文

    </body>

</html>

4.html所有标记,要么放到<head></head>,要么放到<body></body>之间。

放到<head></head>之间的标记,一般用做一些文档的配置工作,例如,设置当前文档的字符集,

放到<body></body>之间的一般用来显示(渲染)

5、元信息标记:设置整篇文档相关信息的

 <script></script> 嵌入脚本的

 <style></style>嵌入css

 <link>引入css文件

.先学习放到<head></head>之间的标记

 <title></title> 整个文档的标记(浏览器的标题栏)

 <meta>

6.html基本语法

  <标记名 属性=""属性="属性"></标记名>

  <代表标记开始

  标记名:表示标记是干什么用的(功能)

  属性="":具体如何显示(怎么用)

7.html标记的分类:

  (1)单标记

       <br> <hr> <img> <input><frame>

  (2)双标记

       <font></font>

       <p></p>

       <b></b>

 

8.html注释:浏览器解释到注释,直接跳过

   注释是给自己,或团队其他成员,增加程序可读性

  <!--

     注释内容

  -->

9.注意事项

--html不区分大小写--建议用全部小写

--浏览器会忽略所有空格

--养成加注释的习惯

--双标记一定关闭

三、标记

1.标题

  <h1-6 align="水平对齐方式left默认值/center/right"></h1-6>

2.特殊字符

  空格?浏览会忽略空格成一个空格   

 &lt <

 &gt >

  版权符号 © &copy 

3.文字标记

<font face="字体" size="1-7" color="文字颜色"></font>

4. 标记嵌套原则:  

            a.如果标记的属性没有发生冲突,那么全都生效

            b.如果标记属性发生冲突,那么采用就近原则,谁近谁生效

5.文字修饰

  <b></b> 加粗  <strong></strong>

  <i></i> 倾斜  <em></em>

  <u></u> 下划线

  <address></address>地址

  <del></del> 删除线

6.段落标记

  <p align="left默认/center/right"></p>

7.居中标记

  <center></center>

8.水平分割线

<hr width="/%" size="粗细" color="" align="left/center默认/right" noshade>

9.与格式化标记

  <pre></pre>

10.忽略html标记

   <xmp></xmp>

11、

移动标记

  <marquee bgcolor="背景颜色" direction="left默认/right/up/down" width="" height="" behavior="scroll循环/slide只一次/alternate来回动" scrollamount="速度" scrolldelay="延迟"></marquee>

四、列表

 1.列表的功能:

   --导航菜单

   --二级菜单

   --罗列一下行式内容 

2.无序列表

  <ul type="项目符号disc/circle/square">

     <li type=""></li>

     <li type=""></li>

     <li type=""></li>

     <li type=""></li>

  </ul>

3.有序列表

  <ol type="1默认值/a/A/i/I" start="从第几项开始">

      <li></li>

      <li></li>

      <li></li>

  </ol>

4.定义列表

  <dl>

     <dt>定义</dt>

     <dd>解释1</dd>

     <dd>解释2</dd>

     <dd>解释3</dd>

     <dt>定义</dt>

     <dd>解释1</dd>

     <dd>解释2</dd>

     <dd>解释3</dd>

  </dl>

5.超链接:网站组织资源的主要方式

6.超链接标记

  <a href="访问的资源url#name" target="_self本窗口覆盖显示/_blank新窗口显示/框架名 指定框架内显示" title="输入划入的提示"></a>

7.超链接分类:根据用户访问资源不同

(1).外部链接:访问资源是其他网站的页面

    <a href="http://www.taobao.com/">外部链接</a>

(2).内部链接:访问资源是本网站其他页面

    <a href="test.html">内部链接</a>

(3).图片链接:单击图片访问指定资源

    <a href="">

        <img src="">

    </a>

(4).邮件链接:点击链接,自动打开本地邮件发送客户端软件,将收件人地址自动填充,防止用户写错

   <a href="mailto:asdfas@asdfa.com">邮件链接</a>

(5).锚链接:相当于书签(网站很多屏)

   定义锚点<a name="锚名"></a>

   定位锚点<a href="#锚名"></a>

8.无序列表例子

<!doctype html>

<html>

    <head>

       <meta charset="gb2312">

       <title>无序列表</title>

    </head>

    <body>

         <ul type="circle">

             <li>西瓜</li>

             <li>西红柿</li>

             <li>葡萄</li>

             <li>香瓜</li>

         </ul>

    </body>

</html>

五、多媒体

1.多媒体

   -图片

   --声音

   --视频

   --flash

2.插入图像 .jpg .png .gif

  <img src="图像的路径/文件名" width="" height="" alt="替换文本" align="left默认/right图片的对齐方式  top middle bottom后面文字的对齐方式">

3.插入音频/视频.mp3 .avi

 <embed src="音乐路径/文件名" autostart="true" loop="true" hidden="true面板是否隐藏">

4.插入flash视频.flv .f4v

        --支持流媒体播放

        --压缩比高

       缺点:浏览器必须得有flashplay播放器 

5.插入flash动画.swf

6.图像映射

    --创建热区

六、布局

1.什么是布局(排版)?

 :什么地方,放什么内容

2.常用的布局版式?

 :企业网 (广字型)

    电商(国字型)

    上中下

    混合型

3.html中,布局的标记

  --table表格2

4.在网站中,表格的功能?

  --显示行列式 数据(各种表格:课程表、成绩表、工资表等)

  --布局 

5.表格标记

   <table border="边框" width="" height="" bgcolor="背景颜色" background="背景图片" cellspacing="单元格之间的间距" cellpadding="内容距离单元格边框的内边距" align="left默认/center/right">

       <tr align="水平对齐方式left默认/center/right" valign="垂直对齐方式top/middle默认/bottom">

           <td align="水平对齐方式left默认/center/right" valign="垂直对齐方式top/middle默认/bottom" bgcolor="背景色" background="背景图片" rowspan="跨行合并" colspan="跨列合并"></td><td></td><td></td>

       </tr>

       <tr>

           <td></td><td></td><td></td>

       </tr>

   </table>

6. 

7.单元格标记

8.表格嵌套

9.如何实现布局?

  企业网站

 布局原则:能用表格不用表格嵌套

七、框架

1.框架--

    --前端--浮动框架,将一个网页嵌入当前网页中

--后台--网页进行分区--框架

<iframe src=””></iframe>

    <!doctype html>

<html>

   <head>

       <meta charset="utf-8">

   <title>浮动框架</title>

   </head>

   <body>

       <p>哈哈</p>

   <iframe src="移动标记.html" name="a1" width="400" height="200"></iframe>

   <iframe src="http://www.baidu.com" name="a2"></iframe>

   </body>

</html>

2.框架和框架集--将一个浏览器窗口分割成若干个独立的小窗口,每个小窗口,可以放置一个独立的文件

例子<frameset  src=””  rows=”” /cols=””>

<frame src=”


<!doctype html>

 

<html>

 

<head>

 

<meta charset="utf-8">

 

<title>框架嵌套</title>

 

</head>

 

<frameset rows="150,*">

 

<frame name="top" src="top.html">

 

<frameset cols="200,*">

 

<frame name="left" src="left.html">

 

<frame name="right" src="right.html">

 

</frameset>

 

</frameset>

 

</html>

八、表单

1.表单:网站获取用户信息的主要途径

2.表单标记

 <form name="名称" action="数据提交到的页面或脚本" method="get默认/post">

    method:表单提交数据方法

    get

      --原理:表单数据和HTML文档头部<head></head>一起提交

      --特点:数据大小受到文档头部大小限制,一般不超过90字符

      --地址栏能够明文看到数据   

    --什么情况下用get方法:一般搜索引擎,对外提供服务

   post

     --原理:表单数据和HTML正文<body></body>一起以IP包形式传送

     --特点:地址栏看不到

            数据大小无限制

    --什么情况下用:传送大数据或文件 

 </form> 

3.表单项

(1)<input type="text" 输入文本框

               "password" 密码框

               "radio"单选按钮

               "checkbox" 复选框

               "button" 按钮

               "image" 图像域:和提交按钮一样

                "file" 文件域

               "hidden" 隐藏域

               "reset" 重置按钮

               "submit" 提交按钮

(2)单选下拉菜单/多选列表size大小multiple多选

  <select name="" size="大小" multiple>

     <option value=""></option>

  </select>

(3)文本域:

  <textarea name="" cols="宽度" rows="高度"></textarea>