6.22- html标签及css简介

HTML与CSS基础详解

最新推荐文章于 2025-09-09 18:53:59 发布

转载最新推荐文章于 2025-09-09 18:53:59 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/frozeninferno/p/7079545.html

文章标签：

#php

本文详细介绍了HTML中的base标签、form表单及input输入域等元素，并深入探讨了CSS的三种使用方式、基础选择器及其优先级等内容。

base标签

网页中所有连接的基础链接，base标签里面的链接会影响页面中的所有的链接，除非链接设置了http协议。base标签位于head标签的内部。

<head>
<meta charset="UTF-8">
<title>base</title>
<!-- 基础链接 -->
<base href="http://www.sina.com">
</head> 
<body>
<!-- http  file -->
    <a href="http://www.baidu.com">百度</a>
    base标签不会影响链接
    <img src="./Penguins.jpg" alt="企鹅">
    base标签会影响链接     
</body>
</html>

form标签

表单

<body>
<form action="01.php" method="post">
    <input type="text" name="user">
    <input type="submit">
</form>
</body>

form标签中的常用属性：

action属性：设置将表单中的数据提交给谁。如果action属性值为空，点击提交后会提交到当前网页中。

method属性：设置提交给后台的方法 get/post。

当method属性值为get的时候，数据通过url（统一资源定位符）传递到后台中；当属性值为post时，数据通过服务器来传输。当method属性的值为空时，默认属性值为get。

输入域input

type属性属性值：

button：产生一个不会产生任何作用的按钮，需要和事件关联。

file：产生一个能够上传文件的按钮。

hidden：隐藏产生的可输入区域。

text：文本类型，产生区域能够写入文本。

password：产生一个输入密码的区域，输入的文本会用·显示。

radio：产生一个单选框，可以利用name属性对多个单选框进行分组，同一组的多个单选框只能有一个背选。

checkbox：产生一个多选框，可以利用name属性对多个值进行分组。

image：产生一个图片，其作用是提交按钮。

reset：重置，可以使的网页上所有内容恢复成默认值。

submit：提交按钮。

alt属性

定义当按钮为图片时，图片的替代文字。

src属性

定义当按钮为图片时，图片的链接地址。

checked属性

无值属性，只需要写出来，定义默认选项。

disabled属性

无值属性，禁用当前区域。

readonly属性

无值属性，对当前输入域只读。

maxlength属性

定义输入域字符的最大长度。

name属性

定义当前输入域的名字。

value属性

定义当前输入域的默认值。

文本输入区域

<textarea></textarea>

cols属性

规定可见列数

rows属性

规定可见行数

disabled属性

禁用当前文本输入区

name属性

当前文本区域的名字

readonly属性

当前文本区域只读

按钮

<button></button>

button的type类型默认为submit。

disabled属性

禁用此按钮。

name属性

按钮名字。

type属性

按钮类型：button，reset，submit。

value属性

按钮上显示文本的默认值。

下拉菜单

<select></select>

css

什么是css？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

样式表：负责美化。

层叠：样式不会消失只会被覆盖。

css使用方式

第一种：在标签中使用style属性。

<h1 style="color:red;">Hello,World</h1>
改变字体颜色为红色。

第二种：使用style标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css使用方式</title>
<!-- css第二种使用方式 使用"style标签" -->
<style>
    /*css注释*/
    /*css选择器 */
    p {
        color: blue;
    }
</style>
</head>
<body>
<!-- 段落 -->
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</body>
</html>

第三种：

在.html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css使用方式</title>
    <link rel="stylesheet" href="01.css">
</head>
<body>
    <div>
        <!-- div标签本身没有任何语义，它是一个无意义标签 -->
        社会你柳哥，人狠话不多
    </div>
</body>
</html>

在01.css文件中

div {
    color: purple;
}

将div标签内的部分字体编程紫色。

注意：在网页设计中，要求结构与样式分离，所以最好使用第三种方法css使用方法。

css基础选择器

html选择器

通过html标签来选择元素。

注意：

所有的html标签都能当做选择器。
无论标签藏得多深都会被选中。
选择的是所有的标签而不是具体的某个标签。所以说我们通过html标签选择器来设置的都是一些共用性的问题。
所有的p和h6标签都会被选中，字体改变颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*html标签选择器 */
        p {
            color: red;
        }

        h6 {
            color: blue;
        }

    </style>
</head>
<body>
    <!-- 不够精确 -->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </p>
    <p>
        我是第二个p标签
    </p>

    <p>
        adasdas
    </p>
    <h6>我是h6</h6>
</body>
</html>

id选择器

任何的标签都可以有id属性和属性值。
id命名中，大小写敏感，id的名字中可以有字母、数字、下划线，但是要以字母开头。
id命名方法：驼峰命名法。小驼峰：testHeader；大驼峰：TestHeader；test-header；test_header。
id命名不能重复。
id是全局属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*id选择器*/
        #d1 {
            color: green;
        }
    </style>
</head>
<body>  
    <div id="d1">
        我是一个div
    </div>
</body>
</html>

class选择器

任何标签都可以使用class属性（class属性也是一个全局属性）。
class属性名可以重复使用。
一个class属性中，可以有多个class属性值。
最常用的选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*class选择器*/
        /*class可以重复使用*/
        .e1 {
            color: blue;
        }
    </style>
</head>
<body>  
    <em class="e1">我是em，表示强调</em>
    <strong class="e1"> 我是strong</strong>
</body>
</html>

选择器冲突

当多个选择器同时对一个文本部分进行美化时，谁更精确就听谁的。

精确度：id选择器 > class选择器 > html选择器

通配符*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            /*通配符 选择网页中的所有标签*/
            color: red;

        }
    </style>
</head>

<body>
    <a href="##" >我是a标签</a>
    <div >我是div</div>
    <p >我是p标签</p>
    <span >我是span标签</span>
</body>
</html>

通配符将所有的标签都都进行美化。

span标签与div标签的区别

div标签是用来把网页分割成部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 1. 二者都是无意义标签
         2.div  切割  
           span 跨度
         3.table  div + css
    盖房子  html骨架   
    css装修   div是砖  
    -->
    <div>
        我是div标签
    </div>

    <span>我是span标签</span>
</body>
</html>

转载于:https://www.cnblogs.com/frozeninferno/p/7079545.html