从零开始的H5生活
作为一个新手,要从头学习Html编程语言,需要从最基础的开始。有耐心慢慢来,很容易就看懂了。我所使用的编程软件是Hbuilder。
1.Html文档结构
包括head和body两部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
注意开头必须有文档类型强调!
<!DOCTYPE html>
<!--
文档声明:必须有,而且必须在文档页面的第一行。
Html5已经简化为以上样式
-->
<html>
<head>
<!--Head标签内的信息用于描述网页的基本信息,即元数据-->
<title>我的世界</title>
<!--网页的标题,即网页选项卡上的文字-->
<link rel="icon"href="img/111.png" />
<!--使用link标签连接网页图标
rel:声明连接文件的类型
type属性可省略
href属性:表示图片的路径地址
-->
<meta charset="UTF-8">
<meta name="keywords"content="你好,H5,高大上" />
<!--网页关键字,用半角逗号隔开-->
<meta name="description"content="--helloword哈哈哈哈" />
<!--meta标签常用属性
1.charset 设置文档字符集编码格式》》》常见字符集编码格式:utf-8万国码Unicode,GB-2312国标码,gbk扩展的国标码
2.http-equiv将我们的信息写给浏览器看,可选属性值Content-Type refresh set-cokie,配合content属性.(http-equiv属性只是表明需要设置那一部分,具体内容放到content属性中)
3.name属性:使用方法与http-equiv相同,常用属性值keywords author description
将信息写给搜索引擎看
--> </head> <body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
<h1>这是标题标签h1</h1>
<h2>比h1小点</h2>
<h6>标题标签有6种h1最大,h6最小</h6>
<hr />
<!--hr 水平线-->
<p>这是P标签 →空格)©→版权 代表一个段落,<br/>两个P标签,中间隔一行。br(自闭和标签)换行标签</p><br />
<p>这个也是一 个段落,用P标签包裹的</p>
<blockquote cite="http://www.jredu100.com">
这是引用标签
</blockquote>
<pre>这是pre标签。预格式
我被换行了。标签内内容格式原封不动</pre> helloworld
<!--body 网页主题内容 注释快捷键 ctrl+/-->
<!--有序列表OL-->
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
<!--无序列表UL -->
<ul>
<li style="list-style: none;">无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
<!--定义描述列表-->
<dl>
<dt>这是DL的标题DT,一个DL一般只有一个</dt>
<dd>这是DL的描述项dd</dd>
<dd>这是DL的描述项dd2</dd>
</dl>
<a name="t"></a>
<!--<img src="img/tour.png" alt-->
*********分割线**************<br />
<span style="color: red;font: '微软雅黑';font-size: 24px;font-weight: bold;">我真帅</span>
<em>em表示强调,强调的样式为倾斜</em>
<strong>强调样式加粗</strong> <i>i标签表示倾斜,没有强调效果</i>
<b>b标签表示加粗,没强调效果</b>
<q>表示短引用,自带双引号</q>
<s>表示有误文本删除线</s>
<cite>cite表示引用,浏览器表示为倾斜</cite>
<code>仅仅表示为代码,浏览器等宽显示</code> <small>small比正常的标签字体小一号,可以多层嵌套,一直小到最小字体</small>
<big>big标签大一号</big>
<img src="img/111.png"title="和尚"alt="这是一张图"/>
<!--img表示图片
src 图片的地址,可以是网络图片,相对路径
title 图片标题
alt 图片不显示时显示的文字
align 设置图片文字对齐方式
-->
<a href="liebiao.html"target="_blank">
<!--
【a标签】
href表示跳转的地址。1 跳转的地址可以是网络连接
2 可以通过相对路径站内其它HTML文件,
相对路径的确定
a,如果在同意文件夹,直接写文件名
b 如果目标文件在当前文件夹下一层,直接写“文件夹名/文件名”
c 如果目标文件在当前文件上一层“../文件名”
target表示页面打开的位置:
1 _self代表自身页面打开
2 _blank新页面打开
title 超链接标题,鼠标指上去显示的提示
--> </body>
</html>
8.表格 table
(看上边线,有几条就有几个td)
<!doctype html>
<html>
<head>
<mata charset="UTF-8">
</head>
<body>
<table border="4" cellspacing="4"bordercolor="black">
<tr>
<th colspan="2">出赛,王昌龄</th>
</tr>
<tr>
<td rowspan="4"background="img/002.png"width="120"></td>
<td>秦时明月汉时关,</td>
</tr>
<tr>
<td>万里长征人未还。</td>
</tr>
<tr>
<td>但使龙城飞将在,</td>
</tr>
<tr>
<td>不教胡马度淫官。</td>
</tr> </table>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action=""method="get">
<fieldset>
<legend>用户注册</legend>
<table >
<tr>
<td style="height: 30px">登录名:</td>
<td>
<input type="text"name="name" />(可包含a-z,0-9和下划线)
</td> <td>
<img src="img/read.gif" /><b>阅读贵美网服务协议</b>
</td>
</tr>
<tr>
<td style="height: 30px">密码:</td>
<td>
<input type="password"name="psw" />(至少包含6个字符)
</td> <td rowspan="8">
<textarea style="height: 250px;width: 220px;overflow-x: hidden;overflow-y: scroll;resize: none;"readonly="readonly">欢迎阅读服务条款 </textarea>
</td>
</tr>
<tr>
<td style="height: 30px">再次输入密码:</td>
<td>
<input type="password"name="psw" />
</td> <td></td>
</tr>
<tr>
<td style="height: 30px">电子邮箱:</td>
<td>
<input type="text" name="mail" />(必须包含@字符)
</td> <td></td>
</tr>
<tr>
<td style="height: 30px">性别:</td>
<td>
<input type="radio"name="sex"value="男" />
<img src="img/Male.gif" />男
<input type="radio"name="sex"value="女" />
<img src="img/Female.gif" />女
</td> <td></td>
</tr>
<tr>
<td style="height: 30px">头像:</td>
<td>
<input type="file"name="headpic" />
</td> <td></td>
</tr>
<tr>
<td style="height: 30px">爱好:</td>
<td>
<input type="checkbox"name="hobby" value="运动"/>运动
<input type="checkbox"name="hobby" value="聊天"/>聊天
<input type="checkbox"name="hobby" value="玩游戏"/>玩游戏
</td> <td></td>
</tr>
<tr>
<td style="height: 30px">喜欢的城市:</td>
<td>
<select name="city">
<option title="请选择">请选择</option>
<optgroup label="山东省">
<option title="青岛">青岛</option>
</optgroup>
<optgroup label="北京市">
<option title="海淀区">海淀区</option>
</optgroup> </select>
</td> <td></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit"value="同意右侧条款,提交并注册信息" disabled="disabled"/> <input type="reset"value="重填" />
</td> <td></td>
</tr>
</table>
</fieldset>
</form> </body>
</html>
从零开始的H5生活的更多相关文章
- 从零开始的 Hexo 生活(一)入门安装篇
目录 前言 一.Hexo 是什么 1.什么是静态网站 2.为什么选择静态网站 3.为什么选择 Hexo 二.Markdown 是什么 1.为什么要学 Markdown 2.怎么学 Markdown 三 ...
- 从零开始制作H5人脸融合小游戏
去年的建军节,一个展示军装照的H5人脸融合游戏火遍朋友圈,带来很好的传播效果.最近欧冠决赛要来了,公司决定做一个寻找和你最像的欧冠球星的H5游戏,那么该怎么做呢?认真分析了一下,这个游戏其实用到的技术 ...
- 从零开始的JS生活(三)——内置对象
咱们继续进行我们的正经的JS介绍.今天所要跟大家讲述的是JS中十分常用.十分常用.十分常用的内置对象. 一.世界上最熟悉的陌生就是,当你看着数组.而我看着你... - 数组对象 1.数组的概念 在内存 ...
- 从零开始的JS生活(二)——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- 从零开始的JS生活(一)——JS简介、变量及基本结构
本K在经过三个静态站制作的狂风暴雨之后,终于开始了JavaScript的学习.作为一只从来没有正儿八经接受过计算机语言的小白,居然能够跟上浩哥的课程进度,我的内心都被我的才智震惊到了,果然本K是天生丽 ...
- 从零开始的PHP生活Day1
PHP 什么是PHP? PHP(Hypertext Preprocessor,超文本预处理器)是一种服务器端的.跨平台的.HTML嵌入式的弱类型开源脚本语言. 1.服务器端:PHP需要使用服务器软件进 ...
- ORB_SLAM3 + ROS采坑实录(从零开始的毕设生活第一弹)
ORB-SLAM3配置 https://github.com/UZ-SLAMLab/ORB_SLAM3 https://github.com/shanpenghui/ORB_SLAM3_Fixed E ...
- OO的第一次死亡
久仰OO大名,总是想着提前做点准备,其实到头来还是什么准备都没有做,所以这学期就是从零开始的面向对象生活,也因此遇到了很多的问题. 第一次作业——多项式加减 第一次作业历来是较为简单的,但是对于面向对 ...
- NOIP2018滚粗祭(周记更新至11.25)
还好吧, 好像回归之后 还是有时间去机房转一转的 一个特别生动的例子就是 体育会考就去机房呆了一上午. 这里又要吐槽一下信息技术会考 stm我拿到的第一道题就是 https://www.luogu ...
随机推荐
- 存储那些事儿(三):OpenStack的块存储Cinder与商业存储的融合
OpenStack是一个美国国家航空航天局和Rackspace合作研发的云端运算软件,以Apache许可证授权,并且是一个自由软件和开放源代码项目.OpenStack是IaaS(基础设施即服务)软 ...
- Leetcode_19_Remove Nth Node From End of List
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41778305 Given a linked list, r ...
- 单点登录之CAS SSO从入门到精通(第三天)
开场白 各位新年好,上海的新年好冷,冷到我手发抖. 做好准备全身心投入到新的学习和工作中去了吗?因为今天开始的教程很"变态"啊,我们要完成下面几件事: 自定义CAS SSO登录界面 ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(九)
我们回到matchRun方法中去尝试第一次修改,部分代码如下: CCActionMoveBy *moveBy = [CCActionMoveBy actionWithDuration:duration ...
- 69个Spring面试题
Spring 概述 1. 什么是spring? Spring 是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring ...
- 学习OpenCV,GPU模块
如何使用opencv的gpu库呢?我这两天一直在搞这个事情,环境的配置见上文(转载),这里我先举个简单的例子,实现这样的功能:host读入一幅图像,加载到GPU上,在GPU上复制一份然后下传到host ...
- java工具类(二)之java正则表达式表单验证
java正则表达式表单验证类工具类(验证邮箱.手机号码.qq号码等) 这篇文章主要介绍了java使用正则表达式进行表单验证工具类,可以验证邮箱.手机号码.qq号码等方法,需要的朋友可以参考下. jav ...
- UML之对象图
对象图对包含在类图中的事物的实例建模,对象图显示了在某一时间点上一组对象以及他们之间的关系.对象图用于对系统的静态设计视图或静态交互视图建模,这包括对某一时刻的系统快照建模,表示出对象集.对象的状态以 ...
- C语言中数组转化为字符串的方法
#include<stdio.h> #include <stdlib.h> #include <string.h> #define NR(x) (sizeof(x) ...
- Java常见运算符整理
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/44724267 本文主要介绍Java中常见的运算符,重点介绍 ...