＜前端初步＞学习 HTML5 的一些心得

最新推荐文章于 2022-07-26 15:23:35 发布
最新推荐文章于 2022-07-26 15:23:35 发布
阅读量167 收藏
点赞数
文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CircaOVO/article/details/120606168
版权

前两天一直在忙着写作业，写着写着发现自己的知识感觉要不够用了

最近一直在写类 写方法 实现类 对象这些东西 突然想写写别的 于是就想着开始学习前端

也就是网站类的东西 

Markdown 基本语法 | Markdown 官方教程（先看这个，把这个简单的编程语法，快捷键，习性学会）

这就相当于HTML的基础部分了（我是学完HTML5才看到的，这个时候我大彻大悟（就应该先去看这个）） 

前端的标准三套

W3C标准

W3C标准包括：

结构化标准语言（HTML XML）

表现标准语言（CSS）

行为标准（DOM　ECMAscript）

其中HTML就属于 实现网站最基本的结构


<!--如果说这些代码可以运行的话，那说明作者是爱撸代码的小权-->
<!--如果说这些代码不能运行的话，那我也不知道是谁写的-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部-->
<head>
<!-- meta 描述型标签-->
    <meta charset="UTF-8">
    <meta name="keywords" content="你可真闲">
    <meta name="description" content="居然还看我的博客">
    <title>Title</title>
</head>
<!--代表网页的主题-->
<!--标题标签六级标题-->
<body>
<h1>这是不是一级标题</h1>
<h2>看起来挺像二级标题</h2>
<h3>看起来挺像三级标题</h3>
<h4>看起来挺像四级标题</h4>
<h5>看起来挺像五级标题</h5>
<h6>没办法了，也只能当老五的弟弟了</h6>
<!--段落标签-->
<p>你仔细看看以下四行的代码</p>
<p>这是一个段落</p>
<!--换行标签-->
分开间隔是不是不同<br>
你可真是个大聪明 <br>

<!--水平标签-->
<hr>
<!--斜体粗体标签-->
粗体 <strong>i love you </strong><br>
斜体 <em>i love you </em>
</body>
</html>
<!--特殊符号-->
<!--格式& ；-->
&gt;
&copy;
&nbsp;
<!--但这个空格只能空一个-->
空     格   ：<br>
<!--你再看看这个?-->
空&nbsp;&nbsp;&nbsp;格 <br>

<!--图像标签-->
<!--常见的图像格式
JPG GIF PNG BMP-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<!--img学习
src:图片地址
相对地址（推荐使用），绝对地址：根目录
-->
<body>
<img src="Resource/1.png" alt="我嫩爹！"title="悬停文字"width="300"height="300">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<!--链接标签-->
<!--a标签
href：必填，表示要跳转到的页面
target：表示窗口在哪里打开
   _blank 在新标签中打开
   _self 在本页面中打开

-->
<body>
<a name="top"></a>
<!--通过#来作为标记-->
<a href="demo01.html">点击我跳转第一个网站</a>&nbsp;
&nbsp;
<a href="http://www.baidu.com" target="_self"> 点击我跳转到百度</a>
<a href="demo01.html">&nbsp;
  <img src="Resource/1.png" alt="图片！"title="悬停文字"width="300"height="300">
</a>
<a href="demo01.html">&nbsp;
  <img src="Resource/1.png" alt="图片！"title="悬停文字"width="300"height="300">
</a>
<a href="demo01.html">&nbsp;
  <img src="Resource/1.png" alt="图片！"title="悬停文字"width="300"height="300">
</a>
<a href="demo01.html">&nbsp;
  <img src="Resource/1.png" alt="图片！"title="悬停文字"width="300"height="300">
</a>
<a href="demo01.html">&nbsp;

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<!--功能性链接
邮箱链接：mailto
QQ链接：可以上网用QQ链接推广来粘贴-->
<a href="#top">回到顶部</a>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内元素和块元素
1.块元素
无论内容多少 该元素独占一行
（p,<h1>--<h6>）
2.行内元素
内容撑开宽度，左右都是行内元素的可以排在一行-->

<!--列表标签--->
<!--1.有序列表-->
<ol>
  <li>JAVA</li>
  <li>Python</li>
  <li>C++</li>
  <li>前端</li>
</ol>
<!--2.无需列表-->
<ul>
  <li>JAVA</li>
  <li>python</li>
  <li>C++</li>
  <li>前端</li>
