HTML基础知识总结

几个工具:

IETester:多版本IE测试

Expression Web

DreamWeaver 美工页面

XHTML:符合XML标准的HTML。

标签成对出现。比如<br></br>是符合XML的,而<br />是不符合XML的。

1.属性值:用单引号或者双引号括起来

注释:<!-- -->

特殊字符:< > Space 需要转义

< &lt; less than

> &gt; greater than

空格 &nbsp; no-break space

2.<br>与<p> 段落之间有空白。

<br>:换行,行前空白比较小。

<p>:分段,段前有比较大的空白。

3.URL

/ 表示网站根目录

../ 表示父目录

../../ 表示父目录的父目录

./或不写 表示相对当前路径的目录,站内引用最好用相对URL。

<a>的target属性设定为"_blank"可以在新窗口中打开超链接,默认在当前页面打开超链接

<a href="http://www.baidu.com"> 百度</a>

<a name="Last"><a>设置瞄点

<a href="#Last">跳到最后</a>

4.<img>图片标签

alt属性为图片无法显示时的显示的文本

<img src="/Images/123.jpg" height="40%" width="40%" alt="图片无法显示" />

最好指定width和height。因为网页先加载,图片后加载,先占位。

图片缩略图:

<a href="/Images/123.jpg" target="_blank">

<img src="/Images/123.jpg" height="20%" width="20%" />

</a>

这种方式,仍然会下载大图,再由浏览器缩小显示。流量仍然是下载大图不变。

另一种方式:

两张图,分别存储缩略图和大图。先加载缩略图,点击后再请求大图。

5.列表

<ul> un-ordered list 圆点列表,没序号

<ol> ordered list 有序列表,有序号

6.文件选择框:自带“浏览”按钮

<input type="file" />

7.FieldSet 将控件划分一个区域,类似GroupBox效果

8.样式表

CSS(层叠样式表)是用来美化页面的,可以对页面元素进行更精细的设置,样式主要描述原色的字体颜色、背景颜色、边框等。

CSS有三种方式:

(1)元素内嵌

直接将样式写入元素的style属性中。适用于样式没有可复用性的场合。

例子:

<input type="text" value="123"

style="border-style:double; border-color:Yellow; border-width: 3;

background-color:Blue; height: 24px; width: 152px;" />

(2)页面嵌入

在head中加入:

<style type="text/css">

input{border-color:Yellow,color:Red;}

</style>

例子:

<style type="text/css">

input

{

background-color: Red;

border-color: Black;

}

div

{

background-color: Yellow;

}

p

{

background-color: Green;

}

</style>

表示页面中所有input都是采用指定的样式,适合于样式复用,减小页面体积。

(3)外部引用

将css内容写入css后缀的样式文件,然后在页面中引用,在head中加入。

<link type="text/css" rel="Stylesheet" href="s1.css" />

适合于多个页面共享CSS。

(4)常见样式

(a)css计量单位

px(像素) 30%(百分比) em(相对单位)

width;30px

(b)background-color:Red 背景颜色

color:文本颜色

(c) 边框

border-style:solid;

border-color: 边框颜色

border-width:默认为0

(d)display:元素是否显示

可选none(不显示)

inline(显示为内联元素,元素前后没有换行符)

block(显示为块级元素,元素前后会带有换行符)

(e)cursor:鼠标在元素上时显示的光标图标

可选:

cursor:默认光标

pointer:超链接上的手

text:输入Bean

wait:忙沙漏

help:帮助

……

(f)LI不显示圆点

LIST-STYLE-TYPE:none,一般设在li或者ul上

9.div和span

(1)div:层

div类似panel。

<div> </div>将内容放到层中,整体处理,整体移动

div将所有内容包成一个方块。将内容放在一个矩形的区块中,会影响布局

(2)span:块

<span></span>

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

10.样式选择器

对于非元素内联的样式需要定义样式选择器,也就是说明样式适合哪些元素。一共有三种CSS选择器:

(1)标签选择器

对于指定的标签采用统一的样式

input{border-color:Yellow;}

(2)class选择器

以定义一个命名的样式,然后在用到它的时候设定元素的class属性为样式的名称,还可以同时设定多个class,名称之间加空格

样式名称开头要加点(.)

.warming{background:Yellow;}

<div class="warming"><div>

(3)id选择器

为指定id的元素设定样式,id前加#

#username

{

font-size:xx-large;

}

<input id="username" type="text" value="aaaa" />

(4)标签+class选择器

class选择器可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加标签名即可。

input.account{color:Red;text-align:right;}

label.account{color:Blue;text-align:left;}

<input class="account" type="text" value="1111" />

<label class="account">2222</label>

id、style、class可以同时组合使用:

<input id="username" class="account" style="font-size:xx-large type="text" value="12345" />

(5)关联选择器

P strong{background-color:Blue;}

表示P标签内的strong标签内的内容使用的样式。

(6)组合选择器

同时为多个标签设定一个样式

h1,h2,h3,input{background-color:green;}

(7)伪选择器

为标签的不同状态下设定不同的样式

A:visited 超链接点击过的样式

A:active 选中超链接时的样式

A:link 超链接未被访问时的样式

A:hover 鼠标移到超链接时的样式

A:visited{TEXT-DECORATION:none}

A:active{TEXT-DECORATION:none}

A:link{TEXT-DECORATION:none}

A:hover{TEXT-DECORATION:underline}

上面这个模板一般是写死的,link.css ,同一个项目内共享CSS,所有超链接都一样。

11.样式选择器优先级

内联样式会覆盖标签样式。

<div style="background:Yellow;"></div>

原文发布于微信公众号 - CSDN技术头条(CSDN_Tech)

原文发表时间:2015-09-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

Selenium2+python自动化65-js定位几种方法总结

前言 本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一、以下总结了5种js定位的方法 除了id是定位到的是单个elemen...

3387
来自专栏Java帮帮-微信公众号-技术文章全总结

与Ajax同样重要的jQuery(2)

练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" sr...

3155
来自专栏十月梦想

jquery高级选择器第一部分

        上一篇简单的介绍了jquery的基础选择器,准备把高级选择器部分分为三篇博文介绍!慢工出细活吗,循序渐进相信jq会和css一样顺手,废话不少了接...

692
来自专栏行者常至

002.css常用基础知识点

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版...

951
来自专栏DeveWork

解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色...

2976
来自专栏分享达人秀

两种对齐方式,layout_gravity和gravity大不同

上一期我们一起学习了LinearLayout线性布局的方向、填充模型和权重,本期来一起学习LinearLayout线性布局的对齐。 一、LinearLay...

2319
来自专栏强仔仔

JQuery之内置函数响应事件

今天给大家介绍一下on函数中events的种类和用法。 具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类...

1946
来自专栏前端萌媛的成长之路

position有几种,absolute和relative的区别

1672
来自专栏静晴轩

jQuery VS JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替...

4596
来自专栏流柯技术学院

selenium截取具体元素图片(python版)

element = driver.find_element_by_id("xx")

1121

扫码关注云+社区

领取腾讯云代金券