HTML笔记

最新推荐文章于 2024-07-18 15:09:01 发布
最新推荐文章于 2024-07-18 15:09:01 发布
阅读量158 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AHawkeye/article/details/117636263
版权

B/S软件的结构

在这里插入图片描述

前端开发流程

在这里插入图片描述

网页的组成部分

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

HTML简介

在这里插入图片描述

HTML文件书写规范

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

HTML标签介绍

在这里插入图片描述

基本属性

<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始  lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
    onclick表示单击事件
    alert()是JavaScript提供的一个警告框函数
    它可以接收任意参数，参数就是警告框的提示信息
-->
<body bgcolor="#f0f8ff" )><!--body标签是整个html页面显示的主体内容-->
    <p>hello world</p>
</body>
</html>

在这里插入图片描述

事件属性

<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始  lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
    onclick表示单击事件
    alert()是JavaScript提供的一个警告框函数
    它可以接收任意参数，参数就是警告框的提示信息
-->
<body onclick="alert('hello world!')"><!--body标签是整个html页面显示的主体内容-->
    <p>hello world</p>
</body>
</html>

在这里插入图片描述

单双标签

在这里插入图片描述
br是换行 hr是水平线。

<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始  lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
    onclick表示单击事件
    alert()是JavaScript提供的一个警告框函数
    它可以接收任意参数，参数就是警告框的提示信息
-->
<body><!--body标签是整个html页面显示的主体内容-->
    <button onclick="alert('Hello World!')">按钮</button>
    <br/>
    hello
    <br/>
    world
    <hr/>
    Hello World!
</body>
</html>

在这里插入图片描述

标签的语法

标签不能够交叉嵌套

在这里插入图片描述

标签必须正确关闭

在这里插入图片描述

没有文本内容的标签

在这里插入图片描述

属性必须有值 属性值必须加引号

在这里插入图片描述

注释不能嵌套

在这里插入图片描述

常用标签

font字体标签

font标签用来修改文本的字体（face）颜色（color）和大小（size）。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

特殊字符

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

标题标签

标题标签是h1到h6
在这里插入图片描述

在这里插入图片描述
对齐：
在这里插入图片描述
在这里插入图片描述

超链接

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

在这里插入图片描述
self是默认值。

列表标签

无序列表：unordered list

每一项是 list item
在这里插入图片描述
在这里插入图片描述

有序列表：ordered list

可以用type属性修改前面的符号
在这里插入图片描述
在这里插入图片描述

img标签

src属性可以设置图片的路径
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
可以用width和height属性修改图片的宽度和高度
在这里插入图片描述

表格标签

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

  • table标签是表格标签
  • tr是行标签（table row）
  • th是表头标签（table head）
  • td是单元格标签
  • border设置表格边框 width和height设置宽度和高度
  • align设置文本对齐方式 也可以设置表格对齐
  • b设置为文本加粗
    th标签完成了居中加粗的效果
    在这里插入图片描述
    在这里插入图片描述
    用cellspacing设置单元格之间的距离

跨行跨列表格

在这里插入图片描述
在这里插入图片描述
注意使用rowspan属性和colspan属性来跨行跨列，里面的参数是要跨的行数和列数。
注意跨行跨列后要把某些单元格删掉，不然会被挤出来，不是想要的效果。

iframe标签

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

在这里插入图片描述
在这里插入图片描述
点击超链接会让iframe跳转到这个页面。注意使用iframe的name属性和a标签的target属性结合。

表单标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        用户名：<input type="text" value="默认值"><br><br>
        密码：<input type="password"><br><br>
        确认密码：<input type="password"><br><br>
        性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br><br>
        兴趣爱好：<input type="checkbox" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++<br><br>
        国籍：<select>
            <option selected="selected">中国</option>
            <option>美国</option>
            <option>日本</option>
            </select><br><br>
        自我评价：<textarea rows="10" cols="20">默认值</textarea><br><br>
        <input type="reset" value="重置为默认值"><br><br>
        <input type="submit" value="提交表单"><br><br>
    </form>
