HTML笔记

最新推荐文章于 2023-08-06 13:00:03 发布
最新推荐文章于 2023-08-06 13:00:03 发布
阅读量168 收藏 2
点赞数 1
分类专栏： 写给自己看的
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51246916/article/details/112913053
版权

前面一些标签学的时候没写 参照这个博客

在这里插入图片描述

HTML

表格和列表

表格标签

在这里插入图片描述

表格的基本语法

<tr>表示行 <td>表示列 外部由<table>包围
示例
<body>
    <table>
        <tr><td>姓名</td>  <td>性别</td> <td> 年龄 </td></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
    </table>
</body>

在这里插入图片描述

<th>为表头标签。
<tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>

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

表格的属性值

想加上边框啊什么的 就要用到下列属性值
在这里插入图片描述

<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="249">

在这里插入图片描述

合并单元格

合并单元格方式:
● 跨行合并: rowspan=”合并单元格的个数"
● 跨列合并: colspan= “合并单元格的个数”

合并单元格3三步曲:
1.先确定是跨行还是跨列合并。
2.找到目标单元格写上合并方式=合并的单元格数量。比如: <td colspan=“2” > </td>.
3.删除多余的单元格。

示例
<body>
    <table width="500" height="250" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

在这里插入图片描述

列表分为

  1. 有序列表（用的少
  2. 无序列表（重点
  3. 自定义列表（重点

在这里插入图片描述
dd和dt是并列关系
在HTML标签中, dl标签用于定义描述列表(或定义列表),该标签会与 dt (定义项目/名字)和dd (描述每一个项目/名字 )一起使用。在这里插入图片描述
在这里插入图片描述

注意：ul里面只能放li 但是li里可以放任何标签。
在这里插入图片描述在这里插入图片描述

表单标签

使用表单目的是为了收集用户信息。

表单标签

在这里插入图片描述

表单元素

input

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

<form>
    <!-- text文本框 用户可以在里面输入任何文字 -->
    用户名：<input type="text"> <br>
    <!-- password 密码框 用户看不见输入的密码 -->
    密码：<input type="password"><br>
    <!-- radio 单选按钮  可以实现多选一 -->
    性别：男<input type="radio" > 女<input type="radio"><br>
    <!-- checkbox 复选框  可以实现多选 -->
    爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox">

    </form>

但是此时 我们发现
男和女是都可以选的 这当然不合适蛤 这是因为此时它俩没有相同的name值 （name即为input元素的名称
在这里插入图片描述
在这里插入图片描述

name

name属性存在的意义：这么多表单元素，我们怎么区分开来呢 就给他们不同的name值

  1. name 和value是每个表单元素都有的属性值主要给后台人员使用.
  2. name 表单元素的名字，要求单选按钮和复选框要有相同的name值
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
性别：男<input type="radio" name="sex" value="男"> 女<input type="radio"name="sex" value="女"><br>

这时候就能实现 男和女只能选一个了

value
 用户名：<input type="text" name="user" value="请输入用户名"> <br>

在这里插入图片描述
value只有在输入文本框里才会显示出来 在男/女这里面写是显示不出来的
如果你密码：<input type="password" name="password" value="请输入密码"><br>这样写的话

在这里插入图片描述

checked

单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮

性别：男<input type="radio"********* checked="checked">

这样一打开页面 男这个选项就已经被勾选上了
在这里插入图片描述

maxlength

maxlength规定了输入的最大字符数
用户名：<input type="text" maxlength="6">
在这里插入图片描述
此时输入6个字符后就不能再输入了

submit

submit提交按钮<input type="submit">
写个这个 页面里就会出现一个提交按钮

在这里插入图片描述
通过value可以更改“提交“里面的文字
<input type="submit" value="免费注册">
效果如图
在这里插入图片描述
点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器

reset

reset重置按钮<input type="reset">
在这里插入图片描述
同样是通过value值可以改变 重置 的文字 不再赘述。

button
<!-- 普通按钮 button  后期结合js 搭配使用-->
 <input type="button" value="获取短信验证码"> <br>
file
 <!-- 文件域 使用场景 上传文件使用的 -->
上传头像:  <input type="file" >

在这里插入图片描述

label

在这里插入图片描述
点男那个图片即可以实现男前面的按钮被点了 这依靠的是label标签
在这里插入图片描述

<input type="radio" name="sex" id="sex">
<label for="sex">男</label>

在这里插入图片描述
这时就可以实现点男时前面的按钮也自动被点上了

select

在这里插入图片描述

<form>
    籍贯
    <select>
        <option>山东</option>
        <option>河南</option>
        <option>湖北</option>
    </select>
    </form>

在这里插入图片描述

textarea

在这里插入图片描述

在这里插入图片描述

<form>
        先给自己打个气
        <textarea cols="50" rows="5">hhhhjxx加油加油</textarea>
    </form>

在这里插入图片描述

HTML5新特性

1.1 HTML5新增的语义化标签

●<header> : 头部标签
●<nav> : 导航标签
●<article> :内容标签
●<section> :定义文档某个区域
●<aside> : 侧边栏标签
●<footer> :尾部标签

