前端基础1——HTML5

目录

  • 初识HTML
  • 网页基本标签
  • 列表
  • 表格
  • 视频和音频
  • 页面结构
  • 内联框架
  • 表单语法

初识HTML

Hyper Text Markup Language（超文本标记语言）

<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="zh"><!--head标签代表网页头部-->
<head>
<!--    meta 描述性标签，表示用来描述网站的一些信息-->
<!--    一般用来做SEO--><meta charset="UTF-8"><meta name="keywords" content="java学习"><meta name="description" content="一起来学习java"><!--网站标题--><title>Title</title><!-- < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素--></head>
<!--body代表主体-->
<body>
Hello World！
</body>
</html>

网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>p换行1</p>
<p>p换行2</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
换行1 <br/>
换行2 <br/>
<!--换行标签比较紧凑，段落标签有明显段间距-->
<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体：<strong>I love you </strong><br/>
斜体：<em>I love you </em><br/>
<!--特殊符号-->
空格：1&nbsp;2&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;4<br/>
空格：1 2  3   4<br/>
大于号&gt;<br/>
小于号&rt;<br/>
版权符号&copy;<br/>
<!--特殊符号记忆：&开头;结尾，只要在idea中&敲出后就有提示-->
</body>
</html>
  • 图像标签
  • 链接标签
    href： 必填，表示要跳转到那个页面
    target：表示窗口在那里打开
    _blank：在新标签中打开
    _self： 在自己的网页中打开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像和链接标签</title>
</head>
<body>
<!--
src:资源地址
相对地址，绝对地址
../上级地址
alt：在图片加载失败的时候，就会用文字代替
title:鼠标悬停在图片上时，所显示的名字
width height 图片的高和宽
-->
<img src="../xxx.jpg" alt="图片加载失败" title="123">
<br/>
<!--
href：跳转页面的地址
a标签内文字：即显示的文字
可以把图片放在a标签内，点击图片跳转网页
target:表示在哪打开新网页_self:当前标签打开 _blank:新的页面中打开
-->
<a href="https://www.baidu.com" target="_blank" title="123">点击跳转百度</a>
<br/>
<a href="https://www.baidu.com"><img src="../xxx.jpg" alt="图片加载失败"></a>
<!--锚链接
1.需要一个标记锚
2.跳转到标记
页面内跳转
#
-->
<a name="top"></a>
<a href="#top">回到顶部</a>
<br/>
<!--也可以在网址后添加#号跳到对应网站的对应位置-->
<a href="https://www.baidu.com#down">百度底部</a> <br/>
<!--功能性链接
邮箱链接：mailto
qq链接
-->
<a href="mailto:xxxxxxqq.com">点击联系我</a>
<a target="_blank"href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes"><img border="0"src="http://wpa.qq.com/pa?p=2::52" alt="点击这里加我领取小电影"title="点击这里加我领取小电影"/>
</a>
</body>
</html>

行内元素和块元素

**块元素：**无论内容多少，该元素独占一行
例如：

<p></p><hr/> <h1>...<h6>

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

例如：

<a><strong><em>

列表

  • 列表就是信息资源的一种展现形式，它可以使信息结构化条理化，并且以列表的样式显示出来，以便浏览者能更快捷地获取相应的信息
  • 可以在列表中嵌套列表，内列表和外层列表缩进明显区分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body>
<!--有序列表-->
<ol><li>1</li><li>2</li><li>3</li>
</ol>
<!--无序列表-->
<hr/>
<ul><li>123<ul><li>1</li><li>2</li><li>3</li></ul></li><li>2</li><li>3</li>
</ul>
<hr/>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容-->
<dl><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>abc</dt><dd>a</dd><dd>b</dd><dd>c</dd>
</dl>
</body>
</html>

在这里插入图片描述

表格

表格的基本结构：

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px"><tr>
<!--        跨列--><td colspan="3">1-1</td></tr><tr>
<!--        跨行--><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>

视频和音频

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音频和视频</title>
</head>
<body>
<!--视频
controls 控制面板
autoplay 自动播放
-->
<video src="xxx/xxx.xxx" controls autoplay></video>
<!--音频
-->
<audio src="xxx/xxx.xxx" controls autoplay></audio>
</body>
</html>

