TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

01、HTML&CSS-HTML基础

zyz
2018-03-25
/
0 评论
/
867 阅读
/
正在检测是否收录...
03/25

一、web标准的概念

web标准是网页制作的标准,它不是一个标准,而是根据网页不同组成部分生成的一系列标准。这些标准大部分由W3C(万维网联盟)起草发布,也有部分标准由ECMA起草发布(ECMA欧洲电脑网商协会);

二、网页组成

1.内容: 网页要传达的信息即是内容部分;
2.结构: 网页的结构部分(头部、身体、结尾…)
3.表现: 网页样式(每个网页设计的都是不一样的)
4.行为: 网页能够实现交互功能(轮播图、滑动效果、用户与页面的交互..)

三、HTML及相关概念

1.HTML指的是超文本标记语言,www万维网的描述性语言,通用标记语言的一个应用;
2.XHTML指可扩展超文本标记语言(标识语言),是一种置标语言,表现方式与超文本标记(HTML)类似,不过语法上更加严格;
3.HTML5指的是HTML的第五次重大修改(第5个版本);
4.H5是一个技术集合,面向于移动端;

四、HTML发展历史

  > HTML1.0  在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准);
  > HTML2.0 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时;
  > HTML3.2 1996年1月14日,W3C推荐标准;
  > HTML4.0 1997年12月18日,W3C推荐标准;
  > HTML4.01(微小改进)——1999年12月24日,W3C推荐标准;
  > XHTML1.0 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布;
  > XHTML1.1 2001年5月31日发布,W3C推荐标准;
  > XHTML2.0 W3C工作草案;
  > XHTML5   从XHTML 1.x的更新版,基于HTML5草案;
  > HTML5 第一份正式草案已于2008年1月22日公布;
  > HTML5 2014年10月29号万维网联盟宣布经过8年时间,该标准规范制定完成;
【WHATWG(网页超文本应用技术工作小组)是一个以推动网络HTML 5 标准为目的而成立的组织,在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成】

五、HTML基本骨架

骨架1(HTML4.01版本IE6开始兼容):

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>

    <body>

    </body>
</html>

标准骨架2(IE9开始兼容):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

备注

文档声明头
 <!DOCTYPE html …>此标签可告知浏览器文档,使用HTML或XHTML规范(注: 现阶段学习的是HTML4.01版本);

 字符集(编码类型)
    - <meta charset=“xxx” ...>中文能够使用的字符集有UTF-8和GB2312(GBK);
    - UTF-8是国际通用字库,里面涵盖所有地球上人类语言文字,例如汉语、英语、鸟语…;
    - GB2312是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,例如日文片假名、常见符号…;
    - 字库规模: UTF-8(字全)  > GB2312(只有汉字);
    - 保存大小: UTF-8(更臃肿、加载更慢) > GB2312(更轻巧、加载更快)[UTF-8一个汉字3个字节,而GB2312一个汉字2个字节];
    【meta标签即是声明当前html文档的字库,如果类型不一致,则会出现乱码】

    注: 使用UTF-8,还是GB2312?
    使用哪种字符集要根据实际情况进行选择,例如公司是做日本动漫的,经常会出现日语动漫名字,网页就要使用UTF-8,如果用GB2312将无法显示日语;例如公司就是中文网,极度的追求网页的显示速度,就可以使用GB2312,如果使用UTF-8将每个汉字多一个字节,即5000个汉字就多5KB;
    例如qq、网易、搜狐都是使用GB2312,追求显示速度;
    例如新华网藏语频道使用的是UTF-8,保证字符集的数量;
    
    注: 什么是字符集?活字印刷术,所有的汉字都有一个小小印章,需要哪个字,就取哪个字。
    赵六发明一个字库U,老王发明了一个字库G;
    例如同一个汉字“你”,在赵六字库U中是第3个大盘子第3行第24列;在老王字符库G中是第6大盘子第9行第68列。
    计算机,不能直接存储汉字,而都是存储的是编码,所以计算机记录“你”字,就这么记录的:
    赵六U: 03 03 24    030324你   
    老王G: 06 09 68    060968你

六、HTML语法

1、标记

 标签对: <标记名> </标记名>
 单标签: <标记名 />
 
 说明:
   1)写在尖角号里的第一个单词,叫做标记,也叫做标签,也称作元素;
   2)标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在双引号内
   3)一个标记可以有多个属性,属性和属性之间用空格隔开,属性与属性间不分先后顺序;
   4)空标记是指没有结束标签的标记,必须使用"/" 关闭

2、HTML注释方式

  语法:
    <!-- -->
  例如:
    <!-- 标题-->

3、标题字体

  语法:
    <h#> 标题内容 </h#>  [其中#是1~6]
  例如:
    <h1>HTML基础学习</h1>
    <h3>HTML基础学习</h3>

4、段落

  语法: 
    <p> 段落文本内容(段落与段落之间有间距) </p>
  注:
    空格符号(所占的位置没有确定值,这和当前字体有关):  
  例如:
    <p> 我是段落内容 </p>

5、加粗

  语法1: 
    <b> 加粗内容 </b>
  语法2: 
    <strong> 加粗内容 </strong>
  例如:
    <b>学习HTML的感想... </b>

6、倾斜

  语法1: 
    <i> 倾斜内容 </i>
  语法2:
    <em> 倾斜内容 </em>
  例如:
    <p> 今天是星期四,明天就是 <strong>星期五啦!!!</strong> 想想明天放假我都开心,然后我可以<i>睡个懒觉、玩玩游戏、撩撩妹...</i></p>

7、文本加下划线

  语法: 
    <u> 文本加下划线 </u>
  例如:
    <u> 我就是文本文本加下划线 </u>

