HTML和CSS基础概述，第一周总结

时间：2015-11-29 23:00:32 阅读：299 评论：0 收藏：0 [点我收藏+]

标签：

2.标签

每一个标签都有开头和结尾
每一个标签都是用<>括起来的
每一个标签的结尾都必须用"/"结尾

3.网页的标签结构

<!DOCTYPE html> 
<html>
 <head lang="en">   
  <meta charset="UTF-8">   
  <title></title>
 </head>
 <body>
</body> 
</html>
4.展示HTML的各类标签
<html>
<head>
    <title>常用元素标签</title>
    <style type="text/css">
    /*CSS样式一般写在这儿,这是CSS注释*/
    body{
        color:red;
    }
    </style>
</head>
<body>
    <!-- html中的注释格式 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <br /><!-- 换行符(空标签) -->
    <strong>粗体文字(一般中果仁强调语义的字体)</strong>
    <p>段落</p>
    <blockquote>对长文本引用,左右会有缩进的效果</blockquote>
    <span>没有语义,用于表示特殊的样式</span>
    <!-- html代码忽略回车,以及1个以上的空格,多个空格应使用"&nbsp;",例子如下 -->
    <p>没想到输入&nbsp;空格&nbsp;这么麻烦,23333</p>
    <!-- pre元素,保留语言代码段,保留空格,回车,例子如下 -->
    <pre>
　　 1
　　+1
---------
　　 2
        </pre>
    <ul>
        <li>ul-li,无序的信息列表
        </li>
        <li>ul-li,无序的信息列表
        </li>
    </ul>
    <ol>
        <li>ol-li,有序的信息列表:1
        </li>
        <li>ol-li,有序的信息列表:2
        </li>
    </ol>
<table>
　　　　 <tr>
　　　　     <th>名字</th>
            <th>爱好</th>
        </tr>
        <tr>
            <td>彭彭</td>
            <td>吃</td>
        </tr>
        <tr>
            <td>丁满</td>
            <td>跳舞</td>
        </tr>
        </tbody>
    </table>
    <!-- target="_blank" 使用新页面打开 -->
    <a href="http://www.baidu.com"">打开百度</a>
     <!-- a标签超链接 -->
        <img src="图片http地址" alt="图片无法显示,用此文字替代" > 
　　<a name="maodian">对锚点的描述</a>
　　<a href="#maodian">到锚点标记的位置</a>

</body>
</html>

5.input
    <input type="text"/>文本输入框

type类型：

1. text    文本

2. password    密码

4. button    按钮

5. submit    带有提交功能的按钮

6. hidden    隐藏

7. image    图像

8. chaeckbox    多选框

9. radio    单选框

10. email    邮件

11. date    日期

12. number    数字
    用户名<input type="text"/>

     密码<input type="password"/>

    邮件<input type="Emile"/>

    网址链接<input type="url"/>

6.文本域、下拉框

用到的标签：select name option value

代码书写格式：

    <select name="" id="">

        <option value=""></option>
重置按钮
1. 用到的单词：reset（重置）

2. 代码书写格式：

        <form action="">

        <input type="reset"value="重置" />

        <form/>

7.CSS的三种用法

<link rel="stylesheet" href="url"/>
    <!-- 写法2"嵌入式CSS样式" -->
    <style type="text/css">
    p{
        font-size:20px;/*设置文字字号*/
    }
    </style>
</head>
<body>
    <p>好好学习,天天开心</p>
    <br />
    <!-- 写法3"内联式CSS样式" -->
    <p style="color:blue">好好学习,天天向上</p>

8.选择器
元素选择器
类选择器
ID选择器
属性选择器
包含选择器
通配选择器
元素选择器

所有的html元素都是可以作为元素选择器的

ID选择器
id相当于一个身份证每个人的身份证都是不同的

id就是唯一，是一个唯一的名称

类选择器

class类选择器

例：

< h1 class="left">一行< /h1>应用的时候名称应该是h1.left样式
< h1 class="right">二行< /h1>应用的时候名称应该是h1.right样式

伪类选择器

hoever

新建一个css格式文本

例：

p：hover{

文本样式

}

在html格式内输入：<link rel="stylesheet" href="css格式文本链接"/>

注意事项

多个声明必须用“；”隔开
多个声明用一个选择器用“，”隔开

属性与值之间用：隔开

每个选择器可以拥有多条声明

每个声明由一个属性和一个值组成

9.初生化样式

*{

morgin：0；

padding：0;

}

HTML和CSS基础概述，第一周总结

标签：

原文地址：http://www.cnblogs.com/lmke/p/5005677.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行