页面结构

元素名描述
header标题头部区域的内容（用于页面或者页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用
nav导航类辅助内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面结构</title>
</head>
<body>
<!--页面头部-->
<header><h2>网页头部</h2>
</header>
<section><h2>网页主体</h2>
</section>
<footer><h2>网页脚部</h2>
</footer>
</body>
</html>

内联框架

iframe标签，必须要有src属性即引用页面的地址

给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架</title>
</head>
<body>
<!--
ifram内联框架
w-h：“小窗的高度和宽度”
src：引用页面地址 name：框架标识名
-->
<iframe src="http://www.baidu.com"frameborder="0"width="1024"height="800"name="hello">
</iframe>
<a href="http://www.bilibili.com" target="hello">111</a>
<!--B站自动生成内联标签：-->
<!--<iframe src="//player.bilibili.com/player.html?aid=xxx&bvid=xxx&cid=xxx&page=1"-->
<!--        scrolling="no"-->
<!--        border="0"-->
<!--        frameborder="no"-->
<!--        framespacing="0"-->
<!--        allowfullscreen="true">-->
<!--</iframe>-->
</body>
</html>

表单语法

from标签，action属性为所提交的目的地址，method选择提交方式。可以选择使用post或者get方式提交

  • get效率高，但在url中可以看到提交的内容，不安全，不能提交大文件
  • post比较安全且可以提交大文件
标签说明
input标签大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
select标签下拉选择框
textarea标签文本域

input标签
可以提交用户名、密码等等

属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name指定表单元素的名称（提交时所对应的key）
value元素的初始值，radio必须提供
size指定表单元素的初始宽度。当type为text或者password时，以字符为单位；其他type以像素为单位
maxlengthtype为text或者password时，输入的最大字符数
checkedtype为radio或者checkbox时，指定按钮是否被选中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
method：post get请求方式
-->
<form action="xxx/xxx" method="get">
<!--    文本输入框：input type="text"--><p>用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20"></p><p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"></p>
<!--    submit提交表单，reset清空--><p><input type="submit"> <input type="reset"></p>
<!--    radio单选框标签 value即单选框的值，在提交时对应value
name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
checked:默认被选中
--><p>性别：<input type="radio" value="boy" name="sex"/><input type="radio" value="girl" name="sex"/></p><p>爱好：<input type="checkbox" value="b" name="hobby">打篮球<input type="checkbox" value="s" name="hobby">唱rap<input type="checkbox" value="d" name="hobby">跳舞</p><p>
<!--        按钮--><input type="button" name="btn1" value="value:按钮上文字">
<!--        图片按钮默认是提交：和submit类似--><input type="image" src="xxx/xxx"></p>
<!--    下拉框：selected:默认选项
--><p>你来自：<select name="location"><option value="china">中国</option><option value="us" selected>美国</option><option value="japan">日本</option></select></p>
<!--    文本域--><p><textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea></p>
<!--    文件域--><p><input type="file" name="file"><input type="button" name="upload" value="上传"></p>
<!--    邮件、url：会简单验证是否是邮箱地址
number 数字验证--><p>邮箱：<input type="email" name="email">url：<input type="url"></p>
<!--    滑块--><p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p>
<!--    搜索框--><p>搜索：<input type="search"></p>
</form>
</body>
</html>

一些其他的属性

属性说明
readonly只读，不可更改
disable禁用
hidden隐藏，虽然不可见但是会提交
id标识符，可以配合label的for属性增加鼠标的可用性
placehodertext 文字域等输入框内的提示信息
required不能为空
patten正则表达式验证

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/425613.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数字图像处理系统组成 及研究内容

数字图像处理系统组成 及研究内容

数字图像处理系统组成 及研究内容 .数字图像处理系统的组成 基本图象处理系统的结构 图像输入设备 扫描仪分辨率与扫描图象的大小 分辨率&#xff1a;单位长度上采样的像素个数DPI(dot/inch) 图像输出设备 喷墨打印机 激光打印机 数字印刷机 .图像处理技术研究的内容 图…
阅读更多...
[剑指offer][JAVA]面试题第[18]题[删除链表的节点]

