zoukankan      html  css  js  c++  java
  • HTML学记笔记

    1、 浏览器

    A、浏览器(browser) :万维网(Web)服务的客户端浏览程序。通过HTTP协议与网页服务器通信,并向万维网(Web)服务器发送各种请求,对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。

    B、可以使用IETester工具,测试IE浏览器兼容问题(IE6 IE7 IE8共存)。

    C、现在常用的浏览器引擎有Trident、WebKit。

    2、静态网页与动态网页

    A、什么是静态网页

    使用HTML,XHTML,XML,CSS,JavaScript,Flash等不需要服务器端运算的程序实现的网页。

    B、什么是动态网页

    使用ASP,PHP,JSP等需要服务器端运算的程序实现的网页。

    3、HTML基本结构

    A、<HTML></HTML>

    HTML标签放置于HTML文件的头尾,它的作用是告诉浏览器这个文件是HTML文件。

    <HEAD></HEAD>

    HEAD 标签一般在HTML标签和BODY标签的中间,是用来定义一些头部说明。

    <TITLE></TITEL>

    TITLE标签是用来定义这个HTML文档的标题,让浏览者访问网页时能够一下子明白网页的相关内容。它将显示在浏览器左上方。

    <BODY></BODY>

    在<BODY>标签里,可以定义网页的背景色,文字,链接等的颜色,甚至可以调入一些程序执行。在<BODY>和</BODY>中间,是网页的主要内容,是直接呈现给网友的部分。

    4、HTML与XHTML

    A、XHTML 要求正确嵌套

    正确:嵌套元素

    <p>Dragon <em>XHTML教程</em>.</p>

    不正确:层叠元素

    <p>Dragon <em>XHTML教程</p>.</em>

    B、元素和属性名必须小写

    对于所有HTML元素和属性名, XHTML文档必须使用小写。因为XML是大小写敏感的.如 <li> 和 <LI> 是不同的标签。

    C、对非空元素,必须使用结束标签

    在基于SGML的HTML4中的一些隐含结束意义的元素允许忽略结束标签.XML不允许忽略结束标签.除了在DTD中被声明为空的元素,所有元素必须有结束标签。

    正确:结束的元素

    <p>XHTML教程.</p><p> CSS教程.</p>

    不正确:未结束的元素

    <p>XHTML教程.<p> CSS教程.

    D、属性值必须在引号中

    所有的属性值必须在引号中,即使是以数字形式的属性值

    正确:在引号中的属性值

    <table rows="3">

    不正确:不在引号中的属性值

    <table rows=3>

    E、属性最小化

    XML不支持属性最小化.属性-属性值必须完整成对的写出.像disabled,checked这样的属性名不能在不指定属性值的情况下出现.

    正确:非最小化属性

    <input checked="checked">

    不正确:最小化属性

    <input checked>

    F、元素必须被关闭

    空元素必须有结束标签,或者起始标签必须以/>结束.例如,<br/>或<hr></hr>。

    正确:结束的空元素

    <br/><hr/>

    错误:未结束的空标签

    <br><hr>

    G、用id 属性代替name 属性

    HTML 4.01 针对下列元素定义 name 属性:a, applet, frame, iframe, img, 和map。

    在 XHTML 中不鼓励使用 name 属性,应该使用 id 取而代之。

    正确:

    <img src="picture.gif" id="picture1" />

    错误:

    <img src="picture.gif" name="picture1" />

    5、HTML的格式标签

    A、<br/>回车,<p>分段。

       <center>Dragon</center>居中显示。

       h标签,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。

       <b>Dragon</b>粗体。

       <font></font>字体标签。

    B、URL、超链接

    URL表示资源在网络中的地址。

    超链接<a href="http://www.cnblogs.com/PBDragon">Dragon</a>。

    图片超链接<a href="http://www.cnblogs.com/PBDragon"><img src="http://www.cnblogs.com/PBDragon/logo.gif"/></a>。

    C、超链接(续)

    "/"表示网站根目录,"../"表示父目录,"../../"表示父目录的父目录。

    将<a>的target属性设置为"_blank/"在新窗口中打开超链接。

    用name属性为<a>起名,<a name="last">这里是最后部分</a>。这样可以通过<a href="#last">转到..</a>来跳转到某部分。

    D、列表、表格

    列表:<li>表示列表项。<ul>表示无序排列,<ol>表示有序排列。即在<ul> </ul>中写入<li>可以构成一个无序列表,而在<ol> </ol>中写入<li>构成的是一个有序列表

    表格:<table></table>为表格,通过<tr>创建行,<tr>内通过<td>创建单元格,将table的border属性设为0隐藏表格线。

    <tr>的属性:align水平对齐,可选left、right、center;valign垂直对齐,可选top、middle、bottom。

    <td>的属性:也有align、valign。

    注意:子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父标签的属性。

     

    6、表单

    A、form标签用于为用户输入创建 HTML 表单。

    表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

    B、form的必要属性action

       规定当提交表单时,向何处发送表单数据。

    C、form的可选属性accept 规定通过文件上传来提交的文件的类型。

    accept-charset服务器处理表单数据所接受的字符集。

    enctype规定表单数据在发送到服务器之前应该如何编码。

    method 以get、post方法发送表单数据。

    name规定表单的名称。

    Target 以_blank、_parent、_self、_top 规定在何处打开 action URL。

    D、input标签用于搜集用户信息。

       根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

    E、input的type属性可选button、checkbox、file、hidden、image、password、radio、reset、submit、text 元素类型。

    F、select 元素可创建单选或多选菜单。

    当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性。

       如选属性:disabled 规定禁用该下拉列表。

    multiple 规定可选择多个选项。

    name 规定下拉列表的名称。

    size 规定下拉列表中可见选项的数目。

    option 元素定义下拉列表中的一个选项(一个条目)。

    浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。

       如选属性:disabled规定此选项应在首次加载时被禁用。

    label定义当使用 <optgroup> 时所使用的标注。

    selected 规定选项(在首次显示在列表中时)表现为选中状态。

    value定义送往服务器的选项值。

    G、TextArea标签定义多行的文本输入控件。

    文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

    可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

       必需的属性:

    cols number 规定文本区内的可见宽度。

    rows number 规定文本区内的可见行数。

    可选的属性:

    disabled规定禁用该文本区。

    name规定文本区的名称。

    readonly规定文本区为只读。

    H、label标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

       注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

    7、CSS样式表

    CSS(层叠样式表)用于美化页面,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。CSS有以下三种方式来插入样式:

    外部样式表

    当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

    <head>

    <link rel="stylesheet" type="text/css" href="mystyle.css">

    </head>

    内部样式表

    当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

    <head>

    <style type="text/css">

    body {background-color: red}

    p {margin-left: 20px}

    </style>

    </head>

    内联样式

    当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

    <p style="color: red; margin-left: 20px">

    This is a paragraph

    </p>

    8、DIV和SPAN

    层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理。Div是将内容放到一个矩形的区块中,会影响布局。

    Span:只是把一段内容定义成一个整体进行操作,不影响布局显示。

    9、CSS常见样式

    1、CSS计量单位:CSS中表示宽度、距离时有多种计量单位:px(像素)、30%(百分比)、em(相对单位)等。常见:20px。

    2、background-color:Red;背景颜色;color:文本颜色。

    3、border-style:solid;边框风格,实线,还是dotted(点)等值;border-color:边框颜色;border-边框宽度。例子:style=“border-color:Red;border-1px;border-style:dotted;”

    4、display:元素是否显示,可选值none(不显示)、block(显示为块级元素,此元素前后会带有换行符。)、inline(显示为内联元素,元素前后没有换行符)等。

    5、cursor:鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接)。

    6、LI不显示圆点:LIST-STYLE-TYPE:none;一般设在LI或者LU上。

    10、CSS样式选择器

    selector有三种方式:HTML selector , CLASS selector , ID selector还有几个扩充的选择器:关联选择器,组合选择器,伪元素选择器。

    HTML selector: 选择器 { 属性1:值;属性2:值 }

    CLASS selector: .class(类别名称){ 属性1:值;属性2:值;}

    ID selector: #id(id选择器) { 属性1:值;属性2:值; }

    注:在CSS中少用ID selector,但在javascrip里面会得已广范使用。因为可以根据这个ID值来操纵和定位这个特定的HTML标签。

    关联选择器:指用一个空格隔开的两个或更多的单一选择器组成的字符串。

    组合选择器:可以对多个标签对采用相同的样式。

    11、样式优先级

    [1位重要标志位] > [4位特殊性标志] > 声明先后顺序

    !important > [ id > class > tag ] 

    使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。

    4位特殊性标志 [0.0.0.0]

    1、内联样式 [1.0.0.0]

    2、ID选择器 [0.1.0.0]

    3、类,属性,伪类选择器 [0.0.1.0]

    4、元素标签,伪元素选择器 [0.0.0.1]

    LVHA伪类,样式按LVHA优先级顺序从右至左覆盖,不同的顺序会产生不同的效果。

    a:link - 默认链接样式

    a:visited - 已访问链接样式

    a:hover - 鼠标悬停样式

    a:active - 鼠标点击样式

  • 相关阅读:
    keepalived.conf配置说明
    监控端口是否开放,端口未开放关闭虚拟ip,端口开放启动虚拟IP
    lvs UDP端口负载均衡配置
    keepalived自动安装脚本
    Keepalived+LVS实现高可用负载均衡双主模式
    cookie和session的区别
    jmeter 关联
    浏览器缓存详解:expires,cache-control,last-modified,etag详细说明
    Session、Cookie、Cache、Token分别是什么及区别
    获取MyBatis
  • 原文地址:https://www.cnblogs.com/PBDragon/p/3457193.html
Copyright © 2011-2022 走看看