您的位置：首页 > Web前端 > HTML

html基本语言

2016-03-01 12:30 337 查看

html表单：用于向服务器传输数据

1、 <form> </form>

常用属性：action ---提交的目标服务器（网址） method--提交的方法get/post，get（默认，以url提交，就是以地址栏的方式提交），post（通过报文提交）

1）表单内的框架控件：<input/>

重要属性type:值决定控件的效果

text: 文本框

password ：密码框

radio ：单选框可用name分组，相同组使用相同的name值；可以用<legend></legend>给分组赋名称，并用<fieldset></fieldset>加边框分组

checkBox：多选框

submit：提交控件，默认value为“提交”，可通过value属性给控件名赋值

reset ：重置控件，默认value为“重置”，可通过value属性给控件赋值

file ：文件选择框

2）不用<input/>包含的控件：

<select></select> 下拉框 ----属性size可设置显示个数

下拉框的子控件：<option> 子控件名 </option>

子控件可以分组，用<optgroup label="组名"> </optgroup> 包起来

<textarea></textarea> 条款框将要写入的条款放入此标签内，并设置标签属性

cols: 显示列 rows :显示行

三、div + span 网页布局

熟练掌握css + div布局

四、框架标签：将几个页面组合起来

<frameset></frameset> : 属性 cosl ---按列分 rows ----按行飞，值为百分比

子页面标签：<frame></frame> 属性：src --- 子页面的值 noressize ---- 值也为noressize，禁止页面分割区移动

注意：框架标签是用frameset代替了body，所以这种网页没有body标签

例子：网页简介在上面占行的8%，左边的网页里面有几个超链接，占整列的15%，右边可以显示左边点击的超链接，设置超链接的target属性等于right即可

[html] view plain copy

<html>
<head>
<title>框架标签</title>
</head>
<frameset rows="8%,*">
<frame src="head.html" noresize="noresize"></frame>
<frameset cols="15%,*">
<frame src="left.html" noresize="noresize"></frame>
<frame src="right.html" name="right"></frame>
</frameset>
</frameset>
</html>

五、CSS Cascading Style Sheet 的缩写，意思是“层叠样式表”

CSS能让网页制作者有效的定制、改善网页的效果。CSS是对html的补充，网页设计师曾经为无法很好的控制网页的显示效果而倍感苦恼，CSS的出现解决了这个问题

CSS实现了网页内容和页面效果的彻底分离！

1、CSS写入HTML代码中的三种方式：

1）内联样式表：在HTML标签内写入样式

2）嵌入样式表：内联样式一般是单个标签写入，嵌入样式表可以分类写入，同一类统一写入，优先级低于内联
在<head></head> 标签中写入：

[html] view plain copy

<style type="text/css"?>
p{ //所有的p标签

[html] view plain copy

background-color:yellow;font-size:xx-small;
}
</style>

3）外部样式表：通过新建“样式表”，然后拖入HTML的head标签中，这样就可以链接到HTML代码中

外部样式表也可以分类去设置样式，还可以下载别人的样式来使用，优先级低于前面两种
样式表中写入：

[html] view plain copy

tt{
background-color:green;
font-size:xx-large;
}
p{
background-color:black;
}

将样式表拖入head标签中时出现的引用代码：

[html] view plain copy

<link href="TestCss.css" rel="stylesheet" />

2、样式规则的选择器：帮助我们获得页面上要设置的某个元素

选择器1：HTML Selector 默认选择器（全选）在样式设定里设定的某类标签，全部都按此设定的效果显示
选择器2：Class Selector 类选择器在某一类标签里有一部分想要单独设置样式，可以内联一个class值，然后在嵌入样式中单独写一个样式

[html] view plain copy

p {
background-color: yellow;
}
p.tt1{ //p可以省略

[html] view plain copy

background-color:pink;

选择器3：ID Selector ID选择器用法与class基本相同，区别在于id 号用范围更广，而且最好是唯一的，class多用于同类；单一用id，多处用class

选择器4：关联选择器如果有一个元素有两个标签嵌套，单独设置他可以不用id和class，直接用两个标签的名字，中间加一个空格

[html] view plain copy

<p><b>吴玉双是我的好老婆！</b></p>

在样式中：

[html] view plain copy

p b{
background-color:orange;
}

选择器5：组合选择器当网页中一堆元素想要设置相同的样式时，不用一个一个写，可以将他们的标签名全部一起设置，以逗号“，”隔开

[html] view plain copy

h1,h2,h3,h4,h5,h6,td{
background-color:red;
}

选择器6：伪元素选择器

伪元素选择器是指：对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。

目前常用的伪元素有以下几种：

A -----active 选中超链接时的状态

A-----hover 光标移动到超链接的状态

A-----link 超链接的正常状态

A-----visited 访问过的超链接状态

P-----first-lint 段落中的第一行文本

P-----first-letter 段落中的第一个字母

3、CSS中的样式属性

CSS中的属性非常多，大体上可以分为以下几个类：

1）字体-----大小、颜色、显示效果等

font-family:：设置字体系列 ---“宋体、楷体。。。

font-size ：设置字体大小 -----可以用数字，也可以用固定的标记符：xx-small、x-small、small、medium、large、x-large、xx-large，从小到大

font-style ：设置是否倾斜 ---- Normal、Oblique（斜体）、Italic（意大利斜体）

text-decoration：设置文字下划线、上划线、中划线、闪烁效果

注意：描述链接时可以，文本现已不支持，改用border-left、border-top、border-bottom等

font-weight：设置字体粗体的磅值，值有：normal、bold、bolder、lighter、100~900

2）背景：包括背景颜色、背景图像、以及背景图像的控制

background-color：设置背景颜色，transparent表示透明的背景色

background-image：设置元素的背景图像

background-repeat：确定背景图像是否以及如何重复，如果值为：no-repeat，表示只出现一次

repeat ：在水平和垂直方向上重复

Repeat-x 和Repeat-y：分别在水平或者垂直方向上重复

background-attachment：确定背景图像是否跟随内容滚动，值为fixed，表示图像固定；值为scroll，表示跟随内容滚动

background-position：指定背景图像的水平位置和垂直位置。水平位置：left、center、right；垂直位置：top、center、bottom；也可以是数值

3）文本：文本属性包括：文字间距、对齐方式、上标、下标、排列方式、首行缩进等

word-spacing：单词的间距（空格隔开的单词）

letter-spacing：每个字的间距，包括字母

text-align：设置文本放在本行的左边、中间、右边。值可以是：left、right、center、justfy

text-indent：设置首行缩进值

line-height：设置文本行高。

4）位置

5）布局

6）边缘

7）列表

六、简单布局

七、开学典礼和导航练习

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航