HTML5_Day02基本命令以及CSS

最新推荐文章于 2024-08-12 22:44:37 发布

阿福真的不想掉头发

最新推荐文章于 2024-08-12 22:44:37 发布

阅读量178

点赞数 1

分类专栏：前端的入门文章标签： html5

本文链接：https://blog.csdn.net/HZMMC/article/details/109081476

版权

前端的入门专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

结果为：

表格练习

学生成绩
小龙	语文	100
小龙	数学	100
小智	语文	100
小智	数学	100

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. 表单

表单：
action：表单提交的位置，以后这个位置写的就是我们的服务端的地址
method：post，get提交方式：
get提交方式：我们可以在我们的url中的看见我们的信息，不安全，不高效
post：比较安全，传输大文件

<form action="表格练习.html"  method="get">
    名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <!--提交和重置-->
    <input type="submit">
    <input type="reset">
</form>

6.单选文本框

<!--单选文本框
    type=radio
       value：单选框的值
       name：表示的我们的分的组
       checked：默认选中
 -->
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex">女

7.多选文本框

</p>
<!--多选框-->
<p>爱好：
    <input type="checkbox" value="睡觉" name="hobby" checked/>睡觉
    <input type="checkbox" value="敲代码" name="hobby"/>敲代码
    <input type="checkbox" value="看书" name="hobby"/>看书
    <input type="checkbox" value="吃饭" name="hobby"/>吃饭
</p>

8.下拉框

<!--下拉框：
    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>

9.文本框

<!--文本域
     textarea
        cols:列
        rows:行
-->
<p>反馈信息：
    <textarea name="textarea" cols="50" rows="2">反馈</textarea>
</p>

10.文件上传

<!--文件上传
   name：属性
-->
<p>
    <input type="file" name="files"/>文件
</p>

11.邮箱的验证

<p>邮箱：
    <input type="email" name="email"/>
</p>

12.URL的验证

<p>网站：
    <input type="url" name="URL">
</p>

13.滑块的标签

<p>音量的滑块：
    <input type="range" name="voice" max="100" min="0" step="10"/>
</p>

14.搜索框

<p>搜索：
    <input type="search" name="search"/>
</p>-->

15.增加鼠标的可用性

<label for="mark">点我
   <p>搜索
       <input type="search" name="search" id="mark">
   </p>
</label>

16.表单标签中的应用：

只读：readonly 隐藏:hidden 禁用：disabled

type的属性类型：
text，password，checkbox，radio，submit，reset，file，hidden，image，button
默认情况text
name：指定我们的元素的名称
value：元素的初始值
type的类型为radio时必须指定一个值
size：表示元素的宽度
maxlength：当类型为text或者password的时候输入的最大的字符数
checked：type为radio或者checked时，指定按钮是都被选中

17.css3

html+ css+ js
结构+ 修饰+ 交互

什么是css3？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

Css的三种引入方式：

内部引入：

外部引用

行内样式

<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

行内样式》内部引入》外部引入

9、基本选择器：

作用：选择页面上的某一个或者某一类标签
基本选择器：
1、标签选择器-----选择一类标签标签名{}
2、类的选择器class------选择所有的class的属性一致的选择器，.class名称{}
3、 Id选择器-------全局唯一的 #id名{}

在这里插入图片描述

阿福真的不想掉头发

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5_Day02基本命令以及CSS

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

扫一扫