</ul>
<!--自定义列表
dl ： 标签
dt ： 列表名称
dd : 列表内容
-->

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
行 tr
列 td
为什么是
-->
<!--为什么使用表格
简单通用
结构稳定
1.基本结构
  单元格
  行
  列
  跨行
  跨列
  -->
<table border="1px">
  <tr>
<!--colspan 跨列   -->
<!--rowspan 跨行   -->
  <td colspan="2" >1-1</td>
  <td colspan="2" >1-2</td>
    </tr>
    <tr>
  <td>1-2</td>
  <td>1-3</td>
  <td>1-4</td>
      <td>1-5</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--表单form
action:表单提交的位置,可以时网站,也可以是请求处理地址
method:post,get 提交方式
get 方式提交 可以在url中看到我们的信息--不安全 但高效
post 方式提交 看不到url中的信息--安全  且可以上传大文件-->
<form action="demo01.html" method="get">
<p>名字:<input type="text" name="username"></p>
  
<p>密码:<input type="password" name="word"></p>
<p>
<!--  单选框标签
  input type ="radio"
  value: 单选框的值
  name:表示组
  设置单选框的值一定要选组

  -->
  <p>
  <input type="radio" value="boy"  name="sex"/>男
  <input type="radio" value ="girl" name="sex"/>女
  </p>
<!--多选框
类比单选框即可-->
  <p>
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value=chat" name="hobby">聊天
    <input type="checkbox" value="play" name="hobby">玩游戏

  </p>
<!-- input button 普通按钮-->
<!-- input image 图像按钮-->
<!-- input submit 提交按钮-->
<!-- input reset 充值按钮-->
  <p>
    <input type="button" name="btn1" value="点击变长">
<!--    <input type="image" src="Resource/1.png">-->
  <p>
    <!--  下拉框
     两个关键字 select option
    -->
<!--  文本域
cols="50" row ="10"-->
    <select name="下拉列表" >
      <option value="china">中国</option>
      <option value="US">美国</option>
      <option value="eth">瑞士</option>
      <option value="India">印度</option>
    </select>
  </p>反馈
  <textarea name="textarea" id="" cols="300" rows="100"></textarea>
<!-- 文件域
input type="file" name="files"-->
  <p>
    <input type="file" name ="files">
    <input type="button" value="上传" name="upload">
  </p>
  <p>
<!--    邮箱验证-->
    邮箱:<input type="email" name="email">
    </p>
  <p>
URL:<input type="url" name="url">
  </p>
<!--数字-->
  <p>
  <input type="number" name="num" max="1000">
  </p>
<!--滑块
input type ='range'-->
  <p><input type="range" name="" min="0" max="100"></p>

  <p>
  <input type="submit">
  <input type="reset">
  </p>
<!--  还有搜索框 input search-->



</form>
</body>

</html>

下面只展示表单的网页简单呈现

每天如果能发现许多不一样的想法

那一定要记下来，最起码临死之前还能有点自己的灵魂

 

