欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

00HTML

程序员文章站 2022-11-14 10:27:59
一.概述 超文本标记语言(Hyper Text Markup Language),HTML是一门描述性的语言.基本语法: <标签> 内容 ** 在一个网页中,HTML是网页的结构,CSS是网页的外观,JS是网页的行为。 二.文档结构 1.文档声明DOCTYPE 文档声明用于识别HTML的版 ......

  

一.概述

00HTML

超文本标记语言(hyper text markup language),html是一门描述性的语言.
基本语法:
  <标签> 内容 </标签>
** 在一个网页中,html是网页的结构,css是网页的外观,js是网页的行为。

二.文档结构

 00HTML

1.文档声明doctype

文档声明用于识别html的版本,声明引用dtd(文档类型定义),规定了标记语言的规则。


/////严格模式
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
/////过渡模式
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
/////html5版,简洁通用,没有兼容问题
<!doctype html>

** 注意事项:
在没有文档声明时,ie浏览器就会进入怪异模式,也就是,浏览器会根据自己的标准去解释文档,如果加上了声明,就会按照w3c标准解释。
在ie盒子模型中,w/h部分包含了border和padding,也就是:w/h = content + padding+border;

2.根元素html

限定文档的开始和结束,包含两个部分<head>,<body>
<html xmlns="http://www.w3.org/1999/xhtml">,其中的vmlns用于声明该网页使用的是w3c组织的xhtml标准。

3.头元素head

  定义文档的头部,是头部元素的容器。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

 

   //////<meta>元信息标签
   <meta>标签的格式是名称/值对的形式:content中的属性内容以 , 隔开
    <meta 属性=“属性值” content=”属性内容”>
      meta属性:
        name类型
          设定传递给浏览器和搜索引擎的信息
          格式:<meta name=”” content=””>
        http-equiv类型
          类似http协议,传递给浏览器引擎,用于帮助浏览器正确和精确的显示网页内容
          格式:<meta http-equiv=”” content=””>
        charset
          用于定义文档的字符编码
          <meta charset="utf-8">

 

  //////<title>
  用于定义html文件的标题信息,即当前文件在浏览器中浏览时有浏览器窗口的标题栏上显示的文字

00HTML00HTML 

 

  ////////<base>
    * <base href="" /> 定义页面链接默认基础定位
      <base>标签的href属性是为整个页面定义所有链接的基础定位,主要作用是为了确保文档中的所有相对定位url都可以被分解成正确的文档地址,使文档本身被移动或重命名的情况下也可以正确的解析,当这些元素进行跳转时,都会基于当前目录加上这个默认的url(相对路径的情况下)再加上自己的href属性值来跳转。
    ** <base target="_blank"/> 定义页面链接默认打开方式,base通过target属性告诉浏览器如何打开页面。

4.身元素body

   为html文件的主体标记,即只有在标记中编辑的网页对象才可以在浏览器窗口中显示,该标记具有多个标记属性,其所有的标记属性基本上都是用来控制当前html文件的页面属性

5.外联标签

  //////<link>
    link标签通常放置在一个网页的头部标签head标签内的用于链接外部样式表,外部资源。
    ** 链接外部样式表
      <link rel="stylesheet" type="text/css" href="mycss.css" />
    ** ico图标引入,加载一个图标作为网站链接头部的图标。
      <link rel="icon" type="image/x-icon" href="favicon.ico" />

      00HTML

  /************************ link方式和import方式引入css文件的区别 ***********************/
  1.link是xhtml标签,除了加载css外,还可以定义rss等其他事务;@import属于css范畴,只能加载css。
  2.link引用css时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
  3.link是xhtml标签,无兼容问题;@import是在css2.1提出的,低版本的浏览器不支持(ie5-)。
  4.link支持使用javascript控制dom去改变样式;而@import不支持。

  //////<script>
    * 引用脚本文件
      在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址"></script>),浏览器在渲染页面的时候,当读取到script元素时,浏览器不会以html或xhtml的方式处理其内容,浏览器会通知浏览器的脚本引擎来接管script元素中的内容。
    ** 在页面放置的位置
      浏览器从同一个域名并发载入的资源是有限制的,所以当把脚本添加到head元素中时,首先载入的将是脚本,其次才是文档的剩余部分。引入了javascript的script元素标签放在head中可能会使得浏览器延迟页面剩余部分的显示,主要是因为脚本中可能会调用document.write方法修改dcument对象。
  

<script>方式引入js文件的优势:
  · 利于维护:把所有的javascript的文件放在一起,不仅可以不触及html代码,而且更有利于开发者进行代码的编写和维护。
  · 加速浏览:如果有多个html页面引用了同一个javascript外部文件,这个文件只会加载一次(缓存),也就是说可以加快页面的加载速度。
  · 安全性:引用外部文件,如果用户查看html代码,将不会看到javascript的代码,比写在标签内安全性更高一些。

    *****<noscript>
      字面意思,no-script,没有script,也就是浏览器不支持javascript时,<noscript>标签中内容才会被显示,
      - 浏览器不支持脚本;
      - 浏览器支持脚本,但是javascript被禁用;
       以上两条符合任何一个,<noscript>标签内的内容都会被显示。

