HTML+CSS

来源：互联网发布：淘宝买家删差评编辑：程序博客网时间：2024/06/09 13:44

一、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>特殊&nbsp;字符</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选择器 > 类选择器 > 标签选择器

0 0