zoukankan      html  css  js  c++  java
  • HTML 入门第一课

    HTML 简单认识

    HTML(HyperText Markup Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页的最基本的语言,它可以直接由浏览器执行。

    1.HTML 是用来描述网页的一种语言。

    2.HTML 指的是超文本标记语言: HyperText Markup Language

    3.HTML 不是一种编程语言,而是一种标记语言

    4.标记语言是一套标记标签 (markup tag)

    5.HTML 使用标记标签来描述网页

    6.HTML 文档包含了HTML 标签及文本内容

    7.HTML文档也叫做 web 页面

    由 HTML 组成的网页的基本结构

    image

    文档类型声明 <!DOCTYPE html>      --这是html5的声明方法

    头部标记(<head>….</head>)

            包含文档的标题信息,头部标记都不可或缺!

    主体标记(<body>…..</body>)

            包含了文档的内容

    中文编码声明(<meta charset = “utf-8”>)

    HTML常用标签

    <p>…</p>    定义一个段的块级标记      |     <br />   换行标记       |      <h1> …<h6>    标题标记

    <ul>  </ ul>   无序列表标记,表示列表所包含的项是没有先后顺序的!列表项使用<li>表示。

    <ol>  </ ol>   有序列表标记,表示列表所包含的项是有先后顺序的!列表项使用<li>表示。

    <dl>  </ dl>    定义列表,定义列表至少包含一条术语(dt)或一条说明(dd)

    <dt>  </ dt>   标明一个术语要说明的对象

    <dd>  </dd>  列表项说明

    <b>   </b> 或 <strong>  </strong>          文本加粗

    <i>    </i> 或 <em>    </em>                    文本倾斜

    <div>  </div>   块级元素   |    <span> </ span>  行内元素    |    <hr />   分隔线     |     <del>  <del />    删除线

    < img >      图像的行内标记

    <img  src = “lianhua.jpg ”  alt = “莲花之美”>

    src 是图片的路径参数;

    网页设计中的所有文件,原则上都必须放置在一起,即在同一个文件夹下(这个文件夹是网页的“根”文件夹)

    相对路径:参照自身的位置,而定义的路径,叫做相对路径

    相对路径有三种表示方法:

           1.Html文档和图片在同一个目录下,直接写图片名称

            2.Html文档和图片所在的文件夹在同一个目录下,先写文件夹名称,再写图片名称

            3.Html文档所在文件夹和图片所在文件夹在同一个目录下,则需要先用”../ ”找到根目录,

    再写图片所在文件夹的名称,最后写图片名称

    -> 图片大小              <img width = “ ”  height = “ “ />

               网页中长度单位多使用 px ,即像素。

    -> 图标替代文体      <img alt = “图片替代的文本内容” />

               在网络较慢的环境中,如果没有出现图片,将以文本替代图片显示

    -> 图片提示              <img title = “提示文本” />

                在鼠标放置图片上时提示的文本。多数标签都有此属性,但浏览器的支持不全面!

    HTML 文字排版标记

    1.<big></big> 定义大字体的文字 不符合标准网页设计的理念,不赞成使用.

    2.<small></small> 定义小字体的文字

    3.<sup></sup> 上标

    4.<sub></sub> 下标

    HTML 特殊符号

              “&lt;” 和 &gt;”    “<”  和   “>”           |          &laquo;  &raquo;     <<     >>

               &lsaquo;    &rsaquo;    <  >          |        &copy;      版权          &amp      &

    超链接 

    <a>  </a>     通过使用属性href来指定要链接的url,标签的内容可以为文本也可为其他标签

    ①<a href="2.html">点击进入2网页</a>,点击文字进入2.html

    ②<a href="2.html"><img src="two.jpg" /></a>,点击图片进入2.html

    ① a:link:未访问链接 ,如 a:link {color:blue}
    ② a:visited:已访问链接 ,如 a:visited{color:blue}
    ③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}
    ④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}

    锚点的使用

    1.定义锚点<a id=“zj”>第三章</a>

    2.定义指向该锚地的链接<a href=“#zj”>点击查看第三章</a>

    下载链接的使用

    如果url指向的不是一个html文件,那么点击时将下载该文件

    表格的基本结构

    1)<table> </ table>       定义表格的基本框架

    2)<tr>  </tr>               定义表格的行

    3)<td>  </td>              定义表格行内单元格

    4)<th> </th>               定义表格行内单元格(标题),自动将文本加粗,居中对齐

    表单

    表单的组成:一个表单有三个基本组成部分:

    1)表单标签:这里面包含了处理表单数据所用程序的url,以及数据提交到数据服务器的方法。

    2)表单域:包含了文本框,密码框,隐藏域,多行文本框,复选框,下拉框和文件上传框等。

  • 相关阅读:
    java.lang.NoClassDefFoundError: org/hibernate/service/ServiceRegistry] 类似问题
    哪些window你不知道的却实用的小技巧----window小技巧
    windows命令快捷启动应用-----window小技巧
    cmd窗口关闭 -----window小技巧!
    Eclipse错误笔记!
    如何在WIndows电脑上安装 SVN Server 实现代码版本控制
    linux之应用开发杂记(一)
    面试知识点汇总
    Android技术面试整理
    MYSQL常用操作语句
  • 原文地址:https://www.cnblogs.com/hexige/p/7793474.html
Copyright © 2011-2022 走看看