H5基础入门笔记

已于 2022-05-07 18:43:42 修改
阅读量2.7k 收藏 2
点赞数 2
分类专栏： html 文章标签： html5
于 2021-12-19 09:11:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LongLiveThePRC/article/details/122020356
版权

H5基础入门笔记

正文

1.H5的结构

<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<!--1.一定要记住一点，h5中的标签是可以一直嵌套的-->
<!--其次，所有的h5内容都写在body标签内部-->
<!--其实h5学不学都行，只要看得懂就行，因为大多数的代码都可以用别人的-->
<!--而且如果想不起来用那个标签可以直接百度，非常方便-->
</body>
</html>

2.<br>标签

<!--2.br是换行标签，这个标签很常用，尽量记住，-->
<font color="blue">白日依山尽 <br> 黄河入海流 <br></font>
黑马旅游网<br>

3.<h>标签

<!--3.h1-h6是不同大小的文字属性-->
<h1>黑马旅游网 </h1>
<h2>黑马旅游网</h2>
<h3>黑马旅游网</h3>
<h4>黑马旅游网</h4>
<h5>黑马旅游网</h5>
<h6>黑马旅游网</h6>

4.<p>标签

<!--4.p是段落标签指的是一个段落，会将标签里的内容变成一段-->
<p>
<!--  b是加黑标签标签就是p标签的一个内层标签-->
  <b >hello world</b>
</p>

5.<b>标签

<!--  5.b是加黑标签标签就是p标签的一个内层标签-->
  <b>hello world</b>

6.<hr>标签

<!--6.hr是水平线标签，在标签里面可以设置水平线的属性，不过不建议这样使用-->
<!--因为css该修改标签样式的话更好用-->
<!--其中，width是宽度，height是高度，size是尺寸-->
<hr color="red" width="200"size="200" align="left">此处显示一条水平线

7.<i>标签

<!--7.i是斜体标签，不过应该不会很常用-->
<i>hello world</i><br>
<font size="50"face="宋体"color="RED">hello world</font>

8.<img>标签

<!--  8.img是图片属性,其中src是图片路径-->
<img  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642080491&t=11d3d54b26158e9b023afbcd86aa89b5" alt="hello">

9.<table>标签

  <!--  9.table是表单标签,他下属有tr和td,分别是他的行和列-->
  <!--  其中border属性可以显示边框-->
  <!--  rowspan和colspan分别是行跨度和列跨度属性可以让td标签合并-->
  <!--  其次,table和tr,td标签可以相互套娃-->
<CENTER>
  <table border="1">
    <caption>hello world</caption>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>魏</td>
      <td>男</td>
      <td>12</td>
    </tr>
    <tr>
      <td>申</td>
      <td>女</td>
      <td>10</td>
    </tr>

  </table>
</CENTER>

<hr>


<CENTER>
  <table border="1">
    <caption>hello world</caption>

    <tbody>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>魏</td>
      <td>男</td>
      <td>12</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
      <td>申</td>
      <td>女</td>
      <td>10</td>
    </tr>
    </tfoot>
  </table>
</CENTER>

<hr>


<CENTER>
  <table border="1">
    <caption>hello world</caption>

    <tbody>
    <tr>
      <th rowspan="2">姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <!--      <td>魏</td>-->
      <td>男</td>
      <td>12</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td>申</td>
      <td colspan="2">女</td>
      <!--      <td>10</td>-->
    </tr>
    </tfoot>

  </table>
</CENTER>

<hr>

10.<a>标签

<!--10.a是超链接标签,href是超链接地址,a标签内部可以写超链接的内容-->
<a href="4.黑马程序员公司简介.html">黑马程序员公司简介</a>
早上起床

11.<ol>列表和<li>标签

<!--11.有序列表ol-->
<!--12.li是行标签,一个li占一行-->
  <ol type="I">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>刷牙</li>
    <li>洗脸</li>
  </ol>

13.<ul>无序列表

