首页 > 其他分享 >html学习

html学习

时间：2023-03-06 22:02:25浏览次数：48  
标签：网页 表格 标签 学习 html 按钮 input 属性

快捷键使用

这些快键键仅代表在vscode环境下使用

英文状态 ！+回车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

注释：ctrl+/

<!--  -->

将该行内容复制到下一行：shift+alt+↑/↓

<h1></h1>
<h1></h1>
<h1></h1>

以下代码都是在body中进行实验

整体向后缩进：tab

整体向前缩进：shift+tab

小知识

换行<br>
<p>jciadshfbsadjfhasdf<br>123434234</p>
水平分割线<hr>
<h1>123</h1>
<hr>
<p>jciadshfbsadjfhasdf<br>123434234</p>

文本格式化

标签 说明
b 加粗
u 下划线
i 斜体
s 删除线
标签 说明
strong 加粗
ins 下划线
em 斜体
del 删除线 
    <b>123</b>
    <u>qwer</u>
    <i>123</i>
    <s>qwer</s>

两个表格在视觉上效果相同，但下面这个表格表示强调的语义更加强烈

标签学习1

图片标签

<img src="图片路径" alt="图片未找到" title="图片悬停时显示" width="200" height="350">
//src表示图片存放路径，alt属性只有图片未找到时才会显示
//title属性图片悬停时才会显示,不仅可以用于图片标签，还可以用于其他标签
//如果只设置width或者height中的一个，另一个没设置的会自动等比缩放（此时图片不会变形）
//如果同时设置了width和height，如果设置不当，图片可能会变形

相对路径-下级路径

<img src="图片地址" alt="图片未找到" title="图片悬停时显示" width="200" height="350">

相对路径-上级路径

<img src="图片地址" alt="图片未找到" title="图片悬停时显示" width="200" height="350">

音频标签

常见属性

属性名 功能
src 音频路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持），谷歌不支持
loop 循环播放 
<audio src="./1.mp3" controls autoplay loop></audio>

音频标签支持3种格式：MP3,WAV,OGG

视频标签

常见属性

属性名 功能
src 视频路径
controls 显示播放的控件
autoplay 自动播放（谷歌需要配合muted实现静音播放）
loop 循环播放 
<video src="./123.mp4" controls autoplay muted loop></video>
<!-- 谷歌浏览器可以让视频自动播放，但是必须是静音状态 -->

视频标签支持3种格式：MP4,WebM,Ogg

链接标签

属性 功能
href 跳转地址
target 取值：
_self：默认值，在当前窗口中跳转（覆盖原网页）
_blank:在新窗口中跳转（保留原网页）		 
<a href="https://cn.bing.com/?mkt=zh-CN" target="_blank">跳转到bing搜索</a>
<!-- 在网站开发初期若不知道要跳转的页面，href的值书写为#（空链接） -->
<a href="#" target="_blank">空链接</a>
<!-- 还可以跳转到本地网页 -->
<a href="./123.html" target="_blank">本地网页</a>

简单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>招聘内容</h1>
    <hr>
    <h2>招聘对象</h2>
    <p>日常实习女友/寒暑假实习女友</p>
    <h2>岗位要求</h2>
    <p>有扎实的计算机科学基础，如<strong>操作系统、计算机体系结构、编译原理</strong>等；</p>
    <p>有丰富的逆向、调试经验，熟练使用常见工具，如：IDA、WinDbg、GDB、OD、Xdbg等；</p>
    <p>熟悉x86、ARM或MIPS汇编指令，能熟练使用汇编语言编写工程。</p>
    <p>参加过ACM/ICPC并至少获得铜及以上的奖项</p>
    <h2>工作地址</h2>
    <p>艾欧尼亚</p>
    <img src="图片路径">
</body>
</html>

image-20230306214642880

跳转案例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一个综合案例</h1>
    <hr>
    <h2>音乐播放页面</h2>
    <p>一个音乐播放页面：<a href="./one.html" target="_blank">一首纯音乐</a></p>
    <h2>视频播放页面</h2>
    <p>一个视频播放页面：<a href="./two.html" target="_blank">一个简单的视频</a></p>
</body>
</html>

one.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一首纯音乐</h1>
    <hr>
    <h2>音频</h2>
    <audio src="../1.mp3" controls></audio>
</body>
</html>

two.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>视频页面</h1>
    <hr>
    <h2>视频资源</h2>
    <video src="../123.mp4" controls></video>
</body>
</html>

标签学习2

列表标签

无序列表
标签名 说明
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一项的内容 
<h2>英雄列表</h2>
<ul>
    <li>易</li>
    <li>卡莎</li>
    <li>卡兹克</li>
</ul>

注意：

ul标签中只允许包含li标签

li标签中可以包含任何内容

有序列表
标签名 说明
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一项的内容 
<h2>KDA排名</h2>
<ol>
    <li>上单：9.7</li>
    <li>下路：3.0</li>
    <li>打野：11.1</li>
</ol>

注意：

ol标签中只允许包含li标签

li标签中可以包含任何内容

自定义列表

场景：在网页底部的导航栏通常会使用自定义列表实现