00HTML

  上图页面,给用户了一个信息,当浏览器不支持或禁用javascript是才会被显示,否则用户将永远不会看到,并且不会影响页面其他元素的显示。

6.注释

   html注释:<!-- -->
   css注释 :/* */
   js注释 ://

三.相关概念

1.自闭和标签

 大多数标签都是成对出现的,比如<div></div>由开始标签和结束标签进行包裹。而有些标签,比如<br />,<hr />都没有结束标签,不能对其他元素进行包裹,所以只能定义它自身的属性。

四.基本标签

1.段落文字标签

  i.标题标签<h1>~<h6>
    一个页面只能有一个<h1>标签
  ii.段落标签<p>
  iii.文本标签
    <span>
    <b>和<strong>
      一般使用<strong>用于着重强调
    <i>和<em>
      一般使用<em>用于着重强调
    <sup>和<sub>

  00HTML00HTML

  iv.换行标签<br />
  v.水平线标签<hr />
  vi.分区标签<div>
    主要用于分区,在html文档中划分区域,提供结构和背景。
    div标签可以放入<body>标签的任何内部标签
  vii.特殊符号

    

2.图片标签

<img src="图片地址" alt="替换文字" title=”提示文字” /> 图片(单标签)
alt属性是替换名字,是给搜索引擎抓取使用,当图片显示不出来时,就会显示出alt的内容;
title 属性是提示文字,当鼠标移到图片上的时候会显示出来,大部分的标签都会有这个属性

3.超链接标签

   a标签可以用做链接、锚点、或者链接下载文件

      <a href="#" target=””></a>
        target 链接打开方式
        _blank 新窗口
        _self 当前窗口
    *在herf内将文件放上,该a标签就会成为下载链接
    *在herf内放入某一个id,格式是#id ,就会成为一个锚点链接,可以实现页面内跳转的功能

4.列表标签

//////ol有序列表
  <ol>
    <li>列表项</li>
    <li>列表项</li>
  </ol>
  * ol要和li配合使用
  * ol的子元素必须是li,不能有其他元素

00HTML

//////ul无序列表
  <ul>
    <li>列表项</li>
    <li>列表项</li>
  </ul>
  * ul要和li配合使用
  * ul的子元素必须是li,不能有其他元素

00HTML

///////dl定义列表

  <dl>
    <dt>定义标题</dt>
    <dd>列表项</dd>

    <dd>列表项</dd>
  </dl> 

5.表格标签

  //////完整结构

00HTML
  //////表格样式重置
    th,td{padding:0;} 重置单元格默认填充
    table{border-collapse:collapse;} 单元格间隙合并
  //////合并单元格
    colspan 规定单元格可横跨的列数、合并行
    rowspan 规定单元格可横跨的行数、合并列

******注意事项*******
    a.不要给table,th,td以外的表格标签加样式,否则容易出现兼容问题
    b.单元格默认平分table的宽度
    c.th里面的内容默认加粗、上下左右居中
    d.td里面的内容默认上下居中,左对齐
    e.table决定了整个表格的宽度
    f.table里面的宽度会被转换成百分比
    g.表格里面的每一列都应该加宽度
    h.表格同一 竖列继承最大宽度
    i.表格同一 行继承最大高度

6.表单标签

表单(form):用于收集用户的数据,提交给服务器上某个页面,该页面可以对表单中提交的数据进行保存或查询(由php/jsp/aspx来担当)。
  action:指定表单数据的处理页面(动态页面)
  method:get/post,前者把请求数据追加在地址栏查询字符串中(有长度限制);后者把数据以单独的数据包发送给服务器(无长度限制、且可用于文件上传)

    /* method:get/post;
      * get:把请求的数据追加在地址栏查询字符串中,有长度的限制1024=1k,
      * post:把数据以单独的数据包发送给服务器,无长度限制,且可以用于文件上
    */
  enctype:encodedtype表单中提交的数据的编码类型,可取值:
  text/plain表单数据不做任何编码直接上传
  application/x-www-form-urlencoded把表单中的数据(中文、特殊符号)编码后再上传,只能对字符进行编码
  multipart/form-data以一种特殊的格式上传字符/字节数据

***1.样式重置
  form{margin:0;}
  input{margin:0;padding:0;}
  select{margin:0;}
  textarea{margin:0;padding:0; resize:none;(禁用用户调整尺寸)
  overflow:hidden;outline:none;(取消焦点框)}
***2.基本结构

  

