当前位置：首页 > news >正文

前端框架（三件套）

news 来源：原创 2024/9/20 6:49:59

学习网站

HTML 系列教程（有广告）

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

1.HTML5 & CSS3

1.1HTML5表格

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

<!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>

几种 CSS 选择器：

元素选择器（如 p）、类选择器（如 .class）、ID 选择器（如 #id）、后代选择器（如 div p）、子选择器（如 div > p）、相邻兄弟选择器（如 p + span）、通用兄弟选择器（如 p ~ span）等。
CSS 的 3 种引入方式：
- 内联样式，直接在 HTML 元素上添加 style 属性。
- 内部样式表，在 <head> 中使用 <style> 标签。
- 外部样式表，通过 <link> 标签链接外部的 CSS 文件。
CSS 中表示颜色：

可以使用颜色名称（如 red）、十六进制值（如 #ff0000）、RGB 值（如 rgb(255,0,0)）、RGBA 值（如 rgba(255,0,0,0.5)）等。
CSS 的基本语法格式：
选择器 { 属性: 值; }
CSS 的优先规则：

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