• HTML,CSS

    目录

    HTML

    标签标题：h1-h6

     段落标签：p

     换行标签：br

     格式化标签

     图片标签img

    超链接a

    表格标签

     列表标签

     input标签

     CSS

    CSS语法

    引入方式

    内部样式表

    内联样式

    ​外部样式表

    选择器

    标签选择器

    类选择器

     id选择器

    通配符选择器

    后代选择器

    子代选择器

     并集选择器

     伪选择器

    CSS字体

    字体系列

    字体样式

    字体大小

    字体粗细

    文本属性

     颜色

      颜色值

    文本对齐

     文本装饰

    文本缩进

    行高 

    背景 

     圆角矩形

    正方形

     圆形

    圆角矩形

     盒子模型

    ​弹性布局

    HTML

    设置内容和结构

    HTML由标签构成

    标签标题：h1-h6

    1. <html>
    2. <body>
    3.     <h1>这是一级标签 h1>
    4.     <h2>这是二级标签 h2>
    5.     <h3>这是三级标签 h3>
    6.     <h4>这是四级标签 h4>
    7.     <h5>这是五级标签 h5>
    8.     <h6>这是六级标签 h6>
    9. body>
    10. html>

     段落标签：p

    lorem：生成一段数据

    1. <html>
    2. <body>
    3.   <p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, quia dolor. Quae maxime vitae similique consequatur voluptas nam molestias, fuga magni optio eos! Architecto sunt tenetur quam quod delectus ut?label>p>
    4. body>
    5. html>

     换行标签：br

    1. <html>
    2. <body>
    3.   <p>这是一个段落 p><br>
    4.   <p>这是一个段落 p><br>
    5. body>
    6. html>

     格式化标签

    • 加粗：strong标签或者b标签
    • 倾斜：em标签或i标签
    • 删除线：del标签或s标签
    • 下划线：ins标签或者u标签
    1. <html>
    2. <body>
    3. <strong>加粗strong>
    4. <del>删除线del>
    5. <ins>下划线ins>
    6. <em>倾斜em>
    7. body>
    8. html>

     图片标签img

    1. <html>
    2. <body>
    3. <img src="女.png" alt="加载失败" width="10px" title="这是一个图片">女
    5. body>
    6. html>

    超链接a

    1. <a href="http://www.baidu.com">百度a>
    2. <a href="#">表示空连接,一般用于程序测试a>

     点击即可跳转

    表格标签

    • table：表示整个表格
    • tr：表示一行
    • td：表示一列
    • th：表头单元格，会居中加粗
    • thread：表格的头部
    • tbody：表格内容
    1. <html>
    2. <body>
    3. <table>
    4.     <th>计算机202学生信息th>
    5. <tr>
    6.     <td>姓名td>
    7.     <td>学号td>
    8. tr>
    9.     <tr>
    10.         <td>张三td>
    11.         <td>20200703td>
    12.     tr>
    13.     <tr>
    14.         <td>李四td>
    15.         <td>20200706td>
    16.     tr>
    17. table>
    18. body>
    19. html>

     列表标签

    无序列表：ul，li

    有序列表：ol，li

    自定义列表:dl(总标签）dt（小标题）dd（围绕标题来说明)

    1. <html>
    2. <body>
    3. <ul>
    4.   无序标签
    5.     <li>第一个无序标签li>
    6. ul>
    7. <ol>
    8.   有序标签
    9.     <li>第一个有序标签li>
    10. ol>
    11. <dl>
    12.     自定义标签
    13.     <dt>第一个小标题dt>
    14.     <dd>第一个小标题内容dd>
    15.     <dd>第一个小标题内容dd>
    16.     <dt>第二个小标题dt>
    17. dl>
    18. body>
    19. html>

     input标签

    • type：取值类型很多，表示标签类型
    • name：input的名字，对于单选框，name必须相同
    • value：input的默认值
    • checked：默认被选中
    1. 文本框：text
    2. 密码框：password
    3. 单选框：radio
    4. 复选框：checkbox
    5. 普通按钮：button
    6. 选择文件：file

    和lable标签搭配使用，提高用户体验，id绑定

    1. <html>
    2. <body>
    3. <input type="text">文本框
    4. <input type="password" >密码框
    5. <input type="radio" name="sex">男
    6. <input type="radio" name="sex" > 女
    7.  
    9. <input type="radio" name="sex" id="man"> <label for="man">男label>
    10. <input type="radio" name="sex" id="woman" checked="woman"> <label for="woman">女label>
    11.  
    12.  
    13. <input type="checkbox" id="java" checked="java"> <label for="java">javalabel>
    14. <input type="checkbox" id="c++"> <label for="c++">c++label>
    15. <input type="checkbox" id="c"> <label for="c">clabel>
    16. body>
    17. html>

    •  select:选择标签

    1. <select>
    2. <option >---选择年份---option>
    3. <option>2001option>
    4. <option >2002option>
    5. <option >2003option>
    6. select>
    • textarea：文本域标签
    <textarea cols="30" rows="10">这是一个文本域

     CSS

    设置样式

    CSS语法

    CSS注释以 /* 开始, 以 */ 结束

    CSS代码放在Style标签内

    1. <html>
    2. <body>
    3.     <style>
    4.   p /*p就是选择器，表示选择页面内的所有p标签*/
    5.   {
    6.     /*设置属性,键值对的形式*/
    7.     color:red;/*设置字体颜色*/
    8.     font-size: 30px;/*设置字体大小*/
    9.   }
    10. style>
    12. <p>
    13.     这是一个段落
    14. p>
    15. body>
    16. html>

    引入方式

    内部样式表

    一个文档应用一种样式时使用，