HTML基础快速入门笔记

最新推荐文章于 2024-07-16 15:41:31 发布
最新推荐文章于 2024-07-16 15:41:31 发布
阅读量384 收藏 2
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/akie_384/article/details/112061412
版权

基础标签

在这里插入图片描述
其中<hr>有格式color,如 color = ‘red’
有width如width = 200(像素px) 或者width = 50%(比例)
以及 rglin = ‘left’ (right,center)
还有size，高度，如size = ‘10’

格式标签

<b>加粗
<i>斜体
<center>居中(不赞成使用)
<font>定义文本格式有
1.color 定义颜色
(1) color = ‘red’
(2) color = rgb(数值1,数值2,数值3) 红绿蓝三原色调色数值取值范围0-255(不推荐)
(3)color = #00FF00 同(2)不过是16进制的比例
2.face定义字体如 face = "楷体’
3.size定义大小如size = ‘5’

html特殊字符集

比如以下
在这里插入图片描述
在这里插入图片描述
完整参考https://www.w3school.com.cn/tags/html_ref_entities.html

图片标签

< img src = "./image/picture1" alt ="好看小姐姐" >

这样就可以导入电脑的照片，嘻嘻嘻
在这里插入图片描述
在这里插入图片描述
属性有height，width，align常用

列表标签

无序列表
<ul>定义无序列表
<li>定义列表项目
type可以定义无序列表的表头形状有square，circle，disc

<ul type="disc">
    <li>睁开眼睛</li>
    <li>洗漱</li>
    <li>穿衣服</li>
    <li>穿鞋</li>
    <li>出门</li>
</ul>

<ol>定义有序列表
<li>定义列表项目同上
type可设置有序的序号类型如ABC，123，I, II, III, IV
start可设置起点序号

<ol type=A start="2">
    <li>睁开眼睛</li>
    <li>洗漱</li>
    <li>穿衣服</li>
    <li>穿鞋</li>
    <li>出门</li>
</ol>

运行结果
在这里插入图片描述

链接标签

<a>定义超链接，可跳转
href属性是最关键的属性，是规定指定的链接的URL
target可以实现在何处打开，比如target = “_blank” 就是跳转到新的一个标签页
而target = "_self"就是不打开新的标签页在本页跳转
herf也可以指定邮件例如

<a href = "mailto:2427398850@qq.com">联系我</a><br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <a href = 'http://www.baidu.com'>点我</a><br>
    <a href = 'http://www.baidu.com' target="_blank">点我</a><br>
    <a href = 'http://www.baidu.com' target="_self">点我</a><br>
    <a href = "./5_列表标签.html">列表标签</a><br>
    <a href = "mailto:2427398850@qq.com">联系我</a><br>
    <a href = "http://www.csdn.net"><img src="./image/picture02.png"></a>
</body>
</html>

在这里插入图片描述
可以看到不同的效果

表格标签

在这里插入图片描述

<tanble>标签创建表格定义表格
<tr>表格中的行
<td>表格中的单元格 （tr 和 td 都可以有自己属性color和align颜色和对齐方式）

  1. coslpan 规定单元格可横跨的列数
  2. rowspan 规定单元格可横跨的行数

<th>表格的表头单元格
cellpadding规定单元边沿与其内容之间的空白
cellspacing规定单元格之间的空白
bordoder规定表格边框的宽度
width规定表格的宽度
bgcolor背景颜色
align对齐格式

主要代码:

<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#9f32f0" align = "center">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
        <td>89</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
        <td>96</td>
    </tr>

</table>
</body>

运行结果为：
在这里插入图片描述

<caption>定义表格标题
<thead>表示表头
<tbody>表示表体
<tfoot>表示表尾（三者没啥改变性作用但是增加可读性和css一起用）
对单元格进行合并操作以及单元格的对齐方式后

body部分代码：

<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#9f32f0" align = "center">
    <caption>学生信息表</caption>
    <tr align = "center">
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr align = "center">
        <td rowspan="2">1</td>
        <td>A</td>
        <td>89</td>
    </tr>
    <tr align = "center">
        <td>B</td>
        <td>96</td>
    </tr>
    <tr align = "center">
        <td>3</td>
        <td colspan="2">C</td>
    </tr>