<form action=”提交地址” method=”提交方式get/post” target=”打开方式”>

  文本框
    <!--文本框-->
    <input type=" text" name="" value="" />
    <input type=”text” id=”id” name=”” disabled=”输入域禁用,不能改,不能提交”readonly=”输入域只读,不能改,能提交” >单行文本框</input>
    <!--密码文本框-->
    <input type=" password" name="" value="" />
  选项按钮
    <!--单选按钮 指定同一个name达到单选的效果 用label将input元素和文字包裹起来,达到点击文字也能够选中相应的选择按钮,不兼容ie6-->
    <input type=" radio" name="" value="" />
    <!--兼容ie6-->
    <input type=" radio" name="" id="id" /><label for=”id”>文字</label>
    <!--复选按钮 disabled属性,不可选中--> 
    <input type=" checkbox " name="" value="" />
  按钮
    <!--提交按钮-->
    <input type=" submit " name="" value="" />
    <!--重置按钮 -->
    <input type=" reset " name="" value="" />
    <!--普通按钮-->
    <input type=" button " name="" value="" />
  图片域
    <!--图片按钮-->
    <in put type=" image " name="" value="" />
  文件域
    <!--上传文件 各个浏览器样式都不太一样,很难做到兼容-->
    <input type=" file " name="" value="" />
  隐藏域
    <!--隐藏-->
    <input type=" hidden " name="" value="" />
    <!-- 在表单中添加一个隐藏字段,用户看不见,但是可以提交  -->
    <input type=”hidden” name=” (必需)隐藏字段的名” value=” (必需)隐藏字段的值” /> 
  下拉列表
    <select> <!--下拉菜单:对高度的支持不兼容-->
      <option selected>选项1 默认显示</option>
      <option>选项2</option>
    </select>
  文本域 
    <textarea>文本域:默认滚动条在各个浏览器下不兼容</textarea>
</form>

  

***3.注意
- button按钮:
  在表单中涉及到提交数据到服务器,所以通常使用<input type=”button”>方式,只有不涉及提交数据的情况下才会使用<button>
  需要注意的是:对于需要与服务器进行交互的表单元素,必须都要放置在form标签中,而对于不需要交互的就不需要了。


- submit提交按钮的相关问题
  使用的是旧的盒子模型,宽度包括padding和border
  如果要设置左右的padding的话,ie6,7会表现比你设置的要宽,没有正确解析,添加overflow:visible就可以解决这个问题
  只有ie支持line-height,火狐和谷歌都有一个你没有办法覆写的line-height,所以别对submit使用这个line-height了
  在ie6,7下表单任意元素激活时,submit btn都会出现个黑色的边框,除非你设置border为none
  如果设置了border我们会发现默认的渐变背景没有了;第二个问题是默认背景火狐解析的有点问题,偏上,然后文字也不是那么垂直居中对齐,还是有几个像素的差别,而其他浏览器是完美的垂直居中对齐,根本就不需要设置上下的padding和line-height,所以我们应该对火狐打bug,在这里我设置其padding-bottom为3px就可以了


- 下拉列表:
  select: **用户不可输入,只能选
  <select name="" size="显示行数" multiple="多选(shift/ctrl) ">
    <optgroup label="选项组的名称">
      <option value=" " select选择>选项</option>
      <option value=" ">选项</option>
    </optgroup>
  </select> **用户不可输入,只能选

多行文本输入域:

<textarea name=”” rows=”行数” cols=“列数” disabled=”输入域禁用,不能改,不能提交”readonly=”输入域只读,不能改,能提交”>
  多行文本输入域值 没有value属性,只能输入纯文本
</textarea>
如果想要输入“富文本编辑框”—可以使用第三方工具实现(kindedtitor / fckedtior / cuteeditor)

表单中实现文件上传必须满足:
(1)表单中使用<input type=”file” name=””/>选择文件
(2)表单必须使用post提交 method=”post”
(3)表单的编码类型必须声明为 enctype=”multipart/form-data”
<input type=”file” name=””></input>

五.其他

1.iframe引入其他页面

  浮动框架,就是在一个页面嵌入一个或多个子页面
  <iframe src=”引入的页面地址” style=“w h frameboder=”0”去掉边框 scrolling=”no”去掉滑动条>当页面不显示时显示的文字</iframe>

2.插入多媒体

  在线音频和视频文件以及flash使用<embed>标签
  <embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/>

00HTML

3.网页背景音乐

  <bgsound src="背景音乐的地址" loop="播放次数">
  只适用于ie浏览器,在firefox等中未必适用。
  loop="2"表示重复2次,loop="infinite"表示无限次循环播放,也可以使用loop="-1"表示无限次循环播放。
  使用bgsound设置背景音乐,当窗口最小化时就自动暂停播放,窗口恢复时,继续播放。

推荐阅读