[剑指offer][JAVA]面试题第[18]题[删除链表的节点]

【问题描述】[中等] 给定单向链表的头指针和一个要删除的节点的值&#xff0c;定义一个函数删除该节点。返回删除后的链表的头节点。注意&#xff1a;此题对比原题有改动示例 1:输入: head [4,5,1,9], val 5 输出: [4,1,9] 解释: 给定你链表中值为 5 的第二个节点&#xff0…
阅读更多...
Python3 循环

Python3 循环

L [Bart, Lisa, Adam] for i in L:print("这是for循环的" "输出 hello:" i.upper())i 0 while i < len(L):print("这是while 循环的输出 hello:" L[i])i i 1转载于:https://www.cnblogs.com/RHadoop-Hive/p/10432219.html
阅读更多...
HDU 6168 Numbers 思维

HDU 6168 Numbers 思维

本题就是告诉你有两个数串 其中第一个数串中的每两个元素ai和aj&#xff08;i<j&#xff09;相加得到的元素 放入第二个数串里 但由于两个数串给搞的比较混乱 需要解决从中识别出第一个数串并将其输出出来 本题其实仔细一想就能发现 这个问题 我们从数串的特点上考虑 第二…
阅读更多...
前端基础2——CSS3

前端基础2——CSS3

目录什么是CSSCSS的导入方式选择器美化网页元素盒子模型浮动定位什么是CSS Cascading Style Sheet 层叠级联样式表 CSS&#xff1a;表现层&#xff08;美化网页&#xff09; 字体&#xff0c;颜色&#xff0c;边距&#xff0c;高宽&#xff0c;背景图片&#xff0c;网页定位&…
阅读更多...
Socket常见错误代码与描述

Socket常见错误代码与描述

如错误代码10061&#xff0c; 说明服务器已经找到&#xff0c;但连接被服务器拒绝&#xff0c; 连接失败原因可能是&#xff1a; 端口号设置错误&#xff1b; 2.服务器没有处于监听状态 &#xff08;即ServerSocket –>Activetrue&#xff09;&#xff1b; 3.数据包被服务…
阅读更多...
关于set的自定义比较函数的使用及结构体的上下二分用法

关于set的自定义比较函数的使用及结构体的上下二分用法

如果set的类型是个结构体 我们需要定义重载函数 ***set 容器模版需要3个泛型参数&#xff0c;如下&#xff1a; template <class Key,class Compare less <key>,class Alloc alloc>class set {...}; 第一个是元素类型&#xff0c;必选&#xff1b; 第二个指定…
阅读更多...
BZOJ 3456: 城市规划(dp+多项式求逆)

BZOJ 3456: 城市规划(dp+多项式求逆)

传送门 解题思路 这道题就是求带标号的无向连通图个数&#xff0c;首先考虑\(O(n^2)\)的做法&#xff0c;设\(f_i\)表示有\(i\)个节点的无向连通图个数&#xff0c;那么考虑容斥&#xff0c;先把所有的无向图求出&#xff0c;即为\(2^{C(n,2)}\)&#xff0c;再减去不联通的情况…
阅读更多...
前端基础3-1——JavaScript

前端基础3-1——JavaScript

目录什么是JavaScript快速入门引入JavaScript数据类型和基本语法入门1.变量2.number3.字符串4.布尔值5.逻辑运算6.比较运算符7.浮点数8.数组9.对象10.流程控制11.Map和Set集合严格检查模式use strict函数定义函数变量的作用域方法什么是JavaScript 概述 JavaScript是一门世界上…
阅读更多...
[剑指offer][JAVA]面试题第[17]题[打印从1到最大的n位整数][大整数][递归回溯]

[剑指offer][JAVA]面试题第[17]题[打印从1到最大的n位整数][大整数][递归回溯]

【问题描述】[中等] 输入数字 n&#xff0c;按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3&#xff0c;则打印出 1、2、3 一直到最大的 3 位数 999。示例 1:输入: n 1 输出: [1,2,3,4,5,6,7,8,9]说明&#xff1a;用返回一个整数列表来代替打印 n 为正整数【解答思路】…
阅读更多...
html:(40):块级元素和内联块级元素