</table>
</body>

运行结果为
运行结果

表单标签

在这里插入图片描述
post请求到的username和password可以在F12里面的network里的header里面的最下面找到

代码例子如下

<body>

    <form action="#" method="get">
        用户名:<input name="username"><br>
        密码:<input name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>

运行结果如下
在这里插入图片描述
在这里插入图片描述

表单项标签

在这里插入图片描述

<body>

<form action="#" method="get">
    <label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    <label for="password">密码</label>:<input type="password" name="password" placeholder="请输入密码" id="password"><br>
    <label>性别</label>:<input type="radio" name = "gender" value="male"> 男
    <input type="radio" name = "gender" value="female"> 女<br>
    <br>
    爱好:<input type="checkbox" name="hobby" value="shopping">购物
    <input type="checkbox" name="hobby" value="java">JAVA
    <input type="checkbox" name="hobby" value="game">游戏
    <br>
    <input type="submit" value="登录">
</form>
</body>

在这里插入图片描述
在这里插入图片描述

<body>

    <form action="#" method="get">
        <label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username">
        <br>
        <label for="password">密码</label>:<input type="password" name="password" placeholder="请输入密码" id="password">
        <br>
        <label>性别</label>:<input type="radio" name = "gender" value="male"> 男
        <input type="radio" name = "gender" value="female"> 女<br>
        <br>
        爱好:<input type="checkbox" name="hobby" value="shopping">购物
        <input type="checkbox" name="hobby" value="java">JAVA
        <input type="checkbox" name="hobby" value="game">游戏
        <br>
        取色器:<input type="color" name="color">
        <br>
        生日:<input type="date" name = "birthday">
        <br>
        生日:<input type="datetime-local" name = "birthday">
        <br>
        邮箱:<input type="email" name="email">
        <br>
        年龄:<input type="number" name="age">
        <br>
        图片:<input type="file" name="picture">
        <br>
        隐藏域:<input type="hidden" name="id" value="1234">
        <br>
        <input type="submit" value="登录">
        <br>
        <input type="image" src="../html/image/picture02.png" width="120" height="150">


    </form>
</body>

在这里插入图片描述
下面是一个注册界面的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <form action="#" method="get">
    <table align="center" width="30%" cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="email" name="email" placeholder="请输入邮箱"></td>
        </tr>
        <tr>
            <td>姓名</td>
            <td><input type="text" name="name" placeholder="请输入姓名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="number" name="phoneNumber" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="radio" name="gender" value="male">男
                <input type="radio" name="gender" value="female">女</td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td><input type="date" name="birthday" ></td>
        </tr>
        <tr>
            <td>验证码</td>
            <td><input type="text" name="checkCode" placeholder="请输入验证码"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="注册"></td>
        </tr>

    </table>
    </form>
</body>
</html>

在这里插入图片描述
上面忘记了还有一点点小笔记
在这里插入图片描述

省份:<select name="province">
                <option value="0">--请选择--</option>
                <option value="1">上海</option>
                <option value="2">北京</option>
                <option value="3">广东</option>
                <option value="4">广西</option>
                <option value="5">重庆</option>
                <option value="6">四川</option>
                <option value="7">河南</option>
                <option value="8">河北</option>
                <option value="9">甘肃</option>
                <option value="10">浙江</option>
            </select>
        <br>
        自我描述:<textarea rows="5" cols="20" name="description"></textarea>
        <br>

效果图如下
在这里插入图片描述
在这里插入图片描述

