day03

最新推荐文章于 2024-03-06 03:09:35 发布

小白来报道

最新推荐文章于 2024-03-06 03:09:35 发布

阅读量341

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/IT007IT/article/details/109137249

版权

day03:

1、表格标签：

为啥使用表格标签？

简单通用，结构稳定，基本结构

单元格：

行

列

跨行

跨列

<!--表格table
行tr
列td
border：宽度
-->
<table border="1px">
    <tr>
       <!-- colspan跨列-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <!--<td>1-4</td>-->
    </tr>
    <tr>
        <!--rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <!--<td>3-4</td>-->
    </tr>
</table>

练习：通过看图片，来写表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">小龙</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">小智</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>

</table>

</body>
</html>

2、视频和音频的标签：

视频元素：video

音频元素：audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
音频和视频
   src：资源路径
   controls：控制条
   autoplay：自动播放
-->
<video src="测试视频.mp4" controls autoplay></video>
<audio src="" controls autoplay></audio>
</body>
</html>

3、网页的结构的分析：

<!--
    header:标题头部区域的内容
    footer：标注脚部区域的内容
    section：web页面中的独立的区域
    article：独立的文章的内容
    aside:相关内容和引用
    nav：导航类辅助内容
-->

4、iframe内嵌框架：

<!--<iframe src="https:www.baidu.com" frameborder="0"
        width="800px" height="800px"></iframe>-->
<iframe src="" name="hello" frameborder="0" width="800px" height="800px"></iframe>
<a href="表格练习.html" target="hello">点击跳转</a>

5、表单

名字：

密码：

<!--单选文本框
    type=radio
       value：单选框的值
       name：表示的我们的分的组
       checked：默认选中
 -->
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex">女
</p>
<!--多选框-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby" checked/>sleep
    <input type="checkbox" value="敲代码" name="hobby"/>敲代码
    <input type="checkbox" value="打游戏" name="hobby"/>打游戏
    <input type="checkbox" value="吃饭" name="hobby"/>吃饭
</p>

<!--下拉框：
    value：我们后台的接收的值
    selected：默认选中
-->
<p>国家：
    <select name="list">
        <option value="c">中国</option>
        <option value="u">美国</option>
        <option value="r" selected>瑞士</option>
        <option value="j">日本</option>
    </select>
</p>
<!--文本域
     textarea
        cols:列
        rows:行
-->
<p>反馈信息：
    <textarea name="textarea" cols="50" rows="2">反馈</textarea>
</p>
<!--文件上传
   name：属性
-->
<p>
    <input type="file" name="files"/>文件
</p>
 
<!--邮箱的验证-->
<p>邮箱：
    <input type="email" name="email"/>
</p>
<!--URL的验证-->
<p>网站：
    <input type="url" name="URL">
</p>
<!--滑块的标签-->
<p>音量的滑块：
    <input type="range" name="voice" max="100" min="0" step="10"/>
</p>
<!--&lt;!&ndash;搜索框&ndash;&gt;
<p>搜索：
    <input type="search" name="search"/>
</p>-->
<!--增加鼠标的可用性-->
<label for="mark">点我
   <p>搜索
       <input type="search" name="search" id="mark">
   </p>
</label>
 
表单标签中的应用：
  只读：readonly
  隐藏:hidden
禁用：disabled
<!--
input
     type的属性类型：
    text，password，checkbox，radio，submit，reset，file，hidden，image，button
    默认情况text
    name：指定我们的元素的名称
    value：元素的初始值
    type的类型为radio时必须指定一个值
    size：表示元素的宽度
    maxlength：当类型为text或者password的时候输入的最大的字符数
    checked：type为radio或者checked时，指定按钮是都被选中
-->

6、CSS3

html+ css+ js

结构+ 修饰+ 交互

难点：

1、css选择器(重点和难点)

2、美化网页（文字，超链接，列表，渐变）

3、盒子模型

4、定位

5、网页的动画（特效）

1、什么是css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言

2、历史：

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。 [3]

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。

其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。

同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。

1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。 [4-5]

7、Css优势：

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分丰富

4、建议使用独立的html的css文件

小白来报道

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day03

day03:1、表格标签：为啥使用表格标签？简单通用，结构稳定，基本结构单元格：行列跨行跨列<table border="1px"> <tr>  <td colspan="2">1-1</td> <td>1-2</td> &l
复制链接

扫一扫