HTML&CSS-CSDN博客

本文链接：https://blog.csdn.net/jsb2283939167/article/details/141366379

这部分内容主要包含了静态页面的设计，首先关于基础的概念需要了解。HTML部分需要了解常用的标签，基础的HTML文档的格式。

基础的标签有

更多的标签可以查看官方文档：HTML 标签参考手册 (w3school.com.cn)

TABLE标签
以下面的李白的表格结构为例子，需要对整个结构有大致的规划。

首先，整个HTML由 head 和 body 俩部分组成，内容都在 body 里实现，table 标签用来指定表格，在表格内部 tr 标签表示行，在每一行中定义表格的单元类型，单元类型有俩种，分别是标准单元格 td 和表头单元格 th ，th 元素中的文本通常呈现为粗体并且居中，td 元素中的文本通常是普通的左对齐文本。但 th 可以让内容字体变粗。在 td 列标签中有 rowspan 属性设置单元格可纵跨的行数，colspan 属性定义单元格应该横跨的列数。

另外在 img 标签中可以通过 src 属性定义图片的地址，可以是相对地址也可以是绝对地址，也包含互联网地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px" cellspacing="1" width="800" height="400">
        <tr>
            <th>编号</th>
            <td>101</td>
            <th>性别</th>
            <td>男</td>
            <td rowspan="3" width="300px"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.cdd6a89f24527c242061088967ade23c?rik=0S8wjp6vo3D3ew&riu=http%3a%2f%2fwww.askququ.com%2fuploads%2fallimg%2f200126%2f1_200126212832_1.jpg&ehk=s9kqLYNEYZ6sUXi%2bXugFkxCy%2b%2bYuJJgs6heq2blHRjE%3d&risl=&pid=ImgRaw&r=0" width="300px"></td>
        </tr>
        <tr>
            <th>姓名</th>
            <td colspan="3">李白</td>
        </tr>
        <tr>
            <th>特长</th>
            <td colspan="3">浪漫主义诗人</td>
        </tr>
    </table>
</body>
</html>

实际效果：

FORM表单

还有就是表单项的相关内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <style>
        div {
            width: 33%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>
        <h1>个人信息录入</h1>
        <form action="" method="post">
            姓名：<input type="text" name="name"><br><br>
            密码：<input type="password" name="password"><br><br>
            确认密码：<input type="password" name="password"><br><br>
            性别：<label><input type="radio" name="sex">男</label>
                <label><input type="radio" name="sex">女</label><br><br>
            年龄：<input type="number" name="age"><br><br>
            语言：<label><input type="checkbox" name="language" value="Java">Java</label>
                <label><input type="checkbox" name="language" value="C">C</label>
                <label><input type="checkbox" name="language" value="lua">lua</label>
                <label><input type="checkbox" name="language" value="Python">Python</label><br><br>
            照片：<input type="file" name="photo"><br><br>
            生日：<input type="date" name="brithday"><br><br>
            时间：<input type="time" name="time"><br><br>
            日期以及时间：<input type="datetime-local" name="datetime-local"><br><br>
            邮箱：<input type="email" name="email"><br><br>
            学历：<select name="degree">
                <option value="">请选择您的学历...</option>
                <option value="1">初中</option>
                <option value="2">高中</option>
                <option value="3">本科</option>
                <option value="4">硕士</option>
                <option value="5">博士</option>
            </select><br><br>
            个人简介：<textarea name="information"cols="30" rows="10"></textarea><br><br>
            <input type="hidden" name="id">
            <!-- 按钮 -->
            <input type="button" value="确认按钮"><br><br> <!-- 无意义 -->
            <input type="reset" value="重置">
            <input type="submit" value="提交">
        </form>
    </div>
</body>
 
<script>
    var passwd = getElementsByName('password');
    alert(passwd[0]);
    alert(passwd[1]);
</script>
 
</html>

实际效果：

在HTML标签中可以直接使用相对应的CSS样式的属性，这部分需要了解的基础的CSS样式，CSS的引入方式，还有三种选择器。

基础的CSS样式比如：字体大小变化、文字加下划线、设置对齐方式
字体大小变化（设置对应的占的像素）

h1 {
   font-size:40px;
}
h2 {
   font-size:30px;
}
p {
   font-size:14px;
}
设置字体的粗细：

p.normal {
   font-weight:normal;
}
p.thick {
   font-weight:bold;
}
p.thicker {
   font-weight:900;
}
设置文本的对齐方式：

div{
text-align: left; - 文本左对齐。
text-align: right; - 文本右对齐。
text-align: center; - 文本居中对齐。
text-align: justify; - 文本两端对齐，常用于打印文档。
}
设置文本下划线：

<style>
.underline {
text-decoration: underline;
}
</style>

▐ CSS的引入方式
首先是CSS的引入方式，分为三种：

外部样式：即CSS代码保存在外部，HTML文件通过 link 标签引用这个外部样式表

内部样式：整体放在 head 标签，在 style 标签内写CSS代码

行内样式：直接在HTML元素内通过对应标签的属性值使用 style

外部样式：

<link rel="stylesheet" href="../css/news.css">
内部样式：

<style>
h1 {
color: #4d4f53;
}
</style>
行内样式：

<h1 style="color: #4d4f53;">this is luming</h1>
▐ CSS的三种选择器
对于CSS样式，我们可以对其归类，方便我们统一管理调用，即选择器。选择器分为以下三种

元素选择器：

<span>2024年01月18日 09:01</span>
<span>央视</span>
注：span 标签无任何含义，仅仅只是用作布局，效果同 div

id选择器：

<span id="timer1">2024年01月18日 09:01</span>
<span>央视</span>
#timer1 {
color: #8888AA;
}
在标签内部我们可以设置它的id属性，然后在 style 中使用 “#” 来访问这个id所对应的标签，从而设置它的样式