在这里插入图片描述

1.2 HTML5新增的多媒体标签

HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。

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

1.3 HTML5新增的input类型

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机号码
type=“search”搜索框
type="colorl生成一个颜色选择表单

1.4 HTML5新增的表单属性

属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff/ on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete ="off"需要放在表单内，同时加上name属性，同时成功提交
multiplemultiple可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色:

input::placeholder {
            color: pink;
        }
肥宅洛夫特斯基
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html笔记（完整版）
kaluomeng的博客
06-07 3566
标记 类型 译名或意义 作 用 备注 文件标记 ● 文件声明 让浏览器知道这是HTML文件 ● 开头 提供文件整体信息 ● 标题 定义文件标题，将显示于窗口标题 ● 本文 设计文件格式及内文所在 段落标记 ○ 说明标记 为文件加上说明，但不被显示 ○ 段落标记 为文字、图片、表格等之间留一空白行 ○ 换行标记 令文字、图片、表格等显示于下一行 ○ 水平线 插入一条水平线 ● 居中 令文字、图片、表格等显示...
印象笔记导入html笔记,Evernote Importer｜印象笔记导入
weixin_33978722的博客
06-17 1476
Evernote Importer｜印象笔记导入0.87MB. Updated 2020-08-01. Only supports Anki 2.1.x.DescriptionEvernote Importer 是一款将印象笔记导入自动化的 Anki 2.1 插件。用户文档和开发者文档参见本项目的 GitHub 主页。如您在使用中遇到问题或对插件功能有好的建议，欢迎通过以下两种方式之一与我联系：...
HTML笔记整理（个人笔记）
w3535222的博客
03-07 3575
个人笔记
html笔记
一个帅气潇洒的豆子
03-03 1万+
html笔记一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
HTML学习笔记
m0_58761900的博客
09-16 2471
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文件,罗剑锋的C++实战笔记(PDF+MP3+HTML完结)
weixin_29313547的博客
06-24 2076
课前导读 (2讲)开篇词 | 把C++从“神坛”上拉下来，这次咱这么学课前准备 | 搭建实验环境概论 (5讲)7 Z% B1 r) ?9 k01 | 重新认识C++：生命周期和编程范式02 | 编码阶段能做什么：秀出好的code style03 | 预处理阶段能做什么：宏定义和条件编译04 | 编译阶段能做什么：属性和静态断言&05 | 面向对象编程：怎样才能写出一个“好”的类？语言特性 ...
使用onenote记HTML笔记,如何在Windows 10中使用OneNote做笔记
weixin_33502772的博客
06-15 1070
Microsoft OneNote与Windows 10捆绑在一起。这意味着您不必购买Office套件的零售副本或支付Office 365订阅费用就可以使用OneNote记笔记。OneNote是一种数字笔记本，可在您工作时自动保存和同步您的笔记。使用OneNote，您可以执行以下操作：1.在笔记本中输入信息或从其他应用程序和网页中插入信息。2..做手写笔记或画出您的想法。3.使用突出显示和标签可以...
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
kindle中html笔记,如何将kindle阅读器中的笔记、标注导出。，这几步你要了解
weixin_39671405的博客
06-23 1706
在Kindle上读过书后，却不知道怎么将阅读过程中做的笔记、标注导出？下面向大家介绍一种将kindle阅读器中的笔记导出的方法。工具/材料kindle数据线一条可上网电脑一台印象笔记账号(可选)方法/步骤 连接kindle01第一步，将kindle用数据线和电脑连接，并处于该模式，备用。如图好了，以上就是大致内容了，(END)方法/步骤2 进入网站01进入下图网站，因为经验无法加载外链02进入页面...
学习篇 html笔记
热门推荐
qq_46134337的博客
08-06 1万+
html笔记，仅限个人学习，如有雷同纯属巧合，如有不对的地方，还请留言矫正，谢谢
HTML笔记.pdf
07-14
"HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记，涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点： 1. HTML基础知识： * DOCTYPE html是...
HTML 笔记.zip
02-06
整理好的HTML笔记-可能还会有不足的地方,其实做人也不能太挑剔,恰好就行-好了编不下去了这50字-----------------------
前端html笔记
05-17
html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记
HTML笔记.txt
02-25
自己总结的html笔记标签 非常适合初学者参考大牛复习 每个标签都标注了用途 需要的可以下载。
自学HTML笔记
11-17
详细的HTML笔记，有需要的朋友可以下载学习交流，谢谢
韩顺平HTML笔记
10-20
HTML笔记不错的哦，与大家一起分享 Html的基本结构 <html> <元素 属性1=”值” …./> <元素 属性1=”属性值” 属性2=“属性值” …>内容元素> <元素 属性=”属性值”/> </html> 说明 1. 标记通常是成对出现 ...
韩顺平 HTML笔记
10-22
前端开发html笔记
最新发布
05-30
前端开发中，HTML是一门用来制作网页的语言，它由标签组成，比如图片标签、链接标签、视频标签等。HTML文件是网页的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。前端人员通过书写HTML文件来制作网页...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值