HTML+CSS基础知识2

HTML+CSS基础知识2

    • 1.嵌套列表
    • 2.表格标签
    • 3.表格属性
    • 4.表单标签
    • 5.表格与表单的组合
    • 6.`
      `与``
    • 7.css的基础语法
    • 8.css样式的引入方式
    • 9.css中的颜色表示法
    • 10.css背景样式
    • 11.css背景样式
    • 12.css文字样式
    • 13.css段落样式
    • 14.css复合样式
    • 15.css选择器

1.嵌套列表

列表之间可以互相嵌套形成多层级列表
eg.

<ul>
    <li>江苏省
        <ul>
        <li>南京市li>
        <li>扬州市li>
    li>
    <li>安徽省
        <li>合肥市li>
        <li>黄山市li>
    ul>
    li>
ul>

HTML+CSS基础知识2_第1张图片

  <dl>
        <dt>中国dt>
        <dd>
            <dl>
                <dt>江苏省dt>
                <dd>扬州市dd>
                <dd>南京市dd>
            dl>
            <dl>
                <dt>安徽省dt>
                <dd>合肥市dd>
                <dd>黄山市dd>
            dl>
        dd>   
dl>

HTML+CSS基础知识2_第2张图片

<dl>
        <dt><strong>好美味小吃strong>dt>
        <dd>
            <ul>
                <li>小吃类
                    <ul>
                        <li>煮面干li>
                        <li>蛋炒饭li>
                    ul>li><li>卤味类
​                    <ul><li>鸭肠li><li>鱿鱼li>ul>li><li>套餐类
​                <ul><li>猪肉拌饭li><li>猪脚拌饭li>ul>li><li>炖罐类
​                <ul><li>羊肉枸杞li><li>猪心莲子li>ul>li>
​                
​            ul>
dl>

HTML+CSS基础知识2_第3张图片
(嵌套列表必须要嵌套完整,内部依旧使用完整的结构体系)

2.表格标签

:表格的最外层容器

:定义表格行

````

注:在一个table中,

只能出现一次,可以出现多次

 <table>
        <caption>天气预报caption>
     <tHead>
        <tr>
            <th>日期th>
            <th>天气情况th>
            <th>出行情况th>
        tr> 
     <tHead/>  
     <tBody>    
        <tr>
            <td>2020.01.02td>
            <td>td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2020.01.03td>
            <td>td>
            <td>不宜出行td>
        tr>
     <tBody/>    
    table>

HTML+CSS基础知识2_第4张图片

3.表格属性

border:表格边框

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

colspan合并列

rowspan:合并行

align:左右对齐方式(left、center、right)

valign:上下对齐方式(top、middle、bottom)

 <table border="2">

HTML+CSS基础知识2_第5张图片

<table border="2" cellpadding="25">

HTML+CSS基础知识2_第6张图片

<table border="2" cellpadding="25" cellspacing="12">

HTML+CSS基础知识2_第7张图片
colspan和rowspan

<table border="2" cellpadding="25" cellspacing="12">
        <caption>天气预报caption>
        <tr>
            <th>日期th>
            <th>日期th>
            <th>天气情况th>
            <th>出行情况th>
        tr> 
        <tr>
            <td>2020.01.02td>
            <td>白天td>
            <td>td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2020.01.03td>
            <td>白天td>
            <td>td>
            <td>不宜出行td>
        tr>
    table>

HTML+CSS基础知识2_第8张图片
利用colspan后

 <th colspan="2">日期th>

HTML+CSS基础知识2_第9张图片

<table border="2" cellpadding="25" cellspacing="12">
        <caption>天气预报caption>
        <tr>
            <th colspan="2">日期th>
            <th>天气情况th>
            <th>出行情况th>
        tr> 
        <tr>
            <td>2020.01.02td>
            <td>白天td>
            <td>td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2020.01.02td>
            <td>夜晚td>
            <td>td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2020.01.03td>
            <td>白天td>
            <td>td>
            <td>不宜出行td>
        tr>
        <tr>
            <td>2020.01.03td>
            <td>夜晚td>
            <td>td>
            <td>不宜出行td>
        tr>
    table>

HTML+CSS基础知识2_第10张图片
利用rowspan后

<tr>
            <td rowspan="2">2020.01.02td>
            <td>白天td>
            <td>td>
            <td>适合出行td>
        tr>
         <tr>
            <td>夜晚td>
            <td>td>
            <td>适合出行td>
        tr>
        <tr>
            <td rowspan="2">2020.01.03td>
            <td>白天td>
            <td>td>
            <td>不宜出行td>
        tr>

使用rowspan
HTML+CSS基础知识2_第11张图片
align/valign

<table align="right">

HTML+CSS基础知识2_第12张图片
练习:

<table border="3" cellpadding="5">
        <tr>
            <th>班次名称th>
            <th>科目th>
            <th>授课内容th>
            <th>增值服务th>
            <th>课时th>
            <th>价格th>
        tr>
        <tr valign="middle">
            <td rowspan="3">真题解析班td>
            <td>行测+申论td>
            <td>全科历年真题td>
            <td rowspan="3">课后模拟案卷td>
            <td>48td>
            <td>1280td>
        tr>
        <tr>
          <td>行测td>
          <td>行测真题td>
          <td>32td>
          <td>1520td>
        tr>
        <tr>
            <td>申论td>
            <td>申论真题td>
            <td>25td>
            <td>3620td>
        tr>
        <tr valign="midddle">
            <td rowspan="3">高分技巧班td>
            <td>行测+申论td>
            <td>全技巧td>
            <td rowspan="3">入学测评td>
            <td>48td>
            <td>1235td>
        tr>
        <tr>
            <td>行测td>
            <td>技巧强化td>
            <td>20td>
            <td>5210td>
        tr>
        <tr>
            <td>申论td>
            <td>理论强化td>
            <td>62td>
            <td>3620td>
        tr>
    table>

HTML+CSS基础知识2_第13张图片

4.表单标签

:表单的最外层容器

  • (单标签):标签用于手机用户信息,根据不同的type属性值,展示不同的控件,如输入框,密码框,复选框…(无嵌套规范)
    HTML+CSS基础知识2_第14张图片
<form action="./html/list.html">
    /*action作为下述文件的上传地址,提供了一个地址的作用*/
    <h2>输入框h2>
    <input type="text">
    <h2>密码框h2>
    <input type="password">
    <h2>复选框h2>
    <input type="checkbox">苹果
    <input type="checkbox">香蕉
    <input type="checkbox">葡萄
    <h2>单选框h2>
    <input type="radio" name="gender"><input type="radio" name="gender">否
    /*利用name来告诉系统这两者是一个属性*/
    <h2>上传文件h2>
    <input type="file">
    <h2>提交和重置按钮h2>
    <input type="submit">
    <input type="reset">
  form>

HTML+CSS基础知识2_第15张图片

  • textarea:多行文本框
 <h2>多行文本框h2>
    <textarea cols="20" rows="20">textarea>

HTML+CSS基础知识2_第16张图片

:定义表头

:定义表格单元

:定义表格标题

语义化标签: