HTML+CSS

最新推荐文章于 2024-06-20 18:29:17 发布

First 007

最新推荐文章于 2024-06-20 18:29:17 发布

阅读量373

点赞数

分类专栏： Android 基础到实战项目 javaweb 文章标签： html css 注册表字体

本文链接：https://blog.csdn.net/kairui007/article/details/50500655

版权

javaweb 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Android 基础到实战项目

1 篇文章 0 订阅

订阅专栏

一、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选择器 > 类选择器 > 标签选择器

First 007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS

一、HTML部分目录内容【1】html规范【2】html操作思想【3】字体,h1-h6,水平线、空格标签【4】列表标签【5】图形标签【6】超链接标签【7】表格标签【8】表单标签【9】其他标签【10】注册表单案例【11】CSS 与 html结合方式【12】CSS 选择器【html规范】最外层标签内部有两大基本组成部分：和书写标签，有开
复制链接

扫一扫