</body>
</html>

在这里插入图片描述

表单格式化

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
<table align="center">
    <h1 align="center">用户注册</h1>
    <tr>
        <td>
            用户名：
        </td>
        <td>
            <input type="text" value="默认值">
        </td>
    </tr>
    <tr>
        <td>
            密码：
        </td>
        <td>
            <input type="password">
        </td>
    </tr>
    <tr>
        <td>
            确认密码：
        </td>
        <td>
            <input type="password">
        </td>
    </tr>
    <tr>
        <td>
            性别：
        </td>
        <td>
            <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
        </td>
    </tr>
    <tr>
        <td>
            兴趣爱好：
        </td>
        <td>
            <input type="checkbox" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++
        </td>
    </tr>
    <tr>
        <td>
            国籍：
        </td>
        <td>
            <select>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select><br><br>
        </td>
    </tr>
    <tr>
        <td>
            自我评价：
        </td>
        <td>
            <textarea rows="10" cols="20">默认值</textarea>
        </td>
    </tr>
    <tr>
        <td>
            <input type="reset" value="重置为默认值">
        </td>
        <td  align="center">
            <input type="submit"value="提交表单">
        </td>
    </tr>

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

在这里插入图片描述

表单提交的细节

在这里插入图片描述
增加如下细节
在这里插入图片描述
提交后的网址
在这里插入图片描述
http://localhost:63342/test/127.0.0.1 action的属性值 也就是服务器地址
? 分隔符
action=login&sex=on 请求参数（表单信息）

表单提交的时候 数据没有发送给服务器的三种情况：

  • 表单没有name属性
  • 单选 复选 下拉列表中的option标签 都需要添加value属性 以便发送给服务器
  • 表单项不在提交的form标签中
    get请求的特点
  • 浏览器地址栏中的地址是 action属性[+?+请求参数]
  • 请求参数的格式是name=value&name=value
  • 不安全（密码能被看到）
  • 它有数据长度的限制
    在这里插入图片描述
    post请求的特点
  • 浏览器地址栏中的地址只有action属性 也就是服务器地址
  • 相对于get请求要安全
  • 理论上没有数据长度的限制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="127.0.0.1" method="get">
    <input type="hidden" name="action" value="login">
<table align="center">
    <h1 align="center">用户注册</h1>
    <tr>
        <td>
            用户名：
        </td>
        <td>
            <input type="text" name="username" value="默认值">
        </td>
    </tr>
    <tr>
        <td>
            密码：
        </td>
        <td>
            <input type="password" name="password">
        </td>
    </tr>
    <tr>
        <td>
            确认密码：
        </td>
        <td>
            <input type="password" name="confirmedpassword">
        </td>
    </tr>
    <tr>
        <td>
            性别：
        </td>
        <td>
            <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
        </td>
    </tr>
    <tr>
        <td>
            兴趣爱好：
        </td>
        <td>
            <input type="checkbox" name="habbit" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++
        </td>
    </tr>
    <tr>
        <td>
            国籍：
        </td>
        <td>
            <select name="country">
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select><br><br>
        </td>
    </tr>
    <tr>
        <td>
            自我评价：
        </td>
        <td>
            <textarea name="desc" rows="10" cols="20">默认值</textarea>
        </td>
    </tr>
    <tr>
        <td>
            <input type="reset" value="重置为默认值">
        </td>
        <td  align="center">
            <input type="submit"value="提交表单">
        </td>
    </tr>

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

在这里插入图片描述
提交后：

在这里插入图片描述
此时我们的单选和复选发送的是on 不是我们想要的有效信息
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
再次提交
在这里插入图片描述

其他标签：div span和p

  • div标签默认独占一行
  • span标签 它的长度是封装数据的长度
  • p标签 段落标签 默认会在段落的上方或下方各空出一行来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span1</span>
    <span>span2</span>
    <p>p1</p>
    <p>p2</p>
</body>
</html>

在这里插入图片描述

