前两天一直在忙着写作业,写着写着发现自己的知识感觉要不够用了
最近一直在写类 写方法 实现类 对象这些东西 突然想写写别的 于是就想着开始学习前端
也就是网站类的东西
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>
<!--特殊符号-->
<!--格式& ;-->
>
©
<!--但这个空格只能空一个-->
空 格 :<br>
<!--你再看看这个?-->
空 格 <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>
<a href="http://www.baidu.com" target="_self"> 点击我跳转到百度</a>
<a href="demo01.html">
<img src="Resource/1.png" alt="图片!"title="悬停文字"width="300"height="300">
</a>
<a href="demo01.html">
<img src="Resource/1.png" alt="图片!"title="悬停文字"width="300"height="300">
</a>
<a href="demo01.html">
<img src="Resource/1.png" alt="图片!"title="悬停文字"width="300"height="300">
</a>
<a href="demo01.html">
<img src="Resource/1.png" alt="图片!"title="悬停文字"width="300"height="300">
</a>
<a href="demo01.html">
<!--锚链接
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>
下面只展示表单的网页简单呈现
每天如果能发现许多不一样的想法
那一定要记下来,最起码临死之前还能有点自己的灵魂