其他HTML部分-HTML CSS整理笔记-前端-IT技术博客

utf-8 和 utf8的使用

只有MySQL可以用"utf8",但其他地方一律使用大写"UTF-8"。

网页推荐使用长后缀名.html


有的浏览器中直接输出中文会出现中文乱码,可加声明<meta charset="UTF-8">


<img src="地址" alt="图片代替文字" title="鼠标悬停提示" width="" height=""/>

————

超链接

<!--1.页面间链接:A页到B页 主要运用于网页导航-->

<a href="链接网址" target="目标">页面间链接</a>


<!--2.锚链接:A页甲位置到A页的乙位置或A页甲位置到B页的乙位置  #  跳其他页面要为href="页面名.html#锚链接"-->

<a name=wo></a>

<a href=#wo>锚链接</a>


<!--3.功能性链接:在页面中调用其他软件功能,如电子邮件"mailto: @bdqn.cn" qq msn-->

<a href="mailto:bdqnWebmaster@bdqn.cn" target="_blank">功能性链接</a>


<a>标签链接Email地址,使用mailto能发送电子邮件。

如果mailto后面同时有多个参数,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

<a href="mailto:xxx@qq.com?subject=主题名称 &body=邮件内容">


<!--4.title属性:鼠标滑过链接时显示该属性的内容。方便搜索引擎了解链接地址的内容-->

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

——

超链接伪类:

a:link       访问前

a:visited    访问后

a:hover      鼠标悬停

a:active     鼠标选中未释放

————

创建表格:

1、<table>:整个表格以<table>标记开始、</table>标记结束,table在加css样式前不会显示表格线。

2、<tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不用等整个表格加载完后显示。)

3、<tr>:表格的一行,所以有几对tr 表格就有几行。

4、<th>:表格的头部的一个单元格,表格表头,文本默认粗体且居中显示。

5、<td>:表格的一个单元格,一行中包含几对<td>这行中就有几个单元格。

6、表格中列的个数,取决于一行中数据单元格的个数。

7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。


<table border="边距宽度">

 <tr>

  <td rowspan="跨行数量" colspan="跨列数量" align="文本状态"></td>

 </tr>

</table>

————

表格可以添加标题和摘要标签进行优化。

(1)摘要:<table summary="表格简介文本">

摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

(2)标题:<caption>

描述表格内容,标题的显示位置:表格上方。

语法:

<table summary="表格简介">

    <caption>标题</caption>

    <tr><td></td></tr>

</table>

————

内联框架iframe

<iframe></iframe>

相关属性 src="引用页面地址" name="框架标识名" frameborder="边框" 

scrolling="是否出现滚动条" noresize="noresize"更改页面大小

用<a targer="">配合<iframe name="">可实现窗口间的关联

————

表单

<form method="提交方式" action="提交地址"> 

如果是文件域要在表单中加 enctype="multipart/form=data" 属性

隐藏域:type="hidden"

只读:readonly="readonly"

禁用:disabled="disabled"


普通输入框

<input type="text" name="名称" size="长度" maxlength="最大长度"/>


radio单选按钮

<input type="radio" name="sex" value="男" id="nan"/>

<label for="nan">男</label>

<input type="radio" name="sex" value="女" id="nv"/>

<label for="nv">女</label>


checkbox多选按钮

<input type="checkbox" name="" value="1"/>


下拉列表

<select name="名称">

  <optoin value="值">1</option>

</select>


文本域textarea

<textarea  rows="行数" cols="列数">文本</textarea>

————

透明度

opacity:(范围0~1)  

filter:aplha(opcitive=透明度<(100)>);

————

Location 对象的方法:

.assign() //加载新文档

.reload() //刷新当前文档

.replace() //用新文档替换当前文档

————

在网页中显示代码,当代码为一行时可用<code>包裹,多行代码用<pre>。

<pre>:预格式化,它包围的文本会保留空格和换行符


下拉列表进行多选操作:在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。


通用选择器匹配所有标签 *{ }


浏览器根据选择器权值来使用权值最高的css样式

规则:

标签的权值为1,类选择器的权值为10,ID选择器的权值为100。


!important有最高权值

!important要写在分号的前面,但注意当网页制作者不设置css样式时,浏览器会按照自己的样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但 !important优先级例外,权值高于用户自设置的样式。


什么是“置换元素”?

置换元素会根据标签属性来显示的元素。反之就是非置换元素了。

如img根据src属性来显示,input根据value属性显示,因此可知img和input是置换元素,同理textarea、 select也是置换元素。

————

段落排版:

(1)letter-spacing:单个汉字间隔或单个字母间隔。

(2)word-spacing:按单词来设置间隔。

——

1、border-style 边框样式:

