zoukankan      html  css  js  c++  java
  • HTML简要内容

    1.  html基础

    html是用来制作网页的标记语言,不需编译,直接由浏览器执行。大小写不敏感,推荐使用小写。html文件必须使用htmlhtm为文件名后缀。

    html主体结构:

    (1)DTD头:用于告诉浏览器用什么标准解析当前页面

    (2)head部分:告诉浏览器一些相应信息

    (3)body部分:给人看的数据

    2.  html语言的语法

    2.1 html标签

    标签是html中最基本单位,也是最重要的组成部分,用角括号< >括起来。

    标签都是闭合的,有两种形式:<标签名>内容<标签名<标签名 />

    有三部分组成:标签名,要显示的数据,显示数据的属性

    <标签名 属性名1=“属性值” …属性名n=“属性值”></ 标签名>

    2.2 html注释

    <!--被注释的内容-->

    2.3 html代码格式

    回车和空格在源代码中不起作用,所以在编写html代码时可以使用回车或空格进行排版,可使代码清晰,也便于团队合作。必须保持严格的缩进规则,以“Tab”键为准。

    把代码写得漂亮比把代码写得正确更重要。

    3. head部分

    表示html文档的头信息,以<head>开始,以</head>结束。

    包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在html文档中的。

    常用标签:

    title标签--代表html文档的标题

    base标签--将相对URL转换为完整的绝对URL

    meta标签--用于定义文件信息的名称、内容等信息

    link标签--当在文档中声明使用外接资源(CSS)时使用此标签

    style标签--在文档中声明样式时使用此标签

    script标签--在文档中使用JavaScript脚本

    4.body标签中的常用属性(注意默认值)

    text-------设置页面文字的颜色

    bgcolor---------设置页面的背景颜色

    background-------设置页面背景图片

    bgroperties-------设定页面背景图像为固定,不随页面滚动而滚动

    link--------设定页面默认的链接颜色

    alink-----------设定鼠标正在点击时的颜色

    vlink-----------设定访问后链接文字的颜色

    topmargin-----------设定页面的上边距

    leftmargin-------------设定页面的左边距

    5. 文字版面的编辑

    5.1 格式标签

    <br>    换行标签

    <p>     段落标签,里边可加入文字、列表、表格等

    <center>     居中对齐标签

    <pre>     按原文显示标签,可把原文件中的空格,回车,换行,tab键表现出来

    <li>      代表html列表项目,每个列表项使用一对<li></li>

    <ul>      html无序列表

    <ol>      html有序列表

    <hr>     水平分割线标签,用于段落与段落间的分割

    5.2 文本标签

    <hn>   标题字标签,n1-6,定义六级标题,而且会自动换行插入一个空行

    <b>     粗体字标签

    <i>     斜体字标签

    <u>    下划线字体标签

    <sub>   文字上标字体标签

    <sup>   文字下表字体标签

    <font>  字体标签,可通过标签的属性指定文字的大小、颜色及字体等属性

    <tt>    打字机文字

    <cite>  用于引证、举例,通常为斜体字

    <em>  表示强调,通常为斜体字

    <strong>   表示强调,通常为粗体字

    <small>    小型字体标签

    <big>     大型字体标签

    6. 插入图像

    img标签,单独出现,<img />

    常用属性:

    alt-------代表图像的替代文字

    src------图像源(即图像的位置)

    border-------图片边框的宽度

    height--------图像的高度

    width---------图像的宽度

    设计网页时常用的图片格式:gifjpegpng

    7. 建立锚点和超链接

    7.1 a标签-------代表html链接,成对出现<a></a>

    常用属性:

    href---------代表一个url链接源

    url可以是网页,其他的文件,指向HTML文件中的一个位置,email地址

    target---------用来指出链接打开方式

    target=_blank:将链接内容在新的窗口中打开

    target=_parent:将链接的内容当成文件的上一个画面

    target=_self:将链接的内容显示在当前窗口

    target=_top:使整个画面重新显示成链接的画面内容

    链接语法:

    <a href=url” target=_blank>显示的文字</a>

    7.2 定位网页内部的链接(锚点链接)

    <a name=””>定义,如:<a name=”here1”>第一部分</a>,使用<a href=”#here1”>跳转到第一部分</a>,超链接就可以定位到网页中的“第一部分”这个位置。

    7.3 超链接

    三种链接路径:

    绝对路径:http://www.sohu.com/index.html

    文档相对路径:adver/contents.html

    站点根目录相对路径:/support/app/customer.html

    8. html表格

    8.1 常见标签

    <table>    代表html表格,成对出现

    属性:width------表格宽度

      height------表格高度

      border------表格边框

      cellspacing-----表格边框与表格内容填充的距离,也是内容填充之间的距离

      cellpadding------内容填充的宽度

    <caption>    定义表格标题的位置,可由alignvalign属性来设置

    <tr>   表中的一行

    <th>   表中的一列

    trth属性:

    widthheight------代表宽度和高度

    colspan---------一行跨越多列

    Rowspan--------一列跨越多行

    align-------------水平对齐方式(leftcenterright

    valign----------竖直对齐方式(topmiddlebottom

    <td>   表中的一个单元格,用于存放具体数据内容

    alignvalign具体解释详见上面

    9. html框架结构

    9.1 简述

    一个浏览器窗体可通过几个页面的组合来显示。可使用框架(frames)来完成。可分为数行和数列。

    优点:重载页面时不需重载整个页面;方便制作导航栏。

    缺点:会产生很多页面,不易管理;不易打印;浏览器的后退按钮无效;代码复杂,无法被一些搜索引擎索引到;多数小型的移动设备(PDA手机)无法完全显示框架;多框架的页面会增加服务器的http请求

    由于这许多缺点,不符合标准网页设计的理念,已被标准网页设计抛弃

    9.2 html框架标签

    <frameset>标签--代替body标签定义了框架页,并定义了框架将分为多少行多少列

    常用属性:

    cols---框架含有多少列与列的大小

    rows----框架还有多少行与行的大小

    border----框架页是否有边框

    framespacing----框架之间间隔的距离

    <noframes>标签--可为那些不支持框架的浏览器显示文本,与<body>组合使用

    <iframe>标签----创建一个包含另外一个文档的内敛框架,iframe标签内的内容可以作为浏览器不支持iframe标签是显示

    frame标签---定义frameset标签中每个框架页的内容

    单独出现,<frame />

    常用属性:

    frameborder----定义了内容页的边框,取值为(1|0),缺省值为1

    1--在每个页面之间显示边框    0----不显示边框

    name-----在一个框架页链接到另一框架页是使用(另一个框架页可使用target定义链接页)

    Noresize----定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize

    scrolling----定义了是否有滚动条,取值为(yes|no|auto),缺省值为auto

    yes---显示滚动条  no----不显示滚动条  auto----需要时再显示滚动条

    src----定义了内容条URL

    border---设置边框粗细

    10. html表单设置

    10.1 form标签

    网页怎样与用户进行交互?答案是:使用html表单(form

    form标签-----代表html表单

    常用属性:

    action---浏览者输入的数据被传送到的地方,如一个jsp页面

    method----数据传送的方法,常用post

    10.2 input标签-----html表单的单行输入域

    单独出现,<input />

    属性:

    type----代表一个输入域的显示方式(分为输入型,选择型,点击型)

    取值:

    text---文字输入域(输入型)

    password----文字输入域,但输入的文字以密码符号*显示(输入型)

    file----可以输入一个文件路径(输入型)

    checkbox----复选框,可以选择零个或多个(选择型)

    radio----单选框,只选且必选一个(选择型)

    hidden---代表隐藏域,可传送一些隐藏的信息到服务器

    button----按钮(点击型)(有提交功能,会把所有表单一起提交)

    image----使用图片来显示按钮,使用src属性指定图像的位置(点击型)

    submit---提交按钮,可使用value属性来显示按钮上的文字(点击型)

    reset----重置按钮,可以把表单中的信息清空(点击型)

    name-----此表单项名称

    value----输入域的值

    size----输入域的长度

    maxlength-----输入域最多可以输入文字的长度(个数)

    checked-----如果是选择型的输入域,代表已经被选择,值为checked

    readonly-----输入域可以选择,但无法修改,值为readonly

    disabled-----输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用

    accesskey-----表单的快捷键访问方式如值为h即按Alt+h

    tabindex-----输入域的“tab”键遍历顺序

    src----当使用图片来表示按钮时,代表图片的位置(URI

    alt----用来替换提交按钮的图片提示信息

    10.3 textarea标签-----代表表单多行输入域

    成对出现,<textarea></textarea>

    属性:

    cols----多行输入域的列数

    rows----多行输入域的行数

    name----此表单项名称

    accesskey-----表单的快捷键访问方式

    disabled-----无法获得焦点,无法选择

    readonly----输入域可选择,但无法修改

    tabindex-----输入域,使用“tab”键的遍历顺序

    10.4 select标签

    Select标签----选择列表标签

    成对出现<select></select>

    此标签中的每对option标签代表一个选择项

    属性:

    name---表单项名称

    size---选择域的高度

    multiple---可以有多个选择

    disabled---以灰色显示,在表单中不起任何作用

    tabindex--使用“tab”键的遍历顺序

    option标签---代表选择列表的一个选择项

    成对出现<option></option>

    属性:

    label----说明选择项

    value----说明选择项的值

    selected---此选择项已经被选择

    disabled----输入框无法获得焦点,以灰色显示,在表单中表示禁用

    tabindex----使用“tab”键的遍历顺序

  • 相关阅读:
    什么是香港3c专线精品网和3c直连网络服务器
    服务器被攻击后处理办法
    服务器Linux系统安全维护基础知识介绍
    服务器宕机原因分析
    公网,专用,共享独立IP介绍
    服务器内存种类和各自特性
    自主组装服务器行不行
    英语网址大全收藏
    【分享】地产集团公司LOGO设计
    星际争霸2logo在线制作
  • 原文地址:https://www.cnblogs.com/lianggx66/p/4872983.html
Copyright © 2011-2022 走看看