前言:

前面简单学习了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的使用。

ReactNative学习之Html基本标签使用的更多相关文章

  1. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  2. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  3. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  4. React-Native学习指南

    React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React ...

  5. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  7. [转] 整理了一份React-Native学习指南

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React ...

  8. 一份React-Native学习指南-感谢分享

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React ...

  9. 整理了一份React-Native学习指南

    原文:  http://www.w3ctech.com/topic/909 自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull ...

随机推荐

  1. Code First约定-Fluent API配置

    转自:http://blog.163.com/m13864039250_1/blog/static/2138652482015283397609/ 用Fluent API 配置/映射属性和类型 简介 ...

  2. CGLIB和JDK代理

    需要的架包:在spring中提供对CGLIB的支持 一.JDK的动态代理 1.接口IUserDao package cn.itcast.spring3.jdk.proxy; public interf ...

  3. 从零到实现Shiro中Authorization和Authentication的缓存

    本文大纲 一.简介 二.缓存的概念 三.自定义实现缓存机制 四.什么是Ehcache 五.Ehcache怎么用 六.Spring对缓存的支持 七.Spring+Ehcache实现 八.Spring+S ...

  4. 剑指Offer面试题1

    面试题1: 题目描述: 如下为类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString { public: CMyString(char* pData = NULL ...

  5. js 解析本地Excel文件!

    通常,一般读取Excel都是由后台来处理,不过如果需求要前台来处理,也是可以的.. 1.需要用到js-xlsx,下载地址:js-xlsx 2.demo: <!DOCTYPE html>&l ...

  6. Unity调用Android的两个方式:其一、调用jar包

    unity在Android端开发的时候,免不了要调用Java:Unity可以通过两种方式来调用Android:一是调用jar.二是调用aar. 这篇文章主要讲解怎么从无到有的生成一个jar包,然后un ...

  7. NodeJs之fs的读写删移监

    NodeJs版本:4.4.4 fs 文件系统模块是一个封装了标准的 POSIX 文件 I/O 操作的集合.Node.js 文件系统(fs 模块)模块中的方法均有异步和同步版本. 图片的复制与粘贴 创建 ...

  8. crontab的两种配置方式

    废话不多说,直接上菜了   第一种:在/etc/crontab下设置,指定用户名的 1.vim命令进入/etc/crontab 2.在最后一行加上 59 23 * * * root /root/cat ...

  9. windows系统局域网内开启远程桌面图解

    需要开启防火墙 默认这里没有远程桌面   添加方法   到此远程桌面已经开好了.

  10. Struts2之Action接收请求参数和拦截器

    技术分析之在Struts2框架中使用Servlet的API        1. 在Action类中也可以获取到Servlet一些常用的API        * 需求:提供JSP的表单页面的数据,在Ac ...