dashed(虚线)| dotted(点线)| solid(实线)


2、border-color 边框颜色

3、border-width 边框宽度:

thin | medium | thick。常用像素(px)。


4、当margin(或padding或border)的left和right的值相同,如:

margin:10px 20px 30px 20px;

缩写:

margin:10px 20px 30px;

——

布局模型与盒模型都是 CSS概念。布局模型建立在盒模型基础上。

在网页中,元素有三种布局模型:

1、流动模型(Flow)

流动(Flow)是默认的网页布局模式。特征:块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。

流动模型下,内联元素会在所处的包含元素内从左到右水平分布显示。


2、浮动模型 (Float)

任何元素默认是不能浮动的,可用CSS定义为浮动。


3、层模型(Layer)

让html元素在网页中精确定位,就像PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。

层模型有三种形式:

(1)绝对定位(position: absolute)

将元素从文档流中拖出来,然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位。如果不存在这样的父包含块,则相对于body元素即相对于浏览器窗口。


(2)相对定位(position: relative)

元素在正常文档流中的偏移位置。首先按static(float)方式生成一个元素(元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留。


(3)固定定位(position: fixed)

始终位于浏览器窗口内视图的设置位置,不受文档流动影响,

另外属性background-attachment:fixed;的作用也是设置背景图片固定。


relative与absolute组合:

1、参照定位的元素必须是相对定位元素的前辈元素。

2、参照定位的元素必须加入position:relative。

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。


设置颜色的方法:

1、单词:p{color:red}

2、RGB

由 R(red)、G(green)、B(blue)三种颜色比例来配色。

p{color:rgb(133,45,200)}

每一项的值可以是 0~255 的整数,也可以是0%~100% 的百分数。如:

p{color:rgb(20%,33%,25%)}


3、十六进制颜色

其原理也是 RGB 设置,每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}

——

相对单位长度值:

1、px像素

像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。


2、em

(1)元素给定字体的 font-size 值,如果元素的 font-size 为 14px,那么 1em = 14px;如果font-size 为18px,那么 1em = 18px。

如 p{font-size:12px; text-indent:2em;}意思首行缩进 24px(即两个字体大小的距离)


(2)当 font-size 设置为 em时,计算标准以它父元素的 font-size 为基础。

如:<p>以这个<span>例子</span>为例</p>

 p{font-size:14px}  span{font-size:0.8em;}

这里 span 字体大小就为11.2px(14 * 0.8 = 11.2px)


3、%百分比

p{font-size:12px; line-height:130%}

设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)


块状元素没有设置宽度时怎么居中?

 1.加入 table 标签

 2.设置 display: inline方法:显示类型设为行内元素,进行不定宽元素的属性设置

 3.设置 position: relative 和 left:50%。利用相对定位,将元素从左偏移50%实现居中。

——

隐性改变display类型:

1. position : absolute;

2. float:left 或 float:right;

不论什么元素(display:none除外),设置以上属性之一,该元素的display显示类型就会自动变为 以display:inline-block(行内块状元素)方式显示,此时可设置元素的 width 和 height,且默认宽度不占满父元素。

(如 a是行内元素,直接设置它的 width 无效,但设置 position:absolute 绝对定位后就可以设置宽度)


文本格式化标签:

<b>   文本加粗

<strong>文本加粗(加重语气)

<i>   斜体字

<em>   斜体(强调文字)

<big>   字体放大

<small> 字体缩小

<sub>   定义下标字

<sup>   定义上标字

<ins>   插入字(字体下划线)

<del>   字体删除线


"计算机输出" 标签:

<code> 定义计算机代码

<kbd> 键盘输入

<samp> 定义计算机代码样本

<var> 定义变量

<pre> 预格式化文本(会保留文本的多个空格)


引文、引用、及标签定义:

<abbr> 缩写

<address> 地址联系信息

<bdo> 文字方向(设置dir="rtl"为从右到左显示)

<blockquote> 长文本引用(不会自带双引号,但会两边自动缩进)

<q> 短句引用语(自带双引号)

<cite> 定义引用、引证

<dfn> 定义一个定义项目。


title=""属性规定关于元素的额外信息。标签中加上title属性可实现鼠标移过时出现提示文字,如<p title="提示">

——

<base>元素:

描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:  

<head>      

   <base href="//www.baidu.cn" target="_blank"/>      

</head>

提示:在HTML中,<base>标签没有结束标签。

——

HTML 颜色值RGB

由红(R)、绿(G)、蓝(B)组成。

每个颜色的最低值为0(十六进制为00),最高值为255(十六进制为FF)。

十六进制值写法:#号后加3个或6个十六进制字符。

三位数表示法为:#RGB,转换为六位数表示为:#RRGGBB

——

常见的 URL Schemes