akie_384
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML快速入门笔记
Fine9548的博客
06-01 304
网页结构 DOCTYPE 声明使用HTML的版本 < header > 表示页面中的一个内容区块或者整个页面的标题。 < nav >表示页面中导航链接的部分 < article > 表示页面中一块与上下文不相关的独立内容。比如一篇文章中的文章。 < sectior >表示页面中一块内容区块 < aside > 表示article元素的内容之外的和内容相关的辅助信息。 < footer >表示页面或者页面中的一块区域的页脚。 arti
HTML快速入门学习笔记
Goallegoal的博客
05-10 327
HTML快速入门学习笔记 HTML 介绍 HTML（HyperText Markup Language）即超文本标记语言，是用来描述网页的一种语言。用 HTML 编写的文档称为 HTML 文档，也叫做Web 页面，包括了 HTML 标签、文本、图片、视频等内容。标记语言是一套标记标签(markup tag)，不同于编程语言 ，markdown 语言也是一种标记语言。 HTML、CSS、JavaScript 的关系： HTML、CSS、JavaScript 都是 Web 开发工程师必备的语言，HTML 用于承
HTML5入门笔记
2301_79853895的博客
03-25 1003
来自密歇根大学的英文课程，这是本人制作的英汉互译笔记，供有需要复习的读者参考
Docker快速入门总结笔记
热门推荐
huangjhai的博客
07-18 9万+
Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从 Apache2.0 协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。...
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
web--bootstrap入门基础笔记
09-26
这个"web--bootstrap入门基础笔记"是专科计算机软件设计专业大二学生在一个月内通过32节90分钟课程学习的总结，适用于从零开始学习的初学者，同时也为有一定经验的开发者提供参考。 首先，Bootstrap的核心概念是...
HTML笔记,html零基础入门视频课程（最适合初学者的教程）
04-24
本教程“HTML笔记,html零基础入门视频课程”是为初学者设计的一套系统学习资源，旨在帮助新手快速掌握HTML的基本概念和实际应用。 一、HTML基本结构 HTML文档由一系列的元素组成，这些元素通过标签来定义。每个HTML...
JSON 入门教程基础篇 json入门学习笔记
10-14
JSON广泛应用于AJAX（Asynchronous JavaScript and XML）应用程序中，因为JSON数据可以轻松地在服务器和客户端之间进行传输，并且JavaScript可以快速解析JSON数据，直接操作页面元素，实现页面动态更新。在上述提供...
HTML+CSS+JS学习笔记
10-25
HTML（HyperText Markup Language）是构建网页的基础，用于描述网页的结构和内容。它通过一系列的标签来组织页面元素，使浏览器能够理解并呈现出来。HTML由若干元素组成，包括但不限于头标签、主体标签、列表标签、...
html入门到放弃笔记
05-15
2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 ：也是文本，但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接 普通文本 b : 普通字符 b 超...
Html_Css问答集(12)
最新发布
白话魔法师
07-16 461
html与css学习中的一些疑问，问答中轻松获取知识。
使用ant+jmeter如何生成html报告
2301_78276982的博客
07-16 807
下载apache-ant，放到对应路径下，然后进行环境变量配置。系统变量的CLASSPATH添加E:\Installation Pack\eclipse\apache-ant-1.9.6\lib;用户变量的PATH添加：E:\Installation Pack\eclipse\apache-ant-1.9.6\bin。打开cmd，执行 ant，提示"Buildfile:build.xml does not exist!Build failed"则配置成功，ant命令可用。如下图所示。
html 关闭信息窗口
cuisidong1997的博客
07-14 258
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
Html_Css问答集(11)
白话魔法师
07-16 591
html与css学习中的一些疑问，问答中轻松获取知识。
CH15-DOM元素属性
IT技术类博客
07-13 1029
DOM 元素
「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中（三）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
07-16 500
本文主要介绍如何用DHTMLX Gantt将上下文菜单集成到JavaScript Gantt图中，欢迎下载最新版组件体验！
前端开发体系+html文件详解
m0_63432840的博客
07-14 466
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状。此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径。优先级：行内样式>内部样式=外部样式。
用HTML和CSS实现提示工具（tooltip）及HTML元素的定位
yivifu的专栏
07-13 872
本文利用HTML元素的position样式和visibility样式实现了一个提示工具（tooltip）示例，其中涉及到了元素的hover伪类，visibility样式和position样式等知识。
简约唯美的404HTML源码
爱酷码的博客
07-16 687
简约唯美的404HTML源码，很适合做网站错误页，将下面的源码放到一个空白的html里面，然后上传到服务器里面即可使用

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值