html:(40):块级元素和内联块级元素

1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下&#xff0c;其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里&#xff0c;直到一行排不下&#xff0c;才会换行&#xff0c;其宽度随元素的内…
阅读更多...
Django中提供了6种缓存方式

Django中提供了6种缓存方式

开发调试内存文件数据库Memcache缓存&#xff08;python-memcached模块&#xff09;Memcache缓存&#xff08;pylibmc模块&#xff09;1. 开发调试 12345678910111213141516171819202122232425262728293031323334353637383940# 此为开始调试用&#xff0c;实际内部不做任何操作…
阅读更多...
HDU-6180 Schedule

HDU-6180 Schedule

题意 给n个工作的开始时间和结束时间 每个工作需要用机器来完成 让我们给这n个工作规划机器 规划出尽可能少机器数目 以及计算最少的机器时间(机器时间为机器使用的最终结束时间减去开始时间)分析 这道题其实就是一个工作的开始结束形成了一个线段 让我们求多个线段不交叉不重…
阅读更多...
数字图像处理技术的应 用领域

数字图像处理技术的应 用领域

数字图像处理技术的应 用领域 图像处理技术的主要应用领域有&#xff1a; 生物医学、遥感技术、工业生产、军事技术、 通信技术、侦缉破案、气象预报、宇宙探索、考 古等&#xff0c;已经遍布国民经济的各个领域。 发展历史 20世纪20年代&#xff1a;报纸业 Bartlane电缆图…
阅读更多...
前端基础3-2——JavaScript

前端基础3-2——JavaScript

目录内部对象DateJSONAJAX面向对象编程操作BOM对象&#xff08;重点&#xff09;操作DOM对象&#xff08;重点&#xff09;操作表单formjQuery如何巩固前端基础内部对象 标准对象 Date 基本使用 转换 JSON JSON是什么 在javascript中&#xff0c;一切皆为对象&#…
阅读更多...
ltp makefile 解析

ltp makefile 解析

困惑于 /include/mk/automake.mk中出现了第一个目标 而makefile却任然将all当做最终目标 测试了一番后发觉&#xff1a; ifeq ($(MAKE_3_80_COMPAT),1)# Trick make 3.80 into thinking that the default goal is all..PHONY: defaultdefault: allelse #pick this.DEFAULT_GOA…
阅读更多...
数字图像处理(拓展)

数字图像处理(拓展)

1&#xff0e;数字图像处理及特点 数字图像处理又称为计算机图像处理&#xff0c;它是指将图像信号转换成数字信号并利用计算机 对其进行处理的过程&#xff0c;以提高图像的实用性&#xff0c;从而达到人们所要求的预期结果。 数字图像处 理还有以下特点&#xff1a; ① 处理…
阅读更多...
HDU-5532Almost Sorted Array LIS问题

HDU-5532Almost Sorted Array LIS问题

题意 就是检查这个序列是否删除一个元素就能变成非严格的有序序列 表面上就是一个卡条件检查数组的问题 分析&#xff1a; 在向量中upperbound插入上界 这样能够使数组里的数列长度尽可能大 因为 我们是在不断用小数替换数列中的数 大的数直接拼接到最后 code #include…
阅读更多...
文件和结构体

文件和结构体

LITTLESUN本来是在学队列啊&#xff0c;在手动模拟队列的地方发现了结构体这个小怪&#xff0c;为了能赶紧打队列大BOSS就赶紧跑过来填下文件和结构体的坑鸭&#xff01; 转载于:https://www.cnblogs.com/LITTLESUNwl/p/10435877.html
阅读更多...
电磁波谱与可见光谱

电磁波谱与可见光谱

电磁波谱与可见光谱 电磁辐射波 在实际的图像处理应用中&#xff0c;最主要的图像来源于电磁 辐射成像。 电磁辐射波包括无线电波、微波、红外线、可见光、 紫外线、X射线、γ射线。 电磁辐射波的波谱范围很广&#xff0c;波长最长的是无线电波 为3102m&#xff0c;其波长是…
阅读更多...
最新文章

Copyright @ 2022~2023