您的位置：首页 > 编程语言 > Python开发

Python_Weekend_20

2018-03-26 23:10 417 查看

利用 Sublime Text 写网页简单的结构：

文本-h1-h6/p/br/hr/sub/sup/strong/em/del/ins/q

列表-ul/ol(li)/dl（dt/dd)

图像-img/figure/ficaption

链接-a(页面链接/瞄链接)

表格-table/tr/td/th/thead/tbody/tfoot

表单-form/input(text/password/radio/checkbox/file/submit/reset/email/date/url/search)/

select/textarea

音视频-adio /video(source)

所有代码都写在 Html 标签下他都是最顶级的标签

签基本上都有开始标签和结束标签标签还可以有属性

标签（tag/element) -承载内容

层叠样式表（cs)-显示/渲染页面通常的换皮肤都是换样式表

JavaScript -交互式行为（另外一种语言不是java）

<!doctype htm1>
<!--文档类型声明 说明页面使用的式HTML5的规范-->
<html>
<!-- head标签中的内容不会显示再浏览器主窗口中但是
这里面通常包含了网页的元数据信息
-->

<head>
<meta charset="utf-8">
<!--title 标签代表网页的标题-->
<title>李东兵的个人主页</title>
<style >
h1{
color:#ff0000;
font-size: 3cm
}

</style>
</head>
<!--body标签中的内容就是要显示在浏览器窗口中的信息-->
<body>
<h1 title="这是一个提示信息">Hello,World!</h1>
<h2 title="你再点我试试" >欢迎来到本空间 </h2>

<h3>How old are you? </h3>
<button onclick ="foo()">OK</button>
<script >
function foo() {
window.alert('大家好');

}
</script>

</body>

<html>
<!--
HTML -Hyper-Text Markup Language -
代码都是写在标签里面 浏览器就是这种语言的执行环境
它执行HTML书写的代码将结果渲染到浏览器窗口中
-->

在浏览器打开是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<audio controls autoplay >
<!--controls 播放控件 loop 循环播放  -->
<source src="./recources/gequ.mp3" type="audio/mp3">
</audio>
</p>
<p>
<video controls width="400" >
<source src="./recources/hello.mp4" type="video/mp4">
</video>
</p>
<a id ="top"></a>
<!--这叫锚点 作用是对应下面的返回顶部-->
<h1>hello,world</h1>
<hr>
<p>床上明月光<sup>1</sup></p>
<p>意识地上霜<sub>2</sub></p>
<p>举头望<del>明月</del></p>
<p>低头思<strong><em>故乡</em></strong></p>
<q>其实地上没有路，只是走的人多也变成了路</q>
<h3>我的个人范围</h3>
<dl>
<dt>
<figure>

<img src="./images/五角星.png" alt = '五角星'>
<figcaption>图1.这是一个说明图文</figcaption>
<!--图片下面加说明-->
</figure>
</dt>
<li>吃</li>
<li>喝</li>
<li>嫖</li>
<li>赌</li>
</dl>
<ol>
<dt>
<img src="./images/五角星.png" alt = '五角星'>
<li>我</li>
<li>想</li>
<li>说</li>
</ol>
<dl>
<dt>
<img src="./images/五角星.png" alt = '五角星'>
<dt>阅读</dt>
<dd>每天晚上十点钟准时阅读</dd>
<dd>明天晚上十点钟准时阅读</dd>
<dt>音乐</dt>
<dd>每天回家会听</dd>
<dt>旅行</dt>
<dd>明年去澳门香港</dd>
</dl>
<a href="http://www.badu.com" target="_blank ">百度一下</a>
<a href="http://www.sina.com">浪一下哦</a>
<a href="   index.html">我的首页</a>
<a href="#top">返回顶部</a>
<!--锚链接-->
<a href="index.html#top">返回顶部</a>
<!--返回这个网址的顶部-->
<a href="mailto:348998691@qq.com">联系站长</a>
<!--设置发邮件-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=348998691&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:634163114:51" alt="联系我" title="联系我"/></a>
<!--设置添加QQ聊天-->
<table border = '1' >
<caption>学生成绩表</caption>
<thead>
<tr>
<td>班级</td>
<td>姓名</td>
<td>成绩</td>
<td>成绩</td>
<th>Django</th>
<th>Flask</th>
</tr>
<tbody>
<tr>
<td rowspan="2" >1801</td>
<td>ptthon</td>
<td>78</td>
<td>78</td>
<td colspan="3">90</td>
</tr>
<tr>

