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

第一 html和css

2015-08-24 21:39 483 查看

任务

1、html学习

2、CSS学习

笔记：

1、使用开发工具

JavaWEB:使用myeclipse工具开发。

2、HTML技术

2.1、什么是html

HTML：超文本标记（标签）语言。

HTML这门技术主要是用来书写可以在浏览器这个软件中直接解析运行的文件。

我们书写的HTML文件，不需要编译，直接交给浏览器，浏览器就可以去解析HTML文件中的数据，然后把相应的效果显示在浏览器上。

HTML的主要功能：书写网页的。

2.2、创建html文件

我们使用相应的开发工具创建：

使用myeclipse自带的功能：选择项目右击，创建html文件（注意：先选择html4.01版本）。

2.3、html手册（api）介绍

HTML技术由W3C组织制定的。对外提供了相应的帮助文档。

2.4、html文件的书写规范

HTML语法规范：

HTML语言主要是用来书写可以在浏览器中显示的数据（文本）。而这些文本需要使用W3C组织提前定义好的一些标记（标签）。

标签的功能：主要是把页面上要显示的数据封装在标签中，然后通过标签给页面上的数据设置相应的样式。

一个合格的html文件：

<html> 必须以html开始

<head>

<title></title>标题标签

</head> head中书写的是页面中的一些其他的定义信息和属性数据，不会在浏览器的窗口中显示。

<body></body>body中的信息会显示在浏览器的窗口中

</html> 以/html结束（闭合）

2.5、html标签介绍

书写在html文件中的数据，都需要W3C组织提前定义好的标签来封装数据。学习html，主要是学习W3C组织制定的标签。

Html中的标签分类：

单标签：

格式：<标签名属性名=”属性值” 属性名=”属性值” 属性名=”属性值” />

双标签：

格式：<标签名属性名=”属性值” 属性名=”属性值” 属性名=”属性值” >标签中需要封装的数据</标签名>

Html中的标签不区分大小写。

Html中的注释：

格式：

注释内容不会再浏览器的窗口中显示，但是查看源代码可以查阅到。

2.6、常用标签介绍

2.6.1、font字体标签

2.6.2、特殊字符

2.6.3、标题标签

2.6.4、超链接

超链接：它主要是在当前页面上连接其他的资源（页面）。

超链接有2个功能：

1、连接其他的资源页面

2、当前页面的定位

<body>

<ahref="http://www.itheima.com" target="_blank">黑马程序员</a>
<ahref="www.itheima.com">黑马程序员</a>
<ahref="thunder://sdfjsdjfljsdklfjlwekr234kl3j.avi">大圣归来高清版下载</a>
<ahref="mailto://heima@heima.com">联系我们</a>
<ahref="javascript:void(0);"onclick="alert('你真点啊！！')">您敢点击我吗？</a>
<aid="top"></a>

2.6.5、列表标签

列表标签3类：

有序列表：

无序列表：

自定义列表：

2.6.6、img标签

Img标签可以在页面中嵌入图片：


<imgalt="美女图片"src="./imgs/1.jpg"width="200px"height="100px"border="20px"/>

2.6.7、表格标签

Table:表格标签：

表格中的行：tr标签

表格中的列：td标签

表格中的所有数据全部写在td中。td可以理解成表格中的单元格


<tablealign="center"border="1"width="70%"cellpadding="10px"cellspacing="0px"bordercolor="blue">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

2.6.8、跨行跨列表格

<tablealign="center"border="1"width="70%"cellpadding="10px"cellspacing="0px"bordercolor="blue">
<tr>
<td>1</td>
<tdcolspan="2">2</td>
</tr>
<tr>
<tdrowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>

练习：页面上显示联系人的信息

联系人的信息
姓名	年龄	电话	邮箱	地址	备注

2.6.9、框架标签

框架标签主要是把页面分成若干个子页面：


<framesetrows="18%,*">
<framesrc="top.html">
<framesetcols="25%,*">
<framesrc="left.html">
<framesrc="right.html"name="right">
</frameset>
</frameset>

2.6.10、表单标签

表单的功能：它主要是把页面中表单标签中封装的数据（需要用户填写），提交给服务器。

表单标签它是一组标签，不是一个标签：

<form>

书写用户书写的数据项标签

<input/> 这个标签上的type属性不同，可以完成不一样的效果

<select></select>下拉框

<textarea></textarea>文本区域

</form>

<body>

<formaction="http://127.0.0.1:8989"method="get">
用户名：<inputtype="text"/><br/>
密码:<inputtype="password"/><br/>
性别: <inputtype="radio"/>男
<inputtype="radio"/>女<br/>
爱好:<inputtype="checkbox"/>Java
<inputtype="checkbox"/>PHP
<inputtype="checkbox"/>IOS
<inputtype="checkbox"/>C++<br/>
<inputtype="button"value="按钮"/><br/>
<inputtype="hidden"value="隐藏的数据"/>
<inputtype="file"/><br/>