<!--13.无序列表ul-->
<ul>
  <li>睁眼</li>
  <li>看手机</li>
  <li>穿衣服</li>
  <li>刷牙</li>
  <li>洗脸</li>
  <li>拖地</li>
</ul>

14.<form>表单

<!--14.from标签内写的input标签都可以被发送和接收-->
<!--input标签里面的type属性可以选username和password,submit,data,email,textarea,color
week,radio,checkbox,file,buttom,image,hidden这些见名知意,也可以自己尝试-->
<!--from标签下的method属性可以选get和post.分别是发送给服务器也页面-->
<form action="#" method="get">
  username<input name="username"><br>
  password<input type="password"name="password">
  <input type="submit" value="login">
</form>

15.H5的注册案例

<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<!--15.下面是一个h5写的注册案例-->
<form action="#" method="get">
<table align="center" bgcolor="" border="1">
  <tr>
    <td>
      username
    </td>
    <td>
      <input type="text" name="username" placeholder="please input">
    </td>
  </tr>
  <tr>
    <td>
      password
    </td>
    <td>
      <input type="password" name="password"placeholder="please input">
    </td>
  </tr>
  <tr>
    <td>
      email
    </td>
    <td>
      <input type="email" name="email"placeholder="please input">
    </td>
  </tr>
  <tr>
    <td>
      name
    </td>
    <td>
      <input type="text" name="name"placeholder="please input">
    </td>
  </tr>
  <tr>
    <td>
      phoneNo
    </td>
    <td>
      <input type="tel" name="phoneno"placeholder="please input">
    </td>
  </tr>
  <tr>
    <td>
      sex
    </td>
    <td>
      <input type="radio" name="female"placeholder="please input">female
      <input type="radio" name="female"placeholder="please input">male
    </td>
  </tr>
  <tr>
    <td>
      birthday
    </td>
    <td>
      <input type="datetime-local" name="birthday"placeholder="please input">
    </td>
  </tr>
  <tr>
    <td>
      resure
    </td>
    <td>
      <input type="text" name="resure"><img sizes="20" width="100" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.eaeOunC0HJmzAA0M9fU1LQAAAA?w=276&h=149&c=7&r=0&o=5&dpr=1.25&pid=1.7">
    </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <input type="submit" name="submit">
    </td>
  </tr>

</table>
</form>