http 超文本传输协议 以http开头的普通网页不加密

https 安全超文本传输协议 https 加密所有信息交换

ftp 文件传输协议 把文件上传或下载到网站

file 本地计算机上的文件。

——

HTML5 多媒体标签

<embed> 定义内嵌对象

<object>定义内嵌对象

<param> 定义对象的参数

<audio> 定义声音内容

<video> 定义视频或者影片

<source>定义media元素的多媒体资源(<video>、<audio>)

<track> 规定media元素的字幕文件或其他包含文本的文件 (<video>、<audio>)

——

audio音频设置

1.解决方法:

下例使用两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg来播放音频。如果失败,代码将回退尝试 <embed> 元素。

<audio controls height="100" width="100">

   <source src="horse.mp3" type="audio/mpeg">

   <source src="horse.ogg" type="audio/ogg">

   <embed height="50" width="100" src="horse.mp3">

</audio>


2.雅虎播放器使用免费,提供一个小型的播放按钮。

(1)如果使用它,要把这段JS插入网页底部:

 <script src="http://mediaplayer.yahoo.com/latest"></script>

(2)然后把MP3文件链接到页面中,JS会自动为每首歌创建播放按钮如:

 <a href="音频路径">音乐1</a>

 <a href="horse.mp3">音乐2</a>

 <script src="http://mediaplayer.yahoo.com/latest"></script>


3.用超链接

以下代码指向 mp3 文件链接。如果用户点击该链接,浏览器会启动"辅助应用程序"来播放该文件:

<a href="horse.mp3">音乐1</a>

——

video视频播放设置

1.最好的解决方法

下例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试以 mp4、ogg、webm其中一种格式来播放视频。如果都失败,则回退到 <embed> 元素。

HTML5的source + object + embed。

<video width="320" height="240" controls>

   <source src="movie.mp4" type="video/mp4">

   <source src="movie.ogg" type="video/ogg">

   <source src="movie.webm" type="video/webm">   

   <object data="movie.mp4" width="320" height="240">

<embed src="movie.swf" width="320" height="240">

   </object> 

</video>


2.优酷解决方案

如果要在网页中播放视频,可把视频上传到优酷等视频网站,然后在你的网页中插入 HTML代码即可播放视频:

 <embed  src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"

width="480" height="400" 

type="application/x-shockwave-flash">

</embed>


3.使用超链接

如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码指向 AVI文件的链接。如果用户点击该链接,浏览器会启动"辅助应用程序"如 Windows Media Player 来播放该 AVI 文件:

<a href="https://www.xxx.com/html/intro.swf">播放该视频</a>

——

HTML中如何键入空格?

1.用空格占位符 &nbsp;

但&nbsp有不间断的特性。即连续的&nbsp会在同一行内显示。即使有多个&nbsp,浏览器也不会把它们回车拆行。

2.段落间距<p>、换行<br/>

3.用JS动态给HTML添加空格:

例为照顾CSS样式或照顾特殊效果的实现。如果你不单单想让div之间是null,而是想动态添加空格的话,这样(jquery):

  $("#id").innerHTML += " ";

——

display: none; 元素不显示也不会占位

visibility: hidden;  元素只是隐藏但仍然占位置

visibility: collapse; 隐藏但不占空间,类似display:none;

——

clip 剪辑一个绝对定位的元素。

clip : rect(top, right, bottom, left);


CSS 伪类:

1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格)

在支持 CSS 的浏览器中,链接的不同状态可用不同的方式显示:

a:link {color:#FF0000;}   /* 未访问的链接 */ 

a:visited {color:#00FF00;} /* 已访问的链接 */ 

a:hover {color:#FF00FF;}  /* 鼠标划过链接 */ 

a:active {color:#0000FF;}  /* 已选中的链接 */


2.CSS类和伪类配合使用:

p : first-child{ }   匹配父级中第一个<p>子元素

p > i:first-child{ } 匹配所有<p>元素的第一个 <i> 子元素

p:first-child i{ }  匹配第一个<p>元素中的所有 <i> 元素

——

White-space属性:设置如何处理元素内的空白。

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 <pre>标签。

nowrap 文本不会换行,文本在同一行上继续,直到遇到<br/>为止。

pre-wrap 保留空白符序列,但是正常地进行换行。

pre-line 合并空白符序列,但是保留换行符。

inherit 从父元素继承 white-space 属性的值。

——

浏览器兼容前缀:

-moz-      火狐等使用 Mozilla内核的浏览器

-webkit-   谷歌、Safari等使用 Webkit内核的浏览器

-o-        Opera浏览器,使用Blink内核

-ms-       IE,使用 Trident内核

——

viewport 是用户网页的可视区域。


标签: htmlCSSCSS3