01.HTML_CSS

01.HTML_CSS

一、网页的组成

• 结构（HTML）：超文本标记语言，是一种描述网页的语言
• 表现（CSS）：层叠样式表，是用来美化页面的
• 行为（JavaScript）：使页面有动态效果
• 一个良好的网页要求结构、表现、行为三者分离

二、HTML

1.基本语法

• HTML中的标签分为成对出现的标签和自结束标签
• 标签不区分大小写，但建议小写
• 标签可以嵌套，但不能交叉嵌套
• 成对出现的标签必须正确关闭，即有开始标签，一定要有结束标签
• 属性必须有值，且值必须加引号
• 注释不能嵌套

2.常用的标签

• 标题标签，一共六个

  • 标签的字体会被加粗，并且前后会空一行

  <h1>一级标题</h1> <h2>二级标题</h2> ... <h6>六级标题</h6>
  

• div标签

  • 没有特殊的语义，主要用来布局

  <div>我是div标签，我主要用来布局，我默认要占用浏览器的一整行</div>
  

• p标签

<p>我是一个段落，我默认也要占用浏览器的一整行，而且前后也要空一行</p>

• 转义字符（实体）

小于：<	大于：>	空格： 	版权符：©

• 无序列表：主要用来做导航栏

<ul>
	<li>网页</li>
	<li>音乐</li>
	<li>视频</li>
</ul>	

3.插入图片

• 使用img标签向网页中插入一张图片

  • alt属性：用来设置当图片无法显示时的描述性文字
  • src属性：用来设置图片的路径

  <img alt="" src="" /> 
  

4.超链接

• 使用a标签创建一个超链接
  • href属性：用来设置要跳转的页面的路径
  • target属性：用来设置要跳转的页面在何处打开
    • _self：默认值，在当前标签页打开
    • _blank：在新的标签页打开
• 我们可以通过base标签的target属性统一设置某个页面中所有超链接的打开方式

<a href="" target="">点我有惊喜</a>

5.表格

• 使用table标签创建一个表格
  • 表格中的行使用tr标签表示
  • 表格中的表头使用th标签表示
  • 表格中的列（单元格）使用td标签表示
• 使用rowspan属性设置跨行合并单元格
• 使用colspan属性设置跨列合并单元格

 <!--使用table标签创建一个表格
        border属性：设置边框
        cellpadding属性：设置单元格的大小
        cellspacing属性：设置单元格之间的间隙
    -->
   <table border="1" cellpadding="10" cellspacing="0">
       <!--表格中的行使用tr标签表示-->
       <tr>
           <!--表格中的表头使用th标签表示-->
           <th>姓名</th>
           <th>阵营</th>
           <th>职业</th>
           <th>武器</th>
       </tr>
       <!--表格中的行使用tr标签表示-->
       <tr>
           <!--每行中的列使用td标签表示-->
           <td>刘备</td>
           <!--跨行合并单元格使用rowspan属性进行配置-->
           <td rowspan="5">蜀</td>
           <td>打野</td>
           <td>雌雄双股剑</td>
       </tr>
       <!--表格中的行使用tr标签表示-->
       <tr>
           <!--每行中的列使用td标签表示-->
           <td>诸葛亮</td>
<!--           <td>蜀</td>-->
           <!--跨列合并单元格使用colspan属性进行设置-->
           <td colspan="2" align="center">法师</td>
<!--           <td>羽扇</td>-->
       </tr>
       <!--表格中的行使用tr标签表示-->
       <tr>
           <!--每行中的列使用td标签表示-->
           <td>关羽</td>
<!--           <td>蜀</td>-->
           <td>上单</td>
           <td>青龙偃月刀</td>
       </tr>
       <!--表格中的行使用tr标签表示-->
       <tr>
           <!--每行中的列使用td标签表示-->
           <td>张飞</td>
<!--           <td>蜀</td>-->
           <td>辅助</td>
           <td>丈八蛇矛</td>
       </tr>
       <!--表格中的行使用tr标签表示-->
       <tr>
           <!--每行中的列使用td标签表示-->
           <td>赵云</td>