</body>
</html>
君问归期魏有期
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5课堂入门笔记（完）
ChengMeng11的博客
03-21 1652
HTML5入门笔记 一、网页设计中 的软件的安装设置 1、typroa—笔记本工具（方便记录说明文档，图片等内容） 减号加空格可出现此点 文件名：由 基本文件名.扩展名（扩展名来确定这个文件的打开方式） 打开扩展名的操作如图所示： 1、打开我的电脑或者此电脑 2、点击查看，将文件扩展名选中 3、则，文件后面则会显示扩展名 2、greenshot—截图工具 设置 ...
H5(html5)入门教程
热门推荐
DAIYA_JIE的博客
09-11 1万+
html零基础01
Html 5菜鸟教程（建议新生学习）
YJlio的博客
09-22 3520
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
HTML详细基础（一）H5标签入门
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
09-26 1053
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
HTML5基础入门
weixin_56695490的博客
12-15 460
1.标题标签 HTML提供了6个等级的网页标题，即<h1></h1>-<h6></h6>。每个标题独占一行。 标签<h1></h1>-<h6></h6>字体大小、粗细依次递减。 2.段落标签和换行标签 段落标签(paragraph) <p></p> 换行标签(break))(单标签) </br> 段楼标签与换行标签的区别 段落标签行与行之间有较大的间隙 换行标签只是换行，行与
H5学习笔记一
naiheshushu的博客
03-27 225
1.网页的构成一个网页是很多的物理文件组成的：html文件、图片文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上。然后就能让用户看了。用户通过浏览器，访问网址，服务器上面的文件就会通过http请求悄悄地传输到用户的电脑中的临时文件夹中，在用户的电脑中执行、渲染、呈递2.HTMLHTML是英语HyperText Markup Language的缩写，超文本标记语言HTML是负责描...
H5学习笔记（一）
chan_1030261721的博客
01-22 627
1、web与internet   1、internet是一个全球性的计算机互联网络    因特网、互联网    主要服务：www，email、bbs（电子公告板）、ftp（上传文件）    目标：信息共享     实现技术：     Tcp/ip协议、     分组交换原理，信息在网络上被分成许多个小数据，会进行 分组传输，到达目的地后将数据重组为信息。 2、web     前端主要就是实现客户端...
H5笔记.zip
02-14
10. **HTML CSS笔记.zip**：这又是一个压缩文件，可能包含HTML和CSS的基础知识，如标签语义、盒模型、选择器、布局模式等，可能是初学者入门的好材料。 总的来说，这个压缩包为学习和掌握HTML5提供了丰富的资源，...
前端学习（一）——H5学习笔记
08-09
HTML入门
CSS入门笔记
04-15
【CSS入门笔记】 CSS，全称层叠样式表（Cascading Style Sheets），是一种用于表现HTML或XML（包括如SVG、MathML等各种XML方言）文档的样式语言。它分离了内容与表现，使得网页设计更加灵活，易于维护。这篇笔记...
H5 CSS笔记 (2).docx
11-26
1. 第一阶段：HTML和CSS基础，JavaScript入门，学习基本的网页布局和交互。 2. 第二阶段：深入JavaScript，理解DOM操作和事件处理，可能涉及Ajax异步请求。 3. 第三阶段：使用jQuery简化DOM操作和动画，或者学习...
html入门到放弃笔记
05-15
2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 ：也是文本，但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接 普通文本 b : 普通字符 b 超...
HTML5 基础知识总结
Fory40的博客
07-09 145
HTML5 知识基础总结，工作中常用的只需要这一篇就够了；
HTML 教程 |菜鸟教程
wqksoul的博客
11-16 5794
HTML 教程 |菜鸟教程
h5(html5)入门
生活不易，喵喵叹气
09-04 2932
h5(html5)基础入门 学习目标 目标????️： 学习PC端网站布局，最终网站：品优购静态网站 精通网页布局，也是我们前端人员必备的技能，为后面学习 Javascript 打下坚实基础 资源网站????： 百度：www.baidu.com W3C：www.w3school.com.cn MDN：https://developer.mozilla.org/zh-CN/ 学习路线 1. HTML 简介导读 目标： 能够说出网页的基本组成 能够说出什么是HTML 能够说出常用的浏览器 能够说出Web
h5小白笔记day07
weixin_68489110的博客
07-17 71
原理：定位的元素超出文档流什么时候需要用到定位？在同一块文档流的区域内，需要同时叠放多个标签定位的流程：1.通过 position 属性设置定位的参照物2.通过 方位属性，设置具体方位的定位数据，方位属性有 top，left，right，bottom，他是用来设置距离参照物有多远他们的优先级是 left>righttop>bottomposition 属性的值static：静态定位，无参照物，不定位relative：相对定位，以 元素本身没有移动之前的位置为参照物。
H5学习笔记
weixin_51767061的博客
06-29 144
H5相关的标签和表单
HTML5学习笔记
NineDay4321的博客
12-05 392
html学习笔记
html5路由如何在nginx上部署（vite+vue3）
最新发布
m0_58002043的博客
07-09 339
我们知道前端常用的有Hash 模式和html5模式的路由，hash模式在nginx上部署不需要额外的操作，而html5模式则需要额外设置，这里介绍下如何在nginx根地址（location / {}）下部署和在非根地址上（location /admin{}）部署。
h5从入门到精通 pdf
02-04
《H5从入门到精通》是一本介绍HTML5技术的书籍，它系统地介绍了HTML5的各种特性和用法，适合初学者和有一定基础的读者学习和参考。 这本书首先介绍了HTML5的基本概念和语法规则，让读者了解HTML5技术的起源和基本...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

君问归期魏有期

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值