<td>李小龙</td>
<td>90</td>
<td>90</td>
<td colspan="2">90</td>
</tr>
<tr>
<td>1802</td>
<td>王大锤</td>
<td>80</td>
<td>80</td>
<td>70</td>
<td>90</td>
</tr>
<tr>
<td>1803</td>
<td>孙晓</td>
<td>99</td>
<td>99</td>
<td>50</td>
<td>90</td>
</tr>
</tbody>
<tfoot>

</table>
<form action="" method="past" enctype="multipart/form/data">
<!--action= 是表示由服务器上的某个程序来执行这个提交的表单 method="past"是要传文件 enctype="multipart/form/data"必须写-->
<fieldset>
<legend>必填信息</legend>
<p>
<input type="text" name="username" placeholder="请输入您的用户名"  required>
</p>
<p>
<input type="password" name="password" placeholder="请输入您的口令" required>
</p>
<p>
<input type="radio" name="gender" checked>男
<input type="radio" name="gender" >女
</p>
<p>
<input type="checkbox" name="fav" >阅读
<input type="checkbox" name="fav" >健身
<input type="checkbox" name="fav" >旅游
<input type="checkbox" name="fav" >交友
<input type="checkbox" name="fav" checked>游戏
</p>
<p>
<input type="date" name="birthday">
</p>
</fieldset>
<fieldset>
<legend>必填信息</legend>
<p>
<input type="email" name="email" placeholder="请输入您的邮箱">
</p>
<p>
<select name='prov'>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="四川" selected>四川</option>
</select>
</p>
<p>
<textarea  rows="5" cols= "30" name= "intro"></textarea>
</p>
<p>
<input type="file" name="file">
</p>
<p>
<input type="submit" value="立即注册" >
<input type="reset" name="重新填写">
</p>
</fieldset>
</form>

</body>
</html>

这是初步做的一些简单小技能，可以实现简单的需求。包括在线视频，音频，选择单项，多项选择，在线QQ联系，图片，表单等。

下面是写的时候，一些注释：

HTML
Hyper-Text Markup Language
超文本标记语言
html  / htm 后缀名 命名文件

<html>             # 开始标签
<meta charset="utf-8"> 支持多国语言
<title>李东兵的个人主页</title>
<style >
h1{
color:#ff0000;
ont-size: 3cm
}    # 样式本
body>      # 身体

网页内容   </h1>是一级标题 第一段
<button>OK</button>  按钮
<script >   写代码
function  定义函数相当于main()
</script>
</body>

<html>

直接点文件浏览器打开/文本内右键 Opin browser
不是写在窗口里面的都是写在head里面

火的语言 :支持面向对象 全栈开发 动态
JavaScript  写服务器比Python写的更好更好运行

{  代表代码开始   }结束  ；每行写完

javascript
<script >
function foo() {
window.alert('大家好');

}
</script>

<hr>  是横线
<p>巨头望明月</p>
<p>低头思故乡</p>   <p>是换行

<p>床上明月光<sup>1</sup></p>      光 字有上标1
<p>意识地上霜<sub>2</sub></p>  霜 字有下标2
<p>巨头望<del>明月</del></p>   巨头望明月  删除明月的横线
<p>低头思<strong><em>故乡</em></strong></p>   加粗 斜体

<q>其实地上没有路，只是走的人多也变成了路</q>
自动加引用号  "其实地上没有路，只是走的人多也变成了路"

ul>li * 3    按TAB 键 弹出
<ul>
<li>吃</li>
<li>喝</li>
<li>嫖</li>
<li>赌</li>
</ul>

三种列表 ul ol dl

<dt>
<img src="./images/house.png" alt = '五角星'>

放图片进来   位置一定要用相对路径

有顺序用ol

<a href="   "></a>  超链接标签  里面加http://www.网址
target="_blank 打开链接新窗口打开

如何做腾讯聊天的链接
功能性链接 http://shang.qq.com/v3/widget.html  QQ推广聊天链接
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=348998691&site=qq&menu=yes">点我聊一聊</a>

table>tr*5>td*2  做个表格 五行两列

border = '1'  表格显示线格
<caption>学生成绩表</caption>列表名字
<td rowspan="2">1801</td> 跨行 这里是2行合成一行
<td colspan="3">90</td> 跨列 合并3列
<form>   表单
</form>

placeholder="请输入您的用户名"> 占位符 写字后 自动消失  h5里面支持

<input type="radio" name="gender" >男     选择项  都叫gender 就是单选只能选一个
<input type="radio" name="gender" >女

<input type="radio" name="gender" checked>男 默认选男

<input type="checkbox" name="fav" >交友    正方形按钮 多选项
<input type="checkbox" name="fav" checked>游戏  默认勾中这项

required 作用是必须要写了此项才能提交

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航