一、前端学习之HTML编写静态页面
本人也是前端入门小白 先从HTML开始学起
最近花了3天时间学完HTML基础 并练了一个Demo 算是温习一下
1、如图:
2、代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML练习Demo</title>
</head>
<body>
<!--
作者:offline
时间:2019-03-27
描述:顶部 header
-->
<h1>加多宝</h1><br />
<br />
<hr />
<div style="width: 100;">
<p style="text-align: center;">首页
日志
相册
音乐
收藏
关于我</p>
<hr />
</div>
<!--
作者:offline
时间:2019-03-27
描述:左侧 left
-->
<div id="you" style="width:20%;position:absolute;right:10px;text-align:left;">
<hr style="width:0px;height:300px;position:absolute;right:350px;"/>
<p style="font-size: 40px;color: saddlebrown;">置顶文章</p>
<hr />
<p>HTML初学者-王阳同学</p>
<p>努力到未能为力</p>
<p>拼搏到感动自己</p>
<p>为测试开发打下良好基础</p>
<hr />
</div>
<!--
作者:offline
时间:2019-03-27
描述:中部 center
-->
<div>
<h2 style="text-align: left;">1、website Demo测试标题</h2>
<p style="size: a3; text-align: start;">北京时间2019-0-27-22-13</p>
<div style="width: 70%;">
<ol>
<li>真可惜!我不是漂亮女孩,我的这个开头也不好。但开头不好,并不妨碍下面的干货不好噢。下面这80个Python学习教程,涵盖了从Python入门,到基础巩固,再到进阶强化的各类练习项目。就像......就像一个长相一般,但灵魂有趣的女孩子哇。好啦我退下啦,请自便哦。</li>
</ol>
</div>
<h2 style="text-align: left;">2、website Demo测试标题</h2>
<p style="size: a3; text-align: start;">北京时间2019-0-27-22-13</p>
<div style="width: 70%;">
<ol>
<li>真可惜!我不是漂亮女孩,我的这个开头也不好。但开头不好,并不妨碍下面的干货不好噢。下面这80个Python学习教程,涵盖了从Python入门,到基础巩固,再到进阶强化的各类练习项目。就像......就像一个长相一般,但灵魂有趣的女孩子哇。好啦我退下啦,请自便哦。</li>
</ol>
</div>
<h2 style="text-align: left;">3、website Demo测试标题</h2>
<p style="size: a3; text-align: start;">北京时间2019-0-27-22-13</p>
<div style="width: 70%;">
<ol>
<li>真可惜!我不是漂亮女孩,我的这个开头也不好。但开头不好,并不妨碍下面的干货不好噢。下面这80个Python学习教程,涵盖了从Python入门,到基础巩固,再到进阶强化的各类练习项目。就像......就像一个长相一般,但灵魂有趣的女孩子哇。好啦我退下啦,请自便哦。</li>
</ol>
</div>
<hr />
<p style="text-align: center; color: aqua;">版底@王阳 于北京时间晚上10点24分</p>
</div>
</body>
</html>
3、HTML标签整理:
1.<p></p> 标签 也表示段落的意思
2.<a></a> 超链接 与href一起使用
3.<img /> 定义图片 与src一起使用
4.<br> 换行
5.<hr/> 水平线
6.<!-- 这是一个注释 --> 注释
7.<base> 描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
8.<link> 标签定义了文档与外部资源之间的关系,标签通常用于链接到样式表
9.<style> 标签定义了HTML文档的样式文件引用地址
10.<script> 标签用于加载脚本文件 如: JavaScript
11.<meta> 标签- 使用实例 http://www.runoob.com/html/html-head.html
12.<table>定义表格 <tr><td><th>
13.<ul> 定义无序序列 <li> style="list-style-type:circle" 来定义显示的序号
14.<ol> 有序序列 <li> type="" 可以使用type定义显示序号
15.<dl> 自定义标签 <dt>自定义列表 <dd>自定义列表项
16.<div> 页面布局 与css连用
17.<span> 内元素进行组合
18.<form> 表单
19.type="radio" 单选框
20.type="checkbox" 复选框
21.<select>下拉框 <option>
22.<textarea>文本框 rows高 cols宽
23.<iframe> 设置窗口
24.<script> JavaScript标签
25.position:absolute 绝对的意思
4、HTML小手册
HTML 速查列表
HTML 速查列表. 你可以打印它,以备日常使用。
HTML 基本文档
<!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> 可见文本... </body> </html>
基本标签(Basic Tags)
<h1>最大的标题</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>最小的标题</h6> <p>这是一个段落。</p> <br> (换行) <hr> (水平线) <!-- 这是注释 -->
文本格式化(Formatting)
<b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd> <pre>预格式化文本</pre> <small>更小的文本</small> <strong>重要的文本</strong> <abbr> (缩写) <address> (联系信息) <bdo> (文字方向) <blockquote> (从另一个源引用的部分) <cite> (工作的名称) <del> (删除的文本) <ins> (插入的文本) <sub> (下标文本) <sup> (上标文本)
链接(Links)
普通的链接:<a href="http://www.example.com/">链接文本</a> 图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 邮件链接: <a href="mailto:[email protected]">发送e-mail</a> 书签: <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>
图片(Images)
<img src="URL" alt="替换文本" height="42" width="42">
样式/区块(Styles/Sections)
<style type="text/css">
h1 {color:red;} p {color:blue;}
</style> <div>文档中的块级元素</div> <span>文档中的内联元素</span>
无序列表
<ul> <li>项目</li> <li>项目</li> </ul>
有序列表
<ol> <li>第一项</li> <li>第二项</li> </ol>
定义列表
<dl> <dt>项目 1</dt> <dd>描述项目 1</dd> <dt>项目 2</dt> <dd>描述项目 2</dd> </dl>
表格(Tables)
<table border="1"> <tr> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>表格数据</td> <td>表格数据</td> </tr> </table>
框架(Iframe)
<iframe src="demo_iframe.htm"></iframe>
表单(Forms)
<form action="demo_form.php" method="post/get"> <input type="text" name="email" size="40" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit" value="Send"> <input type="reset"> <input type="hidden"> <select> <option>苹果</option> <option selected="selected">香蕉</option> <option>樱桃</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form>
实体(Entities)
< 等同于 < > 等同于 > © 等同于 ©
如果有不规范的地方 请多多指点
另外如果有想热爱"IT"工作的可以加QQ:294402584 一起学习,共同进步