前言:

前面简单学习了html简单标签的使用,今天学习一下其他的标签的使用。

HTML的超链接

1.)创建一个超链接

<div>
<p>
<a href="http://www.baidu.com" target="_blank">
点击我跳转至百度
</a>
</p>
</div>

2.)将一个图片作为一个超链接

<div>
<p>
<a href="http://www.baidu.com" target="_blank">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="200px">
</a>
</p>
</div>

3.)简单的解析一下a标签

HTML用<a>来表示超链接,英文叫anchor。<a>可以指向任何一个文件源:一个HTML 网页,一个图片,一个影视文件等。用法如下:

<a href="url">链接的显示文字</a> 
  • href属性,指向链接跳转的地址
  • target属性, 使用target属性,可以在一个新窗口里打开链接文件。

  • title属性,使用 title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。

  • name属性,使用name属性,要设置一对。 一是设定name的名称, 二是设定一个href指向这个name:

针对name属性举例说明一下:

<p> <a href="#C6">参见第六章</a> </p>
<p>
<a name="C1"><h2>第1章</h2></a>
<a name="C2"><h2>第2章</h2></a>
<a name="C3"><h2>第3章</h2></a>
<a name="C4"><h2>第4章</h2></a>
<a name="C5"><h2>第5章</h2></a>
<a name="C6"><h2>第6章</h2></a>
<a name="C7"><h2>第7章</h2></a>
<a name="C8"><h2>第8章</h2></a>
<a name="C9"><h2>第9章</h2></a>
</p>

HTML相对路径(RelativePath)和绝对路径(AbsolutePath)

我们在加入超链接或者插入文件时,通常会使用到文件路径,现在学习一下如何正确的使用文件路径。HTML有2种路径的写法:相对路径和绝对路径。

1.)HTML相对路径(Relative Path)

在同一目录的文件引用

<div>
<p>
<a href="uerinfo.html" target="_blank">
点击跳转至同一目录页面
</a>
</p>
</div>

对上级目录的文件引用

<div>
<p>
<a href="../test.html">
点击跳转至上一目标页面
</a>
</p>
</div>

对下级目录的文件引用

<div>
<p>
<a href="info/detail.html">
点击跳转至下一目标页面
</a>
</p>
</div>

2.)HTML绝对路径(Absolute Path)

HTML绝对路径(absolute path)指带域名的文件的完整路径。

<div>
<p>
<a href="http://www.baidu.com">
点击跳转至绝对路径页面
</a>
</p>
</div>

如何在HTML中创建表格

HTML表格用<table>表示。一个表格可以分成很多行(row),用<tr>表示;每行又可以分成很多单元格(cell),用<td>表示。

<table border="1" cellpadding="10">
<caption style="padding: 5pt"><b>成绩表</b></caption>
<tr>
<td rowspan="2">李超军</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>85</td>
<td>89</td>
<td>90</td>
</tr>
<tr>
<td>总分</td>
<td colspan="3" align="center">264</td>
</tr>
</table>

先看下效果

标签解析:

  • table创建一个表格标签
  • caption创建一个表格标题
  • tr表示一行
  • th表示表头
  • td表示一列

属性解析:

  • border表格边框
  • cellpadding 表格单元格间隙
  • colspan 合并列
  • rowspan 合并行

HTML列表(Lists)

HTML有三种列表形式:

  • 排序列表(Ordered List);
  • 不排序列表(Unordered List);
  • 定义列表(Definition List)。

1.)排序列表(Ordered List)

排序列表中,每个列表项前标有数字,表示顺序。排序列表由<ol>开始,每个列表项由<li>开始。

<ol>
<li>第一名</li>
<li>第二名</li>
<li>第三名</li>
<li>第四名</li>
<li>第五名</li>
<li>第六名</li>
</ol>

2.)不排序列表(Unordered List)

不排序列表不用数字标记每个列表项,而采用一个符号标志每个列表项,比如圆黑点。不排序列表由<ul>开始,每个列表项由<li>开始。

