网页组成
  • 结构（HTML）:超文本标记语言
  • 表现: (CSS) :层叠样式表
  • 行为: JavaScript
  • 一个良好的网页要求 结构，表现，行为三者分离
HTML的基本语法
  • HTML中的标签分为成对出现的标签和字结束标签
  • 标签不区分大小写，但建议小写
  • 标签出现的标签必须正确关闭
  • 标签可以嵌套，但不能交叉嵌套
  • 属性必须有值且必须加引号
  • 注释不能嵌套
HTML中常规用标签
  • 标题标签(一共6个)
<h1></h1> ~<h6></h6>
  • div标签
<div>我是div标签，用来布局，默认占用浏览器的一整行</div>
  • 段落标签
<p> 段落标签，默认占用浏览器一整行，而且前后要空一行</p>
  • form表单
 <form action="success.html" method="post">
        <!-- 表单中的表单项使用input标签来表示，不同的表单项通过input中的type属性来指定 -->
        <!--
            1.必须为每一个表单项设置name属性值，name属性值可以任意指定
            2.用户输入的数据通过name属性值进行携带，并以键值对的形式发送到服务器，多个键值对之间通过 & 符号进行分割
                    如：username=admin&pwd=123456
         -->
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="pwd"><br>
         <input type="submit">
 </form>

CSS基本语法

  • CSS由选择器和声明组成，声明由属性和值组成，属性和值之间使用冒号分割；多个属性之间使用分好分割
 p{
        color: green;
        font-size: 60px
  }
  • 写在style标签中：
<style type="text/css">
    p{
        color: green;
        font-size: 60px
    }
</style>
  • 引入外部css文件
<link rel="stylesheet" type="text/css" href="css.css">
CSS选择器
  • 基本选择器
p{color:red}
    -将p标签中的内容的颜色设置为红色
  • id选择器
#p1{color:green}
    -将id属性值为p1的标签中的内容设置为绿色
  • 类选择器
.p2{color:blue}
    -将class属性值为p2的标签中的内容设置为蓝色
  • 分组选择器
分组选择器：将各个选择器中间使用逗号分隔，然后统一设置样式
  • css中颜色表示


    * 1）使用英语单词

      * 红色：red
    * 2）使用RGB值

      * 红色：rgb(255,0,0)
    * 3）使用十六进制数

      * 红色：#FF0000=#ff0000=#F00=#f00