前端框架(三件套)

学习网站

HTML 系列教程(有广告)

HTML(超文本标记语言) | MDN (mozilla.org)(英文不太友好)


1.HTML5 & CSS3

1.1HTML5表格

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table表格</title>
    <style>
        p {
            text-align: center;
        }
        h1 {
            text-align: center;
        }

        table {
            margin: 0 auto;
            border-collapse: collapse; /* 合并边框,使边框线条更精细 */
        }

        td {
            text-align: center;
            vertical-align: middle;
            border: 1px solid black; /* 设置边框为 1 像素宽的实线黑线 */
        }
    </style>
</head>
<body>
<h1>三(1)班课程表</h1>
<p>2018学年度第一学期</p>
<!--输入文字用段落标签-->
<table border="1">
    <tr>
        <th>     </th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td >早读<br>7:50 - 8:10</td>
        <td >语文</td>
        <td >数学</td>
        <td >英语</td>
        <td >语文</td>
        <td >语文</td>
    </tr>
    <tr>
        <td colspan="6">大课间    8:10 - 8:40</td>
    </tr>
    <tr>
        <td>第一节<br><br>8:50 - 9:30</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td colspan="6">眼保健操   9:30 - 9:40</td>

    </tr>
    <tr>
        <td>第二节<br><br>9:45 - 10:25</td>
        <td>语文</td>
        <td>体育</td>
        <td>体育</td>
        <td>语文</td>
        <td>音乐</td>
    </tr>
    <tr>
        <td>第三节<br><br>10:35 - 11:15</td>
        <td>音乐</td>
        <td>英语</td>
        <td>数学</td>
        <td>数学</td>
        <td>体育</td>

    </tr>
    <tr>
        <td colspan="6">午休    12:00 - 13:40</td>
<!--        colspan="6"横跨6列-->
    </tr>
    <tr>
        <td>第四节<br><br>14:10 - 14:50</td>
        <td>英语</td>
        <td>科学</td>
        <td>语文</td>
        <td>科学</td>
        <td>语文</td>
    </tr>
    <tr>
        <td colspan="6">眼保健操    14:50 - 15:00</td>

    </tr>
    <tr>
        <td>第五节<br><br>15:05 - 15:45</td>
        <td>数学</td>
        <td>语文</td>
        <td>书法</td>
        <td>美术</td>
        <td>道德</td>
    </tr>
    <tr>
        <td>第六节<br><br>15:55 - 16:35</td>
        <td>少队</td>
        <td>道德</td>

        <td>美术</td>
        <td>信息</td>
        <td>综合</td>
    </tr>
</table>


</body>
</html>

效果图:

注:<thead>、<tbody> 和 <tfoot> 元素不会影响表格的布局,但有必要。

1.2HTML5表单

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
    <p>入职申请表单</p>

</head>
<body>
<form action="">

    <label for="name">名字:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="id_card">身份证号:</label>
    <input type="number" id="id_card" name="id_card"><br><br>

    <label for="photo">个人照片:</label>
    <input type="file" id="photo" name="photo"><br><br>

    <label for="address">住址:</label>
    <input type="text" id="address" name="address" placeholder="请从地级市开始输入"><br><br>

    <label for="birthdate">出生日期:</label>
    <input type="date" id="birthdate" name="birthdate"><br><br>

    <label for="yes">婚否:是: </label>
    <input type="radio" id="yes" name="married">
    <label for="no">否:</label>
    <input type="radio" id="no" name="married">
    <br><br>
<!--有for即可实现互斥-->


    <label >已掌握的编程语言:</label>
    <input type="checkbox"   value="0" />C/C++
    <input type="checkbox"   value="1" checked=" true"/>Java
    <input type="checkbox"   value="2" />python<br><br>

    <label for="introduction">自我介绍:</label>
    <textarea id="introduction" name="introduction" rows="5"></textarea><br><br>

    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
</body>
</html>

效果图

1.3CSS3

语法

选择器 {
    样式声明;
    样式声明;
    ... ...
}

全局属性

局部属性优先全局属性

复制代码
div.d.*6

空格有特殊作用

CSS外部引入<link>

  1. 几种 CSS 选择器

    元素选择器(如 p)、类选择器(如 .class)、ID 选择器(如 #id)、后代选择器(如 div p)、子选择器(如 div > p)、相邻兄弟选择器(如 p + span)、通用兄弟选择器(如 p ~ span)等。

  2. CSS 的 3 种引入方式

    • 内联样式,直接在 HTML 元素上添加 style 属性。
    • 内部样式表,在 <head> 中使用 <style> 标签。
    • 外部样式表,通过 <link> 标签链接外部的 CSS 文件。
  3. CSS 中表示颜色

    可以使用颜色名称(如 red)、十六进制值(如 #ff0000)、RGB 值(如 rgb(255,0,0))、RGBA 值(如 rgba(255,0,0,0.5))等。

  4. CSS 的基本语法格式
    选择器 {
    属性:
    值;
    }

  5. CSS 的优先规则

    ID 选择器的优先级高于类选择器,类选择器的优先级高于元素选择器;内联样式的优先级最高;后出现的样式会覆盖前面相同属性的样式(除非前面的样式优先级更高)。

相关推荐
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
qq_3643717215 小时前
VueRouter 导航故障问题
javascript·vue.js·前端框架·vue-router
何老生18 小时前
spring-boot(thymeleaf前端框架,简单了解)、( 跨域请求)
spring boot·前端框架
会发光的猪。20 小时前
前端vue3若依框架pnpm run dev启动报错
前端·javascript·vue.js·前端框架·bug
羊小猪~~21 小时前
前端入门一之HTML知识讲解
前端·javascript·css·前端框架·html·html5
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
我命由我123451 天前
CesiumJS 案例 P20:监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
开发语言·前端·javascript·前端框架·html·css3·html5
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
羊小猪~~2 天前
前端入门一之CSS知识详解
前端·javascript·css·vscode·前端框架·html·javas
new Vue()2 天前
Vue vs React:两大前端框架的区别解析
vue.js·react.js·前端框架