认真撸代码的小权
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5学习心得总结(推荐)
09-28
下面小编就为大家带来一篇HTML5学习心得总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5学习心得1
929029的专栏
03-11 777
html5比之html4，body中有许多新增标签，即：​ header,article,section,time,address,figure,figcaption,details,summary,mark,s,aside,footer以及新增属性pubdate,datetime(time专属标签)。​ 其中article用于可以单独拿出的模块，如一篇或一段博客、文章，评论等。
学习HTML5的体会（一）
yuhuijun_1的专栏
02-21 4012
对越来越多游戏的着迷，很好奇，他们是怎么写出来的。 看了http://www.iteye.com/topic/1122395的文章，的确佩服作者的毅力及学习能力。 如何才算是“熟悉”？ HTML常用标签你全都认识并能说出它们相同、和不同的特性吗？CSS中所有属性是否熟悉？特别是CSS3中的新特性和动画？是否已经完全明白JavaScript面向对象、闭包、原型链、作用域等概念，并能熟练
HTML5 学习小结
Ant Ren的专栏
06-04 5955
HTML5 小结 使用HTML5也是断断续续的有些历史了，但是没有系统的总结过，最近发现公司的图书馆有不少藏书，就借了一本HTML5+CSS3的快速阅读了一下，重温了一些知识，顺便做一下小结：   HTML5特性 相对于传统网页技术来说，首先我们得明白为什么HTML5会出现。它带来的改变和规范并不是一点小改动而已，在网页技术的方方面面，甚至前端后端都有深远的影响。比如：描述性更强的新标签，
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端学习项目 HTML CSS Less H5 .zip
最新发布
01-05
前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML...
Web前端基础：HTML5文本标签.pptx
05-06
<font>元素控制文本的字体、...字符格式化标记<b>、<i>、<u>、<sub>、<sup>,<del>等 特殊字符的表示法:：空格，< , >,” 段落级的格式化标记： 标记<p>、<div>、<span>等 标题标记<h1>---<h6> 换行标记<br> 水平线<h
Web前端基础：HTML5语义化标签.pptx
05-06
HTML5语义化标签<article>示例<article> <h1>文章标题</h1> 这是一篇文章 <article>评论1...</article> <article>评论2...</article></article>HTML5语义化标签<section>标签<section>标签定义文档中的节（section、...
Web前端基础：HTML5技术介绍.pptx
05-06
所有的HTML文档都遵循由W3C规定的HTML规范。 在文档的第一行可能出现这样的一句DTD引用语句，这句语句说明了HTML遵循了W3C的标准。...DOCTYPE>、<html>、<head>、<title>和<body>等HTML基本标记。;THANK YOU!
HTML5学习笔记（总结提炼版）——001
03-14
HTML5学习笔记（总结提炼版）——001
CSS3 HTML5学习心得
为了N
12-11 1062
1.字符串 str.charAt(字符串索引)，若索引超过字符串长度，返回空。 str.indexof(“某字符”)，找到这个字符顺序第一次出现的索引。 str.lastIndexof(“某字符”)，找到某字符串倒序最后出现的索引，若没有返回-1。 str.Uppercase()，将str转换为大写。 str.Lowercase()，将str转换为小写。 str.substr(2,3)，
html5-学习总结
づ開始懂了的博客
11-30 787
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 cale
学习HTML5的心得总结，希望大家可以一起学习，本文包含了一些HTML5中简单标签的使用，如果有错误望指正，以后将持续更新。
weixin_45904557的博客
02-22 1347
文章目录 前言 一、HTML5是什么？ 二、标签 1.双标记标签（<标签名> 内容 ） 2.单标记标签（<标签名>） 三、网页开发工具 1.文档类型声明标签 2.字符集 四、基本结构标签 1.html标签，根标签 2.文档的头部 3.文档的标题 4.文档的主体 五、图像标签 1.src属性 2.alt属性 3.title属性 4.路径 六、排版标签 1.段落标签 总结 前言...
HTML5第一周学习心得（经验）
YPY1345的博客
05-19 804
  之前也没想到学习HTML5会这么顺利，我现在是学了一个星期的HTML5，个人感觉不是太难，只要你用心去学，上课认真听老师讲课，【老师要你做的题目最后自己能做出来，并理解透彻，在你做题目的时要根据自己的思维（想法）去做，有错误的地方先自己思考，按照自己的想法去改，如果试错了几（多）次并自己毫无头绪了，然后再去请教老师或同学，这样能加深你的理解】（重要）；英语比较差的同学也完全不用担心（本人高中英...
HTML5学习总结
qq_53329531的博客
07-26 561
html5学习总结
HTML5 学习总结1
PzLu's Blog
07-19 377
主要记录 web 发展新纪元 web网页发展三阶段 Web1.0 ——HTML+CSS Web2.0 ——Ajax Web3.0 ——HTML5+CSS3 三大NB组织 WHANTWG——Web Hypertext application technology Working Group W3C——World wide web consortium IETF——Inter...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red; font-size:20px; } h2{ color:yellow; } .hello{ background: #cccccc; } .world{ font-weight:bold; } #haha{ color:blue; } </style> </head> <body> <p>welcome to css!</p> <p>hello world!</p> <h2>WEB前端开发</h2> <h3>Java开发</h3> <hr> <p class="hello">welcome to css!</p> <p>hello world!</p> <h2>WEB前端开发</h2> <h3>Java开发</h3> <div class="hello">主讲：Hector</div> <div class="world">主讲：Hector</div> <hr> <h1 id="haha">哈哈</h1> </body> </html> 解释下每行的意思
07-13
<h2>WEB前端开发</h2> <h3>Java开发</h3> <hr> ``` 这些是一些HTML标签，分别显示了一些文字和标题，并使用了`hr`标签插入了一个水平线。 ```html <p class="hello">welcome to css!</p> <p>hello world!</p> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值