<ul>
<li>Java</li>
<li>Objective-C</li>
<li>C</li>
<li>C++</li>
</ul>

3.)定义列表

定义列表通常用于术语的定义。定义列表由<dl>开始。术语由<dt>开始,英文意为DefinitionTerm。术语的解释说明,由<dd>开始,<dd></dd>里的文字缩进显示。

<dl>
<dt>杭州</dt>
<dd>滨江区</dd>
<dd>西湖区</dd>
<dd>余杭区</dd>
<dd>萧山区</dd>
<dt>绍兴</dt>
<dd>越城区</dd>
<dd>柯桥区</dd>
</dl>

HTML表单(Forms)

HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。

先举个简单的例子,一个让用户提交名字的表单。

<form action="http://www.xxx.com/userInfo.asp" method="get">
请输入你的姓名: <input type="text" name="yourname"> <input type="submit" value="提交">
</form>

学习HTML表单(Form)最关键要掌握的有三个要点:

  • 表单控件(Form Controls) 通过HTML表单的各种控件,用户可以输入文字信息,或者从选项中选择,以及做提交的操作。
  • Action  表示发送表单信息的处理程序
  • Method 表示了发送表单信息的方式。method有两个值:get和post。get的方式是将表单控件的name/value信息经过编码之后,通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送,你在地址栏看不到表单的提交信息。那什么时候用get,什么时候用post呢?一般是这样来判断的,如果只是为取得和显示数据,用get;一旦涉及数据的保存和更新,那么建议用post。

1.)HTML表单(Form)常用控件(Controls)


文本输入框

<div>
<p>输入框使用</p>
<form action = "http://www.xxx.com/userInfo.asp" method = "post">
<!-- 单行输入框-->
用户名:<input type="text" name="userName" style="margin-top: 5pt" /><br>
<!-- 密码输入框-->
密码:<input type="password" name="userPwd" style="margin-top: 5pt"/><br>
<!-- 多行输入框-->
简介:<textarea name="userDes" cols ="50" rows = "3" style="margin-top: 5pt"></textarea><br>
<input type="submit" value="提交">
</form>
</div>

复选框

<div>
<p>选择你喜欢的水果</p>
<form action = "http://www.xxx.com/userInfo.asp" method = "post">
<input type="checkbox" name="fruit" value ="apple" checked="checked">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
<input type="submit" value="提交">
</form>
</div>

单选框

<div>
<p>判断题:选择下面正确的选项</p>
<form action = "http://www.xxx.com/userInfo.asp" method = "post">
<input type="radio" name="question" value ="yes" checked="checked">桔子属于水果<br>
<input type="radio" name="question" value ="no">桔子属于蔬菜<br>
<input type="submit" value="提交">
</form>
</div>

下拉框

<div>
<p>选择你喜欢的水果</p>
<form action = "http://www.xxx.com/userInfo.asp" method = "post">
<select name="fruit" >
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
<input type="submit" value="提交">
</form>
</div>

HTML图片(Images)

用 <img> 这个 Tag 可以在HTML里面插入图片。最基本的语法如下:

<img src="url">

url表示图片的路径和文件名

<div>
<p>
<img src="../../images/bg_post_activity_1.png">
</p>
</div>
  • 图片alt属性 假使浏览器没有载入图片的功能,浏览器就会转而显示Alt属性的值

  • 图片align属性 用align属性,可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。图片的大小
  • width height 在缺省状况下,图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变,图片会相应放大或缩小,显示出来的结果可能会很难看。

HTML字体(Fonts)

在HTML里,可以用font这个元素及其属性来设定字体的大小,颜色和字体风格。

  • 字体大小 size

  • 字体风格 face

  • 字体颜色 color

示例:

<div>
<p>
<font size="16" face="楷体" color="green">
这是字号为16,风格为楷体的,颜色为绿色的文字
</font>
</p>
</div>

HTML背景颜色和背景图片

HTML的 <body> 有两个关于背景的属性,一个是 bgcolor,是设置背景颜色的;另一个是 background,是设置背景图片的。

  • bgcolor属性 bgcolor属性用来设置HTML网页的背景颜色。

  • background属性 background属性用来设置HTML网页的背景图片。