<!--           <td>蜀</td>-->
           <td>刺客</td>
           <td>亮银枪</td>
       </tr>
   </table>

6.表单

• 使用form标签创建一个表单
  • action属性：用来设置服务器的地址
  • method属性：用来设置发送请求的请求方式

<!--使用form标签创建一个表单
        action属性：用来指定服务器的地址
        method属性：用来指定请求方式
            值的说明：
                get：默认值。将发送一个GET请求，表单中的数据通过浏览器的地址栏进行传输
                post：将发送一个POST请求，表单中的数据通过请求体进行传输
    -->
    <form action="success.html" method="post">
        <!--1.表单中的表单项使用input标签来表示，不同的表单项通过type属性指定-->
        <!--2.必须给表单项指定name属性值，用户输入的数据通过name属性值进行携带，并以键值对的形式发送到服务器，多个
            键值对之间使用 & 符号分隔，例如：username=admin&password=123456
        -->
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        <!--
            1.要想让单选按钮单选必须将多个单选按钮设置为一组，即将它们的name属性指定为同一个值
            2.单选按钮提交的是value属性值，所以必须指定value属性值
            3.通过设置属性checked="checked"让单选按钮默认被选中
        -->
        性别：<input type="radio" name="gender" value="man" checked="checked">男
        <input type="radio" name="gender" value="women">女
        <br>
        <!--
            1.要将多个复选框设置为一组，即将它们的name属性指定为同一个值
            2.复选框提交的也是value属性值，所以必须指定value属性值
            3.通过设置属性checked="checked"让复选框默认被选中
        -->
        你的爱好：
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" name="hobby" value="rap" checked="checked">唱跳
            <input type="checkbox" name="hobby" value="singing">唱歌
        <br>
        你喜欢的女明星
            <select name="star">
                <option>杨幂</option>
                <!--
                    如果没有指定value属性值，提交的就是option标签中的文本值
                    如果指定了value属性值，提交的就是value属性值
                -->
                <option value="lzl">林志玲</option>
                <option>迪丽热巴</option>
                <!--通过设置属性selected="selected"让下拉列表默认被选中-->
                <option selected="selected">古力娜扎</option>
                <option>郑爽</option>
            </select>
        <br>
        <!--重置按钮-->
        <input type="reset">
        <!--提交按钮
            value属性：指定按钮上显示的文字
        -->
        <input type="submit" value="登录">
    </form>

三、CSS

1.基本语法

• CSS样式由选择器和声明组成，声明由属性和值组成，属性和值之间使用冒号分隔；多个属性之间使用分号分隔

选择器{属性1:值1;属性2:值2}	例如：	p{color:red;font-size:30px}

• CSS样式嵌入的方式

  • 1）写在标签的style属性中：结构与表现相耦合，不建议使用

  <p style="color: red;font-size: 30px">师傅领进门，修行在个人</p>
  

  • 2）写在style标签中，style标签放在head中：开发阶段使用

  <style>
  		p{
  			color: red;
  			font-size: 20px
  		}
  	</style>
  

  • 3）引入外部的css文件：项目上线之后使用

  <link rel="stylesheet" type="text/css" href="style.css">
  

2.基本选择器

• 标签选择器

  • 格式：就是HTML标签

  p{color:red}
  	-将段落中的内容设置为红色
  

• ID选择器

  • 格式：#id属性值

  #p1{color:green}
  	-将id属性值为p1的标签中的内容设置为绿色
  

• 类选择器

  • 格式：.class属性值

  .p2{color:blue}
  	-将class属性值为p2的标签中的内容设置为蓝色
  

• 选择器分组

  • 格式：将各个选择器使用逗号分隔，将它们设置为一组，统一设置样式

  #p1,.p2{font-size:66px}
  	-将id属性值为p1和class属性值为p2的标签中的字体的大小设置为66像素
  

3.颜色的表示方式

• 1）使用英文单词
  • 红色：red
• 2）使用rgb值
  • 红色：rgb(255,0,0)
• 3）使用十六进制数
  • 红色：#FF0000或#ff0000或#F00或#f00