选择国籍:
<select>
<option>--请选择国籍--</option>
<option>中国</option>
<option>美国</option>
<option>英国</option>
</select><br/>
个人描述：
<textarearows="5"cols="20"></textarea><br/>

<inputtype="submit"value="注册">
<inputtype="reset"value="重置">

</form>
</body>

2.6.11、form表单的细节

form表单的细节：
1、如果要把form表单中的数据提交给服务器，要求所有form表单中的标签上必须有name属性
2、多个单选按钮的name属性的值必须一致
3、如果form中的数据是让用户选择的，这时必须书写value属性，手动的制定当前这个标签的数据
4、select下拉框中的数据提交：在select标签上写name属性，在每个option上写value
5、form表单的2种提交方式的区别：
get方式提交的数据会在浏览器的地址栏中显示，不安全
post方式提交的数据会在提交数据的请求体中

2.6.12、其他标签

<div>div数据</div>
<div>div数据</div>
<span>span数据</span>
<span>span数据</span>
<p>段落标签</p>
<p>段落标签</p>

3、CSS技术

3.1、CSS技术介绍

CSS：层叠样式表。主要功能：负责页面上的数据的展示样式效果设置。

查阅CSS手册：
CSS的手册主要提供的CSS代码中的的key和key对应的value值。

CSS代码的书写格式：
选择器{
Key:value；
Key：value;
....
}

3.2、CSS和html的结合方式

CSS是专门负责页面的样式，而页面的数据html标签在封装，我们必须让CSS代码和html标签之间产生关系。

3.1、第一种：

在几乎所有的html标签上都有style属性：

在style属性中书写css代码

3.2、第二种：

css和html的第一种结合方式，如果出现了多个标签需要相同的样式，这时会出现css代码严重重复：

可以把CSS代码从html标签上的style属性中抽离到html文件中：

格式：

<style type=”text/css”>

CSS代码

</style>

3.3、第三种：

如果多个页面上需要相同的CSS样式，这时可以继续把CSS从html中的style标签中抽离到CSS文件中：

3.4、第四种：

使用link标签引入CSS文件

Html：主要书写网页。

Html中常用的标签：

Font：设置字体样式

特殊字符：< >

超链接：a标签 href属性 target属性

图片标签：img alt 图片的描述信息 src 图片的位置

表格标签：table 行：tr 列 td

列表标签：有序列表ol 无序列表 ul 自定义列表dl dd dt

框架标签：frameset 可以把页面分成多部分

表单标签：form action表单中数据的提交位置 method 提交的方式（get、post）

CSS技术：主要是设置页面的样式。

代码书写格式：

Key:value；

CSS和html结合方式：

四种：1、在标签上使用style属性书写；2、在html文件中使用style标签书写；3、单独书写css文件，在style标签中使用@import导入；4、link标签引入外部的css文件。

1、CSS选择器

Css选择器：主要是用来选择css代码作用的html标签。

1.1、标签名选择器

在书写css代码的时候，在大括号的前面直接书写标签名

格式：

标签名{

CSS代码

}

1.2、id选择器

Html的标签上基本都有一个标准的属性id，我们可以通过id属性的值来选择当前这个标签。

格式：

#标签的id属性值{

CSS代码

}

注意：页面上的标签的id的属性值一定要唯一。主要是为后期的JavaScript技术和DOM技术结合使用提供数据。

1.3、class选择器（类选择器）

Html中的标签上都可以书写class属性，我们可以通过class属性的值选择当前这个标签

格式：

. class的属性值{

CSS代码

}

1.4、组合选择器

格式：

id选择器，class选择器，标签名选择器 .....{

CSS代码

}

1.5、关联选择器

格式：

父标签子标签{

CSS代码

}

1.6、伪元素选择器

css中已经给我们定义好了一些选择器，可以直接作用在某些标签上。

/*
伪元素选择器：
:link 标签为被访问之前的样式
:hover 鼠标悬停在某个标签上的样式
:active 鼠标点击，但没有松开时的样式（瞬间状态）
:visited 鼠标点击之后的样式效果设置
顺序问题：link visited hover active
l v h a
*/
a:link {
font-size: 20px;
text-decoration:
none;
color: blue;
}
a:visited {
font-size: 16px;
text-decoration:
line-through;
color: gray;
}
a:hover {
font-size: 30px;
text-decoration:
overline;
color: red;
}
a:active {
font-size: 40px;
text-decoration:
underline;
color: green;
}

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

标签：

相关文章推荐

新的分享

章节导航