标签名 说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的标题
dd 表示自定义列表的针对主题的每一项内容

特点：

  • dd前会默认显示缩进效果

注意点：

  • dl标签中只允许包含dt、dd标签
  • dt/dd标签可以包含任何内容
<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
</dl>

表格标签

1.基本标签

标签名 说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可以用于包裹内容

注意：嵌套关系 table>tr>td

常见相关属性

属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

注意：实际开发时，针对于样式效果推荐使用CSS设置

<table border="1" width="400" height="300">
    <tr>
        <td>姓名</td>
        <td>才艺</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>蔡徐坤</td>
        <td>唱跳，rap，篮球</td>
        <td>男</td>
    </tr>
    <tr>
        <td>陈立农</td>
        <td>唱跳，rap，篮球</td>
        <td>男</td>
    </tr>
</table>

2.表格标题和表头单元格标签

标签名 名称 说明
caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题，通常用于第一行，默认内部文字加粗并居中显示

注意：

  • caption标签书写在table标签内部，在table标签和tr标签之间
  • th标签书写在tr标签内（用于替换td标签）
<table border="1" width="400" height="300">
    <caption><strong>明星才艺单</strong></caption>
    <tr>
        <th>姓名</th>
        <th>才艺</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>蔡徐坤</td>
        <td>唱跳，rap，篮球</td>
        <td>男</td>
    </tr>
    <tr>
        <td>陈立农</td>
        <td>唱跳，rap，篮球</td>
        <td>男</td>
    </tr>
</table>

3.表格的结构标签

标签名 说明
thead 表格头部
tbody 表格主体
tfoot 表格底部

注意：表格结构标签用于包裹tr标签

表格的结构标签可以省略

<table border="1" width="400" height="300">
    <caption><strong>明星才艺单</strong></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>才艺</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>蔡徐坤</td>
            <td>唱跳，rap，篮球</td>
            <td>男</td>
        </tr>
        <tr>
            <td>陈立农</td>
            <td>唱跳，rap，篮球</td>
            <td>男</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>nine</td>
            <td>总结</td>
            <td>总结</td>
        </tr>
    </tfoot>
</table>

4.合并单元格

左上原则：

  • 上下合并：只保留最上面的，删除其他
  • 左右合并：只保留最左边的，删除其他

给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并，将多列的单元格水平合并

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead，tbody，tfoot）

<table border="1" width="400" height="300">
    <caption><strong>明星才艺单</strong></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>才艺</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>蔡徐坤</td>
            <td rowspan="2">唱跳，rap，篮球</td>
            <td>男</td>
        </tr>
        <tr>
            <td>陈立农</td>
            <!-- <td>唱跳，rap，篮球</td> -->
            <td>男</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>nine</td>
            <td colspan="2">总结</td>
            <!-- <td>总结</td> -->
        </tr>
    </tfoot>
</table>

表单标签

input标签

type属性值：

标签名 type属性值 说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于之后上传文件
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能，之后配合js添加功能 
文本框：<input type="text" name="" id="">
<br>
密码框：<input type="password" name="" id="">
<br>
单选框：<input type="radio" name="" id="">
<br>
多选框：<input type="checkbox" name="" id="">
<br>
上传文件：<input type="file" name="" id="">

placeholder属性

属性名 说明
placeholder 占位符，提示用户输入的文本 
文本框：<input type="text" placeholder="请输入账号">
<br>
密码框：<input type="password" placeholder="请输入密码">

radio属性实现

属性名 说明
name 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked 默认选中 
性别：<input type="radio" name="gender">男
      <input type="radio" name="gender">女
性别：<input type="radio" name="gender" checked>男
      <input type="radio" name="gender">女

多选框的默认选中属性也是checked

file属性

属性名 说明
mutiple 多文件选择 
<input type="file" multiple>

button属性

标签名 type属性值 说明
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能，之后配合js添加功能 
<form action="">
    <input type="text" placeholder="账号">
    <br>
    <input type="password" placeholder="密码">
    <br>
    <input type="submit" value="提交注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">
</form>

value属性表示按钮上显示的字符

button标签
标签名 type属性值 说明
button submit 提交按钮。点击之后提交数据给后端服务器
button reset 重置按钮。点击之后恢复表单默认值
button button 普通按钮，默认无功能，之后配合js添加功能 
<button>一个普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

注意：

  • 谷歌浏览器中默认是提交按钮
  • button标签是双标签，更便于包裹其他内容：文字，图片等
select下拉菜单标签

标签组成：

  • select标签：下拉菜单的整体
  • option标签：下拉菜单的每一项
<select>
    <option>上海</option>
    <option selected>浙江</option>
    <option>海南</option>
</select>

selected：下拉菜单的默认选中，如果不设置，默认显示第一项

textarea文本域标签

常见属性：

  • cols：规定文本域内可见宽度
  • rows：规定文本域内可见行数（高度）
<textarea rows="20" cols="50">
</textarea>

注意：

  • 右下角拖曳可以改变大小
  • 实际开发一般用CSS来进行设置
label标签

使用方法1:

  1. 使用label标签把内容（如：文本）包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值