AHawkeye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 性别sex,Python学习第224课——html表单
weixin_31430653的博客
06-10 1767
上节我们学习了a标签，通过它可以把互联网上的各个网页连接起来，点击超链接可以跳转到一个新的网页，也就是说，通过超链接我们可以在静态网页上进行简单的交互。这节我们学习html中另一个具有交互作用的元素--表单。我们在登录一个网站的时候，需要输入账号密码，这个区域其实就是用表单元素实现的。我们作为用户输入账号密码验证码之后，这些输入的数据就会提交到服务器的数据库，然后服务器会把数据库中保存的你的账号密...
JavaWeb尚硅谷【学习笔记】（整合）未完成
weixin_52487106的博客
01-17 449
学习笔记
《面试题目二》
weixin_46024123的博客
08-21 175
面试题目二 一． HTML img标记属于什么类型元素？ 答案：属于行内元素 2.结构标记有哪些？他们与div有什么相同之处，又有什么不同之处？ 答案：header，nav，section，aside，footer，article 都是用来做布局的，但结构标记提高了语义性和可读性 默认情况下，使用P标记会形成什么效果？ 答案：开始新的一行，形成段落文字，并有默认外边距 meta标签的主要作用 答案：name属性主要用于描述网页 标签和标签的区别 答案：标签是有加粗效果的，一般用于表格标题
HTML笔记.pdf
07-14
"HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记，涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点： 1. HTML基础知识： * DOCTYPE html是...
HTML 笔记.zip
02-06
这个“HTML笔记.zip”文件显然包含了关于HTML的学习资料，可能包括了基础概念、语法、元素、属性、标签等内容，帮助初学者或进阶者巩固和理解HTML的核心知识。 在HTML中，我们通过一系列的标签来构建网页结构。例如...
前端html笔记
05-17
html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记
HTML笔记.txt
02-25
自己总结的html笔记标签 非常适合初学者参考大牛复习 每个标签都标注了用途 需要的可以下载。
html 关闭信息窗口
cuisidong1997的博客
07-14 347
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 938
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
DDei在线设计器-HTML渲染
最新发布
hoslay1的专栏
07-18 223
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1394
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
[计网初识2]web的3个核心标准html，url，http
qq_43235540的博客
07-15 702
web的3个核心标准-->HTML,URL,HTTP的构成，
前端开发体系+html文件详解
m0_63432840的博客
07-14 566
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状。此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径。优先级：行内样式>内部样式=外部样式。
html（抽奖设计）
2301_81704123的博客
07-13 507
可以根据自己的喜好设计抽奖内容，或者修改颜色。
dhtmlx-gantt甘特图数据展示
dy1717的博客
07-15 398
甘特图数据展示
VUE前端HTML静默打印（不弹出打印对话框）PDF简单方案
qq_34168515的博客
07-15 470
在做打印功能的时候，以前大部分客户端都是用C#做的，静默打印（也就是不弹出打印对话框）比较简单。但是使用浏览器作为客户端，静默打印（也就是不弹出打印对话框）做起来就比较困难。困难的原因是浏览器的各种限制，浏览器并不支持这方面的更改在现有使用vue开发的项目中，有个比较简单的处理方式就是使用 electron-hiprint也就是本来是浏览器去调用打印控件，现在直接在对应电脑上安装一个程序，然后浏览器去调用该程序。
前端开发html笔记
05-30
前端开发中，HTML是一门用来制作网页的语言，它由标签组成，比如图片标签、链接标签、视频标签等。HTML文件是网页的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。前端人员通过书写HTML文件来制作网页，然后通过浏览器解析和渲染，最终生成最终的Web页面。在HTML文件中，可以使用DOCTYPE声明使用的HTML版本，常见的浏览器有Chrome、Firefox、Safari、Edge等。除了HTML，前端开发还需要掌握CSS和JavaScript等技术。CSS用来控制网页的样式，JavaScript用来实现网页的交互和动态效果。如果你想学习前端开发，可以从学习HTML、CSS和JavaScript入手，掌握这些技术后，你就可以开始制作自己的网页了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值