HTML学习的第二天

最新推荐文章于 2024-05-19 17:34:30 发布

雪雪在努力了

最新推荐文章于 2024-05-19 17:34:30 发布

阅读量58

点赞数

文章标签： html html5 css3

本文链接：https://blog.csdn.net/xhzm_love/article/details/109755728

版权

day02

全部掌握

超链接
列表系列
表格结构
引入CSS
三个方法的区别
css选择器（基础）
css文本属性

超链接

链接 anchor 锚点、

<a href='跳转的地址'>文本or img or div </a>

链接可以完成图片、区域、下载、邮箱链接

属性：

href:跳转地址

target:设置打开方式 id属性唯一识别

target:_self本页/_blank空白页，新页

base标记

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 配合超链接使用  做全局的设置 href用来设置相同的基础地址  target用于设置统一的打开方式-->
    <base href="https://shop.mogu.com/detail/" target="_blank">
</head>

锚点功能

超链接跳转到某一个界面的某一个部分

先要给链接的部分加一个id属性起一个id值
在a链接里href="#id值" 如要跳转到其他界面的某一个部分则 href=“界面地址#id值”

<a href="#ny">农药</a>

列表系列

无序列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-adkubYvX-1605621824209)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605620313786.png)]

ul>li*n
type:标识的类型  
 <!-- type:square正方形 /circle空心圆  /desc实心圆 /none没有 -->
   <ul type="">
       <li>无序列表数据项</li>
       <li>无序列表数据项</li>
       <li>无序列表数据项</li>
       <li>无序列表数据项</li>
       <li>无序列表数据项</li>
   </ul>

type: 标识的类型,不能修改样式（）

有序列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5SwJICLf-1605621824211)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605620429758.png)]

<!-- type: 1 /a/A/I/i  start="数字" -->
   <ol type="1" start="6">
       <li>数据项1</li>
       <li>数据项2</li>
       <li>数据项3</li>
       <li>数据项4</li>
       <li>数据项5</li>
   </ol>

自定义列表

----（带有标题的列表）界面的尾部

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tfz6Zkr5-1605621824212)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605620516120.png)]

<!-- dl define list > dt title + dd data-->
   <dl>
       <dt>购物指南</dt>
       <dd>购物流程</dd>
       <dd>购物流程</dd>
       <dd>购物流程</dd>
       <dd>购物流程</dd>
       <dd>购物流程</dd>
   </dl>

表格结构

二维结构水平(行tr) 垂直(列td)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9wf4Xv6-1605621824215)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605620556906.png)]

宽度和高度自己适应结构

头部thead 默认居中加粗

身体tbody 居左

底部(补充)tfoot

<table>
    <tr>
        <td></td>
    </tr>
</table>

复杂结构

<!-- 大盒子 -->
   <table>
       <!-- 头部 第一行 字段 -->
       <thead>
           <!-- tr table row 行 -->
           <tr>
               <!-- th table head单元格 列 -->
               <th>姓名</th>
               <th>基本工资</th>
               <th>岗位工资</th>
               <th>补助</th>
               <th>其他</th>
           </tr>
       </thead>
       <!-- 主体 具体数据 -->
       <tbody>
           <tr>
               <td>马杰伦</td>
               <td>800</td>
               <td>100</td>
               <td>0</td>
               <td>0</td>
           </tr>
           <tr>
            <td>朱德华</td>
            <td>2000</td>
            <td>500</td>
            <td>50</td>
            <td>0</td>
        </tr>
        <tr>
            <td>张荣浩</td>
            <td>3000</td>
            <td>1000</td>
            <td>1000</td>
            <td>0</td>
        </tr>
       </tbody>

       <tfoot>
           数据s说明
       </tfoot>

   </table>

