HTML_CSS_JavaScript_css href引用ajvascript-CSDN博客

本文链接：https://blog.csdn.net/qwareweihp/article/details/43446747

<meta>用于设置消息头

<meta http-equiv="content-type" content="text/html;charset=utf-8">表示浏览器读到的是一个 html 格式文件，字符编码是 utf-8，http-equiv属性 :设置消息头，content属性：设置消息头的值

eg:<meta http-equiv="refresh" content="3";url='http ://bbs.tarena.com.cn'>

refresh:刷新，content：刷新的频率，每间隔3秒重新加载页面（3 秒钟后跳转到 bbs.tarena.com.cn）

<script>引入脚本，<script src="c1.js"></script>
<br/>表示换行
<body>中的标签：

<html>

<body>

<table>

<form>

</body>

</html>

几个重要的标记：

链接<a href>:<a href="url地址" target="" title="">描述性的文字</a>

href 属性：指定链接的地址

target 属性：指定在哪个窗口打开链接，值可以指定为：
slef：在当前窗口中打开（缺省）
blank：新窗口中打开
title：提示信息（鼠标放在链接上的提示信息）

使用图片作为链接

</a>

src：对于 img 标签，src 指定图片的地址
wdith：宽度
height：高度
border：边框（为 0 表示没有边框）

发送邮件：<a href="mailto:XXX@126.com?subject=hello">给我发邮件</a>

点击该链接启动发送邮件的默认软件（如 Outlook）

锚点(在同一个页面内部跳转)

<a href="#top">跳转到top</a>

2.表格

表格的基本结构

</tr>

</table>

border : 边框的宽度，单位是像素（缺省值是 0）
width : 表格的宽度,可以用百比分(表示该表格占父标记的宽度)，也可以是绝对值

cellpadding : 单元格内容与单元格之间的空隙

cellspacing : 单元格与单元格之间的空隙

align : 水平对齐，值有"center","right","left"

colspan : 跨列合并单元格

rowspan : 跨行合并单元格

valign : 垂直对齐，值有"top"、 "middle"、 "bottom"

表格的完整结构

<table>

<caption>表格的标题</caption>

</table>

thead、 tfoot 这两个标记可以不出现，如果出现，只能出现一次
tbody 可以出现多次，至少也要出现一次
caption 只能出现一次或者不出现

3.表单：一般是用来收集用户信息的；

input 标记

非input标记

</from>

action 属性 : 表单提交之后由哪一个程序来处理
method 属性 : 表单提交方式
enctype 属性 : 设置表单的 MIME 编码

表单的主要内容标记

input标记：

1）文本输入框：<input type="text" name="" value=""/>type 属性： input 标记的具体类型

type 内容可以不写，默认是文本框

name 属性：标记的一个名称，该名称用于生成一个请求参数，

如果没有命名，则浏览器不会为该数据发送给服务器

value 属性 : 缺省值

2)密码输入框：<input type="password" name=""/>

3)单选：<input type="radio" name="" value="" checked=""/>

4)多选：<input type="checkbox" name="" value="" checked=""/>

单选按钮应是互斥的，只能选择其中一个

同一组单选按钮，name 必须相同

value 属性：发送给服务器端的值

checked 属性：就一个值"checked",表示缺省被选上

5）文件上传：<input type="file" name=""/>

6)提交按钮：<input type="submit" value="Confirm"/>

value 属性：按钮上面的文字

当点击提交按钮时，浏览器默认情况下，会将表单中的数据发送给服务器

7)重置按钮：<input type="reset" value="reset"/>

当点击提交按钮时，浏览器会将输入的数据清空

8）隐藏域：<input type="hidden" name="" value=""/>

不会在界面上显示出来，一般用于向服务器传送数据。

name 属性设置参数名

value 属性设置参数值

9）普通按钮：<input type="button" value=""/>

value 属性：按钮上面的文字，点击该按钮，浏览器什么都不做需要编程实现功能

非input标记：

1）下拉列表：

</select>

value 属性：是提交给服务器的值

multiple 属性 : 就一个值 "multipart"

设置该属性值以后，下拉列表变成了一个多选框

2)多行文本输入框：<textarea name="" cols=""></textarea>

4.列表：

无需列表

<ul>

</ul>

有序列表

<ol>

</ol>

列表也可以嵌套使用

5.窗口划分frameset 和 frame

语法：

frameset标记不能够与body标记同时出现
rows 属性：将窗口划分成几行
cols 属性：将窗口划分成几列
frame标记定义子窗口,其中,src指定加载的页面

Iframe在当前窗口当中嵌入一个子窗口

6.网页的结构与数据，应该写在.html文件里

网页的表现形式，应该写在.css 文件里
网页的行为，应该写在.js 文件里
这样做的原因是，将网页的数据、表现、行为分离，方便代码的维护

7.常用的选择器
标记选择器(简单选择器)
标记的名称{
属性名：属性值 ;
... ;
}

eg:Style.css

Html01.html

演示效果

8.选择器的分组

h1 , h2 , h3{
color : green ;
}
对以","隔开的选择器施加相同的样式

eg:Style.css

Html01.html

演示效果

9.两个关键属性

1) display
display的3个值
none : 不显示该标记
block : 按块标记的方式显示
inline : 按行内标记的方式来显示
2) position
position的3个值
static(缺省值)：浏览器在默认情况下，会按从左到右，从上到下来依次摆放各个标记
absolute：相对父标记偏移
relative：先按照默认的方式摆放，然后再偏移

10.块标记和行内标记

1)块标记（另起一行）
常见的块标记：
div
p
img
form
table
h1...h6
ul
li
2)行内标记（不用另起一行）
常见的行内标记
span
strong
a

11.一些常见的属性

文本：

font-size :30px ; /* 字体大小 */
font-family : "宋体" //字体
font-style : italic/normal //风格
font-weight : 100; //粗细 100~900
text-align :center; //对齐方式 left , right , center
text-decoration : underline; //加下划线
cursor : pointer ; //光标的形状 wait

背景：

background-color : red ; //背景颜色
background-image : url(images/b1.jpg); //背景图片
background-repeat : no-repeat ; //平铺方式 repeat-x repeat-y
background-position : 20px 10px ; //位置
background-attachment : fixed ; //依附方式 scroll(缺省)
也可以简化为：
background : 背景颜色背景图片平铺方式依附方式水平位置垂直位置

边框：

border : 1px solid red ; //宽度风格颜色
border-left :
border-right :
border-bottom :
border-top :

定位：

width : 100px ;
height : 200px ;
margin : //外边距
margin-left : 20px ;
margin-top : 30px ;
margin-right : 40px ;
margin-bottom : 50px ;
也可以简化为
margin : 30px 40px 50px 20px; //顶、右、底、左
此外，还有这样一些形式
margin : 0px;
margin : 20px auto; //上、下各20px，左右平均分配
//一般用于居中
padding: //内边距
padding-left : 20px;
padding-top : 30px;
padding-right:40px;
padding-bottom : 50px;

也可以简化为 :
padding :30px 40px 50px 20px ; //顶、右、

还可以 :
padding : 0px ;

注意：子标记会将父标记撑开

链接的伪样式
a : link { color : red}       没有访问时
a : visited { color : blue}   访问后
a : active { color : lime}    鼠标点击但还没有放开时
a : hover { color : aqua}   鼠标指向时 //常用