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

HTML+CSS

2016-01-12 00:23 549 查看
一、HTML部分

目录内容

【1】html规范

【2】html操作思想

【3】字体,h1-h6,水平线、空格 标签

【4】列表 标签

【5】图形 标签

【6】超链接 标签

【7】表格 标签

【8】表单 标签

【9】其他 标签

【10】注册表单案例

【11】CSS 与 html结合方式

【12】CSS 选择器

【html规范】

最外层标签

内部有两大基本组成部分： 和

书写标签，有开始标签 有结束标签，如 内容

标签书写，不区分大小写，如：也是没问题的，但是不建议这样写，大小写要统一

特殊标签(自闭合标签)，如：换行标签
，这类标签，一般是不需要书写内容的标签

【html操作思想】

数据放在 开始标签 和 结束标签 之间,标签作为容器将数据包围，不同的显示效果使用不同的标签属性，或者使用不同的标签。

下面是html的操作练习：

<html>
<head><title>作业</title></head>
<body>

<font size="5" color="red">字体标签</font>
<h1>标题标签</h1> <!-- h1-h6 自动换行 从 h1到h6字体从大到小依次减小  -->
<hr/ color="red" size="3"><!-- 两个属性 color水平线颜色 size:水平线粗细 -->
<a>特殊 字符</a>
<hr/>
<dl>
<dt>传智博客</dt>
<dd>java学院</dd>
<dd>人事部</dd>
<dd>学工部</dd>
</dl>
<!-- 有序列标签-->
<!-- ol中有 type属性 1:自然数序列 a:a.b.c 英文 序列 i:罗马数字序列  -->
<ol>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ol>
<!-- 无序列标签 -->
<!-- ul中有type属性:设置特殊符号 disc: .   circle :。  square:小方块 -->
<ul >
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ul>
<!-- 图形标签-->
<!-- 属性
src:图片的路径。
width：图片的宽度。
height：图片的高度。
border:图片的边框粗细。
alt:显示图片上的内容，很多浏览器不兼容

-->
<img src="图片的路径 ">
<!-- 超级链接标签-->
<!-- 属性
href:要连接的网址
target:超级连接的打开方式 _self:当前页面打开
_blank:在新网页打开
-->

<a href="#" target="_self">我是超级连接</a>
<hr/>
<!-- 表格标签 -->
<!-- table中的属性
border:设置表格线
bordercolor:设置表格线的颜色
cellspacing:设置单元格之间的距离
cellpadding:设置文字与单元格之间的距离
width：设置表格的宽的
height：设置表格的长度

-->
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="50" width="400"  height="200">
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>
<!-- 表单标签 -->
<!-- form属性
action:提交服务器的地址
method：提交的方式 get和post最为常用
-->
<form action="#" method="get">
<!--普通输入项-->
姓名：<input  type="text" name="username" /><br/>
<!--密码输入项-->
密码：<input  type="password" name="password" /><br/>
<!--单选输入项-->
<!-- checked="checked" 设置单选的默认值-->
性别：<input checked="checked" type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="2" />女 <br/>
<!--复选输入项-->
<!--设置默认值  checked="checked"-->
爱好：<input  type="checkbox" name="box" value="cg" />唱歌<input type="checkbox" name="box" value="dlq" />打篮球<br/>
<!--文件输入项-->
上传：<input type="file"/><br/>
<!--隐藏项-->
<!--
这个值不会显示在网页，上但是提交时可以提交到服务器上的
-->
<input type="hidden"/><br/>
<!--下拉选择项-->
<!-- selected="select":选择项 设置默认值-->
出生年月：
<select name="year">
<option value="1994">1994</option>
<option value="1995">1995</option>
</select>年
<select name="month">
<option value="8">8</option>
<option value="9">9</option>
</select>月
<select name="day">
<option value="2">2</option>
<option value="3">3</option>
</select>日
<hr/>
<!-- 文本域 -->
<!--
cols:列数
rows：行数
-->
自我描述：<textarea cols="30" rows="5" ></textarea><br/>
<!--提交按钮-->
<!--
value:设置提交按钮上显示的内容
-->
<input  type="submit" value="提交">
<!-- 重置按钮-->
<!--
value:显示重置按钮显示的内容。
-->
<input type="reset" value="重置">
<pre>天之道，损有余而补不足，是故虚胜实，不足胜有余。

其意博，其理奥，其趣深，天地之象分，阴阳之候列。</pre><br/>
<!--段落标签-->
<p>变化之由表，死生之兆彰，不谋而遗迹自同.</p>
<!--删除线-->
<s>变化之</s>
<!--下划线-->
<u>变化之</u><br/>
<!--加粗-->
<b>变化之</b>
<!--斜体-->
<i>变化之</i>
<!--自动换行 一般用于网页布局-->
<div>其意博，其理奥，其趣深，天地之象分，阴阳之候列。 </div>
<!--在一行进行显示 一般用于验证输入是否正确-->
<span>其意博，其理奥，其趣深，天地之象分，阴阳之候列。 </span>
</form>
</body>
</html>


二、CSS部分

【css与html结合方式】

1、在标签的属性位置: style=”color:red”

使用标签的style属性设置字体样式

2、使用标签

3、引入外部的css文件,在css文件中写css的样式代码

【css 选择器】

css优先级

后加载的起作用：

效果：

就近原则：

效果：

css 选择器

选择器学习的是一个写法，规则，是一种格式。

基本选择器(三个)

标签选择器

格式：

标签名称{

//css代码
}

如：

div{

background-color:red;
}

class(标签的class属性)类选择器

格式(className是标签的class属性的值)：

. className{
//css代码
}


如：

内容

.myDIV{
background-color:red;
}


id(标签的id属性)选择器

格式(divId是标签的id属性的值)：

id属性值{

//css代码


}

divId{

background-color:red;


}

选择器优先级

id选择器 > 类选择器 > 标签选择器
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css 注册表 字体
相关文章推荐
新的分享
章节导航