总结:

基本上把简单的html标签知识学习了一遍,接下来学习一下css的使用。

Hybrid App开发之Html基本标签使用的更多相关文章

  1. Hybrid App开发之css样式使用

    前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...

  2. Hybrid App开发之JavaScript基础

    前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...

  3. Hybrid App开发之jQuery基础

    前言: 前面学习了JavaScript/Html/Css的基础知识,今天学习一下常用js框架jQuery的使用进行快速的开发. JQuery的基本功能: 方位和操作DOM元素 控制页面样式 对页面事件 ...

  4. Hybrid App开发之jQuery选择器

    前言: 前面学习了JQuery的简单使用,今天进一步学习一下JQuery的选择器. 什么是选择器? JQuery选择器通过标签名.属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性 ...

  5. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  6. app开发之deviceone

    deviceone,跨平台.低成本.纯原生的app开发服务,具体介绍见:http://www.deviceone.net/ do不同于dcloud.rn等开发套件,do只是一座桥梁,可以选择使用jav ...

  7. web app开发之rem

    CSS3新增了一个相对单位rem,官方的解释为“font size of the root element”,相对于根元素(html)的font size. rem,em,px单位的区别: rem单位 ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. Cocos2d—X游戏开发之CCToggle(菜单标签切换)CCControlSwitch(开关切换)

    Cocos2d—X游戏开发之CCToggle(菜单标签切换) 首先继承子CCMenu,是菜单标签中的一种.‘ class CC_DLL CCMenuItemToggle : public CCMenu ...

随机推荐

  1. spring发布和接收定制的事件(spring事件传播)[转]

    有事件,即有事件监听器. 有人问你spring监听器有哪些你看了下文即也知道了.   事件传播 ApplicationContext基于Observer模式(java.util包中有对应实现),提供了 ...

  2. 洛谷P1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)

    传送门 先坑着,联赛活着回来的话我就写(意思就是我绝对不会写了) //minamoto #include<cstdio> #include<cmath> #include< ...

  3. birt启动后访问地址详解

    发布设计完成的报表文件,可在web项目中创建reports目录,用于存放报表设计文件. 在应用中通过正确格式的访问路径,例如:http://localhost:8080/birtApp/framese ...

  4. 关于HTML5画布canvas的功能

    一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...

  5. 在windows IIS服务商配置asp.net core的服务器坏境,并部署

    翻译自https://docs.microsoft.com/en-us/aspnet/core/publishing/iis 另一篇参考的文章 http://www.c-sharpcorner.com ...

  6. C 语言实例 - 输出九九乘法口诀表

    C 语言实例 - 输出九九乘法口诀表 使用嵌套 for 循环输出九九乘法口诀表. 实例 #include<stdio.h> int main(){ //外层循环变量,控制行 ; //内层循 ...

  7. [WebShow系列] 倒计时展示相关问题

    WebShow内置了倒计时功能. 后台参数维护: 倒计时参数说明: 倒计时基准时间设置(秒数):假设设置为90,也就是从1分30秒开始倒计时,同时有开始提示音. 倒计时提示1剩余秒数:假设设置为30, ...

  8. Net Core 2.0生态1

    Net Core 2.0生态 阅读目录 前言:答读者问(time by:2017.8.19) 项目升级到ASP.NET Core 2.0 新增功能:Razor Pages介绍 模板更新 Entity ...

  9. P2737 [USACO4.1]麦香牛块Beef McNuggets 数学题 + 放缩思想

    https://www.luogu.org/problem/show?pid=2737#sub 先说一个结论:对于两个数p, q,且gcd(p, q) = 1(这个很重要,是条件来的).他们不能组合成 ...

  10. php文件缓存数据

    最近在做微信的摇一摇跑马活动,实现原理是用户摇动手机,通过ajax往数据库写入数据(小马跑的步数),然后PC端用过ajax每一秒钟从数据库中调取一次数据(小马跑的步数),然后显示在PC屏幕上,这样就会 ...