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中另一个具有交互作用的元素--表单。我们在登录一个网站的时候，需要输入账号密码，这个区域其实就是用表单元素实现的。我们作为用户输入账号密码验证码之后，这些输入的数据就会提交到服务器的数据库，然后服务器会把数据库中保存的你的账号密...
html笔记（完整版）
kaluomeng的博客
06-07 3590
标记 类型 译名或意义 作 用 备注 文件标记 ● 文件声明 让浏览器知道这是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笔记整理（个人笔记）
w3535222的博客
03-07 3621
个人笔记
html笔记
热门推荐
一个帅气潇洒的豆子
03-03 1万+
html笔记一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
网页设计html 笔记
CSDN_liudong888的博客
04-22 1350
html介绍； 定义：超文本标记语言，不是编程语言； 包含：图片，链接，视频，文档，文字，表格 功能：测试前端页面元素，做ui自动化测试需要理解元素定位； 特点：简易性，可拓展性 （3）平台无关性 （4）通用性 什么人员使用html？ （1）前端开发 javascript+html+css H5==html5 （html第5版本） 前端开发的职责：负责页面涉及，页面排版 后端开发：负责后台业务逻辑，使用编程语言，前后端需要业务对接 （2）测试人员 定位元素，实现ui自动化 5、html 查看方式
印象笔记导入html笔记,Evernote Importer｜印象笔记导入
weixin_33978722的博客
06-17 1495
Evernote Importer｜印象笔记导入0.87MB. Updated 2020-08-01. Only supports Anki 2.1.x.DescriptionEvernote Importer 是一款将印象笔记导入自动化的 Anki 2.1 插件。用户文档和开发者文档参见本项目的 GitHub 主页。如您在使用中遇到问题或对插件功能有好的建议，欢迎通过以下两种方式之一与我联系：...
黑马程序员html基本笔记
weixin_57140106的博客
06-25 2229
黑马程序员html个人笔记
HTML学习笔记
m0_58761900的博客
09-16 2485
6.表格标签：table 可以给table加属性： border：加边框 th：加表头 width/height：控制高度宽度 cellspcing：去掉单元格空隙 cellpadding：内容距边框的距离，默认是1像素 align：表格相对于周围元素的对齐方式，比如align=“center” 7.列表标签： （1）无序列表：ul li （2）有序列表：ol li （3）自定义列表：dl（总标签）、dt（小标题）、dd（围绕标题来说明） 8.表单标签：form
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 345
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 936
离线存储是基于 .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 219
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1383
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
前端开发html笔记
05-30
前端开发中，HTML是一门用来制作网页的语言，它由标签组成，比如图片标签、链接标签、视频标签等。HTML文件是网页的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。前端人员通过书写HTML文件来制作网页...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值