使用方法2：

  1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  2. 需要把label标签的for属性删除即可
性别：<input type="radio" name="gender" id="nan"><label for="nan">男</label>
      <label><input type="radio" name="gender">女</label>

语义化标签

没有语义的布局标签

div,span标签

<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>

两个div标签不在一行，两个span标签的内容在同一行

有语义的布局标签

移动端使用

标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章 
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>

字符实体

网页只能识别一个空格，不能识别多个空格

空格：&nbsp;

空格&nbsp;&nbsp;&nbsp;&nbsp;空格

综合案例

<table border="1" width="300" height="400">
    <caption><strong>学生信息表</strong></caption>
    <tr>
        <th>年级</th>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
    </tr>
    <tr>
        <td rowspan="2">高三</td>
        <td>张三</td>
        <td>11</td>
        <td>1</td>
    </tr>
    <tr>
        <!-- <td>高三</td> -->
        <td>李四</td>
        <td>1</td>
        <td>13</td>
    </tr>
    <tr>
        <td>总评</td>
        <td colspan="3">right</td>
        <!-- <td>right</td>
        <td>right</td> -->
    </tr>
</table>

表单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>恋爱招聘</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
        <br>
        <br>
        性别：
        <label ><input type="radio" name="gender" checked>男</label>
        <label ><input type="radio" name="gender" >女</label>
        <br>
        <br>
        所在城市：
        <select>
            <option>上海</option>
            <option selected>浙江</option>
            <option>海南</option>
        </select>
        <br>
        <br>
        婚姻状况:
        <label ><input type="radio" name="marry" checked>未婚</label>
        <label ><input type="radio" name="marry" >已婚</label>
        <label ><input type="radio" name="marry" >保密</label>
        <br>
        <br>
        喜欢的类型：
        <label ><input type="checkbox" >可爱</label>
        <label ><input type="checkbox" checked>性感</label>
        <label ><input type="checkbox" >御姐</label>
        <label ><input type="checkbox" >大叔</label>
        <label ><input type="checkbox" >帅哥</label>
        <br><br>
        个人介绍：
        <br>
        <textarea name="" id="" cols="60" rows="10"></textarea>
        <br>
        <br>
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁，单身</li>
            <li>真诚寻找另一半</li>
        </ul>
        <br>
        <input type="checkbox" name="" id="">我同意
        <br>
        <br>
        <input type="submit" value="免费注册">
        <button type="reset">重置信息</button>
    </form>
</body>
</html>

image-20230306214642880

标签：网页,表格,标签,学习,html,按钮,input,属性
From： https://www.cnblogs.com/Jinx8823/p/17185673.html

相关文章

  • Python 学习07 模块和标准库
    66、模块的导入67、标准库......
  • FPGA 学习笔记：Vivado 2018.2 MicroBlaze Uartlite 配置
    前言Vivado版本：Vivado2018.2+VivadoHLS2018.2，VivadoHLS2018.2用于SDK开发，C语言开发创建基于MicroBlaze的【BlockDesign】后，添加了【AXIUartlite】，发现烧写......
  • Java应用【XV】使用Java中的TensorFlow来构建和训练机器学习模型
    如果您觉得本博客的内容对您有所帮助或启发，请关注我的博客，以便第一时间获取最新技术文章和教程。同时，也欢迎您在评论区留言，分享想法和建议。谢谢支持！一、引言1.1TensorFlow......
  • Linux学习记录(五)：环境变量
    Linux系统修改环境变量PATH一般将bin文件夹添加至PATH中，比如ffmpeg/conda等LD_LIBRARY_PATH可执行文件运行时链接库路径只在当前终端有效，终端export（对某一用户）......
  • 常用的化学学科学习实验工具软件介绍
    学习化学，除了要注重书本知识及做好实验外，学会利用计算机工具软件也是一个很好的方法和技巧，我们可以使用各种化学软件工具来加深对化学知识的理解和应用。下面简单介绍一些......
  • Linux & 标准C语言学习 <DAY7>
    一、windows下获取方向键:  1、导入#include<conio.h>  2、通过getch()获取键盘上的键值    上：72 下：80 左：75 右：77  二、Linux下获取方向......
  • 今日学习之二分法排序
    二分法排序主要思想是在数组中截取一个数center，然后将数组分成leftArr、rightArr两部分，其中leftArr全部小于center，rightArr全部大于center（这里没有考虑有重复值的情况），最后......
  • Python学习_1
    1——在Python3.x中可以使用中文作为变量名/方法/变量2——Python变量使用前必须赋值而非声明类型，变量赋值以后该变量才会被创建。3——Python运算符%不仅可以用来求余......
  • outerHtml和innerHtml的区别
    一、区别1）innerHTML:从对象的起始位置到终止位置的全部内容,不包括HTML标签。2）outerHTML:除了包含innerHTML的全部内容外,还包含对象标签本身。二、例子t......
  • 吴恩达学习笔记6（logistic regression）
    2023-03-0616:54:15星期一接下来讨论y是离散值情况下的分类问题分类问题举例此时y是有两个取值的变量：0or10表示负类：没有某个东西1表示正类：有某个东西开发一......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99