01-HTML

作者: fly5 | 来源:发表于2018-09-05 10:47 被阅读0次

一、环境搭建

浏览器 --- 谷歌/火狐/IE/Safari
编辑器 --- HBuilder/Sublime/Dw/记事本

二、语言了解

HTML 超文本标记语言【基本架构】

  语言: 和浏览器沟通的
  标记:  <文本>   <html>
      标签对: <html></html>
      单标签: <img />
  文本: 显示文本内容
  超文本: 显示图片、显示视频、播放音乐....

CSS 层叠样式表【搞装修的】

一个人的描述:
  身高: 183cm
  年龄: 18岁
  体重: 70Kg

一个元素的描述:
  style="width: 100px; height: 100px; background: red;"
         width: 100px;  // 属性名: 属性值;

    width: 100px;   // 宽度为100像素
    height: 100px;  // 高度为100像素
+   background: red;// 背景为红色
————————————————————————————————————
style="width: 100px; height: 100px; background: red;"

Javascript 脚本语言【智能化】

  // 点击之后要做的事情      
  onclick="this.style.width='800px';"

  this.style.width='800px'; // 自己(this) 的(.) 样式(style) 的(.) 宽度(width)  = '800像素'

![](https://img.haomeiwen.com/i1801379/93337a73fba0e270.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

三、网页组成

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

四、HTML及相关概念

HTML指的是超文本标记语言，www万维网的描述性语言，通用标记语言的一个应用；
XHTML指可扩展超文本标记语言(标识语言)，是一种置标语言，表现方式与超文本标记(HTML)类似，不过语法上更加严格；
HTML5指的是HTML的第五次重大修改(第5个版本)；
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>一级标题</h1>
    <h2>二级标题</h2>
    <h3>二级标题</h3>
    <h4>二级标题</h4>
    <h5>二级标题</h5>
    <h6>六级标题</h6>

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、换行

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

11、水平线

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

12、列表

  > 无序列表(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>

13、图片

  语法: 
    <img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
  title的作用: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的，图片标题;
  alt的作用: 在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方做为图片替换文本;
  例如:
    <img src="./head.png"  />
  备注: 
    需要插入的图片必须放在站点下;
   路径问题:
      ./ 当前目录(可以忽略不写)
      ../ 上级目录
      ../../ 上上级目录

14、超链接

  语法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>

15、div和span

语法:
  <div></div>
例如:
  <div>
    <p> 你好啊？ </p>
  </div>
备注:
  没有具体含义，统称为块标签，
  用来设置文档区域，是文档布局常用对象

语法:
  <span> </span>
例如:
  <span> hello world! </span>
备注:
  文本结点标签
  可以是某一小段文本，或是某一个字

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只起到跳转的作用，不进行提交

01-HTML

一、环境搭建

二、语言了解

三、网页组成

四、HTML及相关概念

五、HTML发展历史

六、HTML基本骨架

七、HTML常用标签

1、标记(标签)

2、HTML注释方式

3、标题字体

4、段落

5、加粗

6、倾斜

7、文本加下划线

8、标记文本上标

9、标记文本下标

10、换行

11、水平线

12、列表

13、图片

14、超链接

15、div和span

16、表格

17、表单控件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读