简单结构（90%常用）

   <table  border="1px" cellpadding="0"  cellspacing="0" style="border-collapse:collapse"
   
   align="center"  width="500px" height="300px" >

    <tr bgcolor="red">
        <td>姓名</td>
        <td>基本工资</td>
        <td>岗位工资</td>
        <td>补助</td>
        <td>其他</td>
    </tr>
    <tr align="center">
        <td bgcolor="yellow">马杰伦</td>
        <td >800</td>
        <td>100</td>
        <td width="200px">0</td>
        <td>0</td>
    </tr>
    <tr align="center">
     <td>朱德华</td>
     <td>2000</td>
     <td>500</td>
     <td>50</td>
     <td>0</td>
 </tr>
 <tr>
     <td>张荣浩</td>
     <td>3000</td>
     <td>1000</td>
     <td>1000</td>
     <td>0</td>
 </tr>
      
   </table>

默认属性

border:边框 border=“1px”

cellpadding:单元格内部边框和内容的距离

cellspacing: 单元格与单元格之间的距离

align:水平对齐方式 left right center

(1)写在table里那就是表格大盒子对齐

(2)写在td单元格里那就是单元格内容对齐，不要一个个的给td加，应该加在tr身上

width: 宽度

height:高度

bgcolor：背景色 table or tr or td

css属性: border-collapse:collapse 细线边框属性(table)

合并属性

跨行合并rowspan 列合并 rowspan =“n” n表示要合并的行数

跨列合并colspan 行合并 colspan =“n” n表示要合并的行数

被合并的要删掉 删除个数=合并列数-1

应用

原始：布局，已淘汰

目前：装文字的多行多列

CSS（层叠样式表）cascading style sheets

内容：文本样式，布局，选择器，动画，背景插入图片…

功能：美容院

特点：无逻辑不能计算

引入方法（html文件里）

css属性写法

{

属性名：属性值;

…

}

行内引入

<!-- 行内 style=“css属性集合”
    
    style: {
      width:200px;
      height:200px;
      background-color: slateblue;
    }
    
    -->
 <div  style="width:200px;height:200px;background-color: slateblue;">
       div元素
    </div>

<!-- width 自带属性  默认属性 -->
<img src="./image/timg.jpg" alt="" style="width:500px">

缺点：1、代码冗余 2、结构不清晰 3.后期维护困难

内部嵌入

 <!--内部 嵌入 -->
    <style>
          * {
             color:tomato;
         }

         p {
               font-size: 30px;
         }
         .list-data {

             font-size: 22px;
             color: springgreen;

         }
         .first {
             color: #000;
         }

         #one {
            color: #000;
         }      

    </style>
</head>

缺点：没有形成结构与样式相分离，不利于后期代码复用和维护

外部链接

1.创建一个.css文件
2.把css样式代码写入文件里
3.引入 head>link
<!-- link rel:声明你引入的那个文件类型 href=""-->
    <link rel="stylesheet" href="./a.css">

link

rel:声明你引入的文件类型 stylesheet

href：路径

优点：彻底形成分离复用 + 好维护

导入

优先级

行内 > 内部嵌入 >外部引入

行内:js获取行内样式是非常方便的优先级高覆盖外部样式，内部嵌入

内部嵌入:覆盖公共样式文件里的样式 common.css

选择器

基础选择器   css选择器  ---》挑选元素
全局选择器  通配符) 匹配的是包含html在内的所有元素
标签选择器
*{
   
}
标签选择器     标签名  {  }
p{

}
类选择器（英文，不以数字开头、方位词、汉字）
(1)先写一个类名 
(2)挑选 .类名 {}
.box{

}
id选择器(一个)
(1)先起一个id名字
(2)#id值{}
#id值{

}

link

rel:声明你引入的文件类型 stylesheet

href：路径

雪雪在努力了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习的第二天

day02全部掌握超链接列表系列表格结构引入CSS三个方法的区别css选择器（基础）css文本属性超链接链接 anchor 锚点、<a href='跳转的地址'>文本or img or div </a> 链接可以完成图片、区域、下载、邮箱链接属性：href:跳转地址target:设置打开方式 id属性唯一识别target:_self本页/_blank空白页，新页base标记<head> &lt
复制链接

扫一扫