【开发】HTML-CSS学习笔记

【开发】HTML-CSS学习笔记

概述

HTML（HyperText Markup Language），超文本标记语言，这个名字体现了两个性质：

  • 超文本：超越文本的限制，强于普通文本
  • 标记语言：通过标签构成

HTML在浏览器上运行，由浏览器解析

W3C标准：网页主要由三部分组成：

  • HTML
  • CSS
  • Javascript

以下是一个最简单的HTML代码：

<html>
    <meta charset="UTF-8"/>
    <head>
        <title>html初识</title>
    </head>

    <body>
        你好，世界。
    </body>
</html>

下面会挨个学习常用的标签

基础标签

标签 描述
<h1> - <h6> 定义标题
<font> 定义字体、尺寸、颜色等（建议CSS）
<b> 粗体
<i> 斜体
<u> 下划线
<center> 文本居中（建议CSS）
<p> 定义段落
<br> 定义拆行
<hr> 定义水平线

下面是一个简单的使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <h1>我是1号标题</h1>
    <h2>我是2号标题</h2>
    <h3>我是3号标题</h3>
    <h4>我是4号标题</h4>
    <h5>我是5号标题</h5>
    <h6>我是6号标题</h6>

    <hr>
    <font face="楷体" size="5" color="blue">我是font字体</font>
    <hr>

    我是第一行<br>
    我是第二行<br>

    <hr>

    我是<b>加粗</b><br>
    我是<i>斜体</i><br>
    我是<u>下划线</u>

    <hr>

    <center>
        我是居中
    </center>
</body>
</html>

此外，还有一些转义字符需要注意：

源代码 结果 含义
&lt; < 小于或显示标记
&gt; > 大于或显示标记
&amp; & 用于显示其他特殊字符
&quot; " 引号
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标
&nbsp;   不断行空白

图片、音频、视频标签

标签 描述 属性
<img> 图片 src：图片url
height：图像高度
width：图像宽度
<audio> 音频 src：音频url
controls：显示播放控件
<video> 视频 src：视频url
controls：显示播放控件

注：高度和宽度可以是像素数，也可以是百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="sources/a.png" width="864" height="540" alt="图片"> <br>
    <audio src="sources/b.mp3" controls></audio> <br>
    <video src="sources/c.mp4" controls width="800" height="400"></video>
</body>
</html>

超链接标签

超链接用标签<a>表示，有两种属性：

  • href：指定访问资源的URL
  • target：指定资源的打开方式
    • _self：默认值，当前页面打开
    • _blank：空白页面打开

超链接的对应文件形式不限，下面是两个网页互相超链接的例子：

<!-- page1.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是第一页</h1>

    <a href="page2.html" target="_self">去第二页</a>
</body>
</html>

<!-- page2.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是第二页</h1>

    <a href="page1.html" target="_blank">去第一页</a>
</body>
</html>

列表标签

标签 描述
<ol> 有序列表
<ul> 无序列表
<li> 定义列表项

注：type属性可以改变列表的形式，但无序列表中建议使用CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>有序列表</h3>
    <ol type="I">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>

    <h3>无序列表</h3>
    <ul type="circle">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
</body>
</html>

表格标签

标签 描述 属性
table 定义表格 border：规定边框宽度
width：规定表格宽度
cellspacing：规定单元格间空白
tr 定义行 align：定义表格行的内容对齐方式
td 定义单元格 rowspan：单元格可横跨行数
colspan：单元格可横跨列数
th 定义表头单元格 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table width="50%" border="5" cellspacing="1">
        <tr height="50">
            <th>编号</th>
            <th>姓名</th>
            <th>职务</th>
            <th>成绩</th>
        </tr>

        <tr align="center">
            <td>1</td>
            <td>张三</td>
            <td>班长</td>
            <td>90</td>
        </tr>

        <tr align="center">
            <td>2</td>
            <td>嘉豪</td>
            <td>体育委员</td>
            <td>null</td>
        </tr>

        <tr align="center">
            <td>3</td>
            <td>李四</td>
            <td>学习委员</td>
            <td>100</td>
        </tr>
    </table>

</body>
</html>

布局标签

标签 描述
<div> 定义HTML文档中的一个区域部分，常与CSS一起使用
<span> 用于组合行内元素

表单标签

标签 描述
<form> 定义表单
<input> 定义表单项，通过type控制输入形式
<label> 表单项添加标注
<select> 下拉列表
<option> 下拉列表的列表项
<textarea> 定义文本域

form中属性：

  • action：规定发送表单到达的URL，#代表提交到当前页面
  • method：规定用于发送表单数据的方式
    • get：数据直接附在action的URL之后，大小有限（默认）
    • post：数据放到http请求信息体中，大小无限制

表单中type属性有很多取值：

type取值 描述
text 默认值，单行输入
password 密码字段
radio 单选按钮
checkbox 复选框
file 文件上传按钮
hidden 隐藏输入字段
submit 提交按钮
reset 重置按钮
button 可点击按钮 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username">
        <br>

        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
        <br>

        性别：
        <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
        <br>

        爱好：
        <input type="checkbox" name="hobby" value="1">旅游
        <input type="checkbox" name="hobby" value="2">运动
        <input type="checkbox" name="hobby" value="3">游戏
        <br>

        头像：
        <input type="file">
        <br>

        <input type="submit" value="注册">
        <input type="reset" value="重置">
        <input type="button" value="我是按钮">
    </form>
</body>
</html>

CSS

CSS（Cascading Style Sheet），层叠样式表，负责给html元素加上样式

导入方式

有三种方式

  • 内联样式：标签内部使用style属性
<div style="color: red">Hello CSS</div>
  • 内部样式：定义style标签，在标签内部定义css样式

注：style标签在head中而不放在body

<style type="text/css">
    div {
        color: blue
    }
</style>
<div>Hello CSS</div>
  • 外部样式：定义link标签，引入外部CSS文件

例如CSS文件如下：

div {
    color: green;
}

就可以写：

<link rel="stylesheet" href="css/style.css">
<div>Hello CSS</div>

注：link标签也应放在head中

选择器

  • 元素选择器
div { color: red; }
  • id选择器

一开始要在标签里面加上id="xxx"

#name { color: red; }

<div id="name">
    Hello CSS
</div>
  • 类选择器
.cls { color: red; }

<div class="cls">
    Hello CSS
</div>

属性

CSS有非常多属性，对应Java开发来讲暂时不需要过多展开

按需查询即可

posted @ 2026-03-31 20:22  R4y  阅读(5)  评论(0)    收藏  举报