html学习笔记1

来源:互联网 发布:pink原宿风拍照软件 编辑:程序博客网 时间:2024/06/15 05:03

1、W3C

World Wide Web Consortium
万维网联盟

1、什么是WEB
WEB 就是无数 网页文档的集合
2、作用
能够将各类信息和服务进行无缝连接,并提供生动的图形用户界面

WEB - 网页
3、WEB 工作原理
基于 浏览器/服务器(B/S) 模式
互联网程序模式:
1、C/S
Client / Server
客户端 服务器
只能通过指定的客户端去访问服务器程序的一种方式
QQ, … …
2、B/S
Browser / Server
浏览器 服务器
通过 浏览器 去访问服务器程序的一种方式

 1、组成        1、WEB 服务器    2、浏览器       用户代理(User Agent : UA)    3、通信协议       http : Hyper Text Transfer Protocal              超文本传输协议    规范了数据是        如何进行打包的       如何进行传递的       请求:       响应:     2、WEB 服务器    1、功能       存储 WEB 上的信息       响应客户端的请求    2、主要服务器产品       TOMCAT       IIS       APACHE 3、WEB 浏览器    1、功能       代理用户 提交请求       作为 HTML 代码的解释器       以图形化方式显示HTML文档    2、主流的浏览器       IE       Google Chrome       Apple Safari       Mozilla Firefox       Opera  3、相关技术     1、服务器端技术    php    jsp    asp    aspx 2、客户端技术    HTML    CSS    Javascript(JS)

2、HTML 快速入门
1、HTML概述
1、什么是HTML
就是一个网页文档,WEB页面
Hyper Text Markup Language
Markup:标签,html文档内容组成的最基本方式。
Language:语言
2、HTML语法
1、标签(标记)
1、什么是标签
就是描述功能的一个符号


2、语法
标签在使用时,必须用<>括起来
    标签分为       封闭类型      非封闭类型 3、封闭类型标记-双标记    必须成对出现,一个表示开始,一个表示结束    <标签>内容</标签>    注意:      封闭类型标记,必须要有结束,否则会产生意想不到的效果 4、非封闭类型标记-单标记(空标记)    一个标签,既能表示开始,也能表示结束。没有内容可以控制。    每一个单标记,都是一个独立的功能    <标签>    或    <标签/>  2、元素     1、什么是元素    就是标签。    标签及其控制的内容,可称之为 元素 2、元素嵌套    在一个元素(标签)中嵌套了另外一个元素(标签)    注意:      1、嵌套顺序      2、代码规范-缩进 3、属性 和 值    属性以及值,是用来修饰元素的。    <标记 属性名称="值" 属性名称="值"></标记>    <p align="center"></p>    标准属性:      id:定义元素再文档中的唯一名称      title:鼠标移入到元素时所显示的文字      class:关联类选择器时使用      style:定义元素的内联样式  3、注释     语法:<!--  注释内容  --> 特点:   1、不会被浏览器所解析   2、不允许被嵌套   3、不允许出现在 < 不能出现注释 > 

3、HTML 版本
1、HTML4.01
2、XHTML1.0
3、HTML5
2014年10月29日 发布第一版本的规范
1、支持了更多规范
2、代码更加简洁

        <p align="center"></p>        <p align=center></p>        <input readonly="readonly">        <input readonly>

4、文档结构
1、文档组成
1、文档类型声明
指定当前网页的类型和版本
html5文档类型声明:

位于 整个网页文档的最上方
2、html页面
表示 整个 网页文档的内容
位于 文档类型之下,由一对html标记组成

    <!doctype html>    <html>    </html>  2、文档内容     1、网页头部    1、作用       用于定义页面的全局信息,比如:标题,描述,关键字,编码格式,定义JS,定义CSS    2、语法:       由 一对 head 标记表示       <head></head>       位于 html 根标记之内    3、子标记       1、网页标题 <title>标题内容</title>       2、编码格式 <meta charset="utf-8">       3、其他子标记    <style></style>      <link />      <script></script>      <meta name="" content=""> 2、网页主体    1、作用       描述 展示给用户去看的东西    2、语法       <body></body>       位置:         <html>之内     <head>之下

3、文本标记
1、特殊字符的处理

      1、空格         &nbsp;      2、<         &lt;      3、>         &gt;      4、©         &copy;      5、¥         &yen;

2、文本标记
1、文本样式

    <b>...</b> 加粗     <i>...</i> 倾斜     <s>...</s> 删除线     <u>...</u> 下划线     <sub>...</sub> 下标     <sup>...</sup> 上标
  2、标题元素     突出显示内容标题(改变字体,以及加粗) <h#></h#> #:1-6 <h1></h1> 一级标题(最大) ... <h6></h6> 六级标题(最小)  3、段落元素     表现形式:上下会具备垂直的空白距离 <p></p>  4、换行元素     <br>  5、分割线元素     <hr> 属性:   size:尺寸   width:宽度   align:水平对齐方式 (left/center/right)   color:颜色  6、分区元素     1、行分区元素    <span></span>    作用:用于自定义文本效果 2、块分区元素    <div></div>    作用:布局  7、行内元素 块级元素     1、块级元素    独占一行    <div></div>    <p></p>    <h1></h1>    ...    <h6></h6>    作用:布局    注意:      1、p元素中,不允许嵌套其他的块级元素(包含自己)      2、非布局标记,不要嵌套div         允许嵌套div     <li>     <td>     <dt>     <dd>     结构化标记      3、行内元素不要嵌套块级元素     2、行内元素    特点:多个元素会在一行内显示    作用:用来修饰文本的不同表现形式    <span></span>    <i></i>    <u></u>    <s></s>    <b></b>    ...  8、预格式化     保留 源文件中的 空格 和 回车 <pre></pre>