8、标记文本上标

  语法: 
    <sup> 文本上标 </sup>
  例如:
    2<sup>3</sup> = 8

9、标记文本下标

  语法: 
    <sub> 文本下标 </sub>
  例如:
    H<sub>2</sub>O

10、特殊字符

  不换行空格:      空格大小是不确定的,是和当前所在字体大小有关
  右尖括号>: >
  左尖括号<: <
  备案中图标© : ©

11、换行

  语法: <br />
  备注: 换行是一个空标记,是强制换行

12、水平线

   语法: <hr /> 
   备注: 空标记

13、列表

  > 无序列表(unordered list):
       <ul>
           <li> 无序列表1 </li>
           <li> 无序列表2 </li>
       </ul>

> 有序列表(ordered list):
        <ol>
            <li> 有序列表 </li>
            <li> 有序列表 </li>
        </ol>
   注: 扩展(有序列表的属性):
        语法: <ol type="a" start="3"> </ol>
        type属性: 规定列表中的列表项的符号类型
        start属性: 规定有序列表是从第几个开始(默认从1开始)
        '1' 数字的有序列表(默认值)
        'a' 小写字母的有序列表
        'A' 大写字母的有序列表
        'i' 罗马数字,小写
        'I' 罗马数字,大写

> 自定义列表(definition list):
        <dl>
            <dt> 名词 </dt>
            <dd> 解释/定义描述 </dd>
        </dl>

14、图片

  语法: 
    ![](目标文件路径以及名称)
  title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的,图片标题;
  alt的作用: 在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方做为图片替换文本;
   备注: 需要插入的图片必须放在站点下
   例如:
    ![我出不来,肿么办???](https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1491981403&di=d753e795eb4c272f65ee504cc0663739&src=http://img1.7wenta.com/upload/qa_headIcons/20150122/14219365390308909.jpg)

15、超链接

  语法1: 
    <a href="#"> </a>空链接(当前)
  语法2: 
    <a href="链接地址"  target="" title=""> </a>
      href: 链接地址后边跟的是链接页面的路径(包含文件名);
      title: 加入这个属性后,当鼠标移动到热点时,则在鼠标下方显示title的内容;
      target: 参数定义了打开链接的目标窗口,即控制打开方式;
          _blank: 在新窗口中打开链接 页面(会保留原窗口)
          _self:  在当前窗体打开链接页面,此为默认值
  例如:
    <a href="http://www.baidu.com" target="_blank"> 首页 </a>

16、表格

表格: <table> </table>
行: <tr> 行 </tr>
单元格(列): <td> 单元格 </td>

1)width="表格的宽度"
2)height="表格的高度"
3)border="表格的边框"
4)bordercolor="边框色"
5) bgcolor="背景颜色"
6)cellspacing="单元格与单元格之间的间距"
7)cellpadding="单元格与内容之间的空隙"
8)align="表格对齐方式"  取值:left、right、center(备注: 如果是table中的属性是整个表格相对于浏览器的对齐方式,如果是td即是文本内容相对单元格的对齐方式)
   valign="垂直对齐" top\bottom\middle (备注: 只能用于tr/td)
9)background=“路径” 背景
10)合并单元格属性:
    合并列: colspan=“所要合并的单元格的列数"
    合并行: rowspan=“所要合并单元格的行数”

例如:
<table width="300" height="300" border="1" cellspacing="0" align="center">
   <!-- 单元格合并,合并列-->
   <tr>
       <td colspan="2" align="center" width=“130”> 单元格"合并列" </td>
       <!-- 注意,合并完之后,就是删除掉一下,如果还存在,就是会多出一个单元格-->
       <!-- > <td> 第一行第二列 </td> -->
   </tr>
   <tr>
       <td> </td>
       <td> </td>
   </tr>
</table>

17、表单控件

表单框(表单域)

 语法: 
    <form name="表单框的名称" method="post/get"  action="url">
    </form>
   属性描述:
     name: 表单框的名字
     method: 请求方式
     action: 提交到url

文本框

  <input type="text" value="账号"/>

密码框

  <input type="password"/>

提交按钮

  <input type="submit" value="提交内容">
  备注: value是必备的,即是按钮要有按钮名才行

重置按钮

  <input type="reset" value="重置">
  备注: 重置,即是输入框删除输入内容

单选框/单选按钮

  <input type="radio" name="sex"/> 男
  <input type="radio" name="sex" checked="checked" /> 女 <br/>
  <input type="radio" /> 中性 <br/>
  备注: 
     name: 必须写,而且同一组单选按钮的name属性值必须是一致的;
     checked: 可以设置默认选择(checked="checked"默认即是选中);
     disabled: 是否可用(disabled="disabled"即禁用),默认是可用;

复选框(即可以多选的)

  <input type="checkbox" name="like"> 吃饭
   <input type="checkbox" name="like"> 睡觉
  <input type="checkbox" name="like"> 玩游戏
  <input type="checkbox"> 打豆豆

  备注: 
    name: 可以不写,不影响复选,但是同一组的最好还是要添加一致的名字;
    checked: 可以设置默认选择(checked="checked"默认即是选中);
    disabled: 是否可用(disabled="disabled"即禁用),默认是可用;

下拉菜单

  <select>
       <option>身份证</option>
       <option>学位证</option>
       <option>军人证</option>
  </select>

多行文本框(文本域)

  <textarea rows="5" cols="50">
  </textarea>
  rows: 设置文本输入窗口的高度
  cols: 设置文本输入窗口的宽度

按钮

  <input name="" type="button" value="按钮内容" />
  备注: 和submit的区别是 ,submit是提交按钮 起到提交信息的作用,button只起到跳转的作用,不进行提交
赞(0)
评论 (0)