HTML笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_51246916/article/details/112913053

在这里插入图片描述

表格和列表

表格标签

在这里插入图片描述

表格的基本语法

<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>

在这里插入图片描述

列表分为

有序列表（用的少
无序列表（重点
自定义列表（重点

在这里插入图片描述
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值

name 和value是每个表单元素都有的属性值主要给后台人员使用.
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新增的表单属性

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

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

input::placeholder {
            color: pink;
        }

HTML笔记

HTML

表格和列表

表格标签

表格的属性值

合并单元格

表单标签

表单标签

表单元素

input

name

value

checked

maxlength

submit

reset

button

file

label

select

textarea

HTML5新特性

1.1 HTML5新增的语义化标签

1.2 HTML5新增的多媒体标签

1.3 HTML5新增的input类型

1.4 HTML5新增的表单属性

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