HTML超文本
1.HTML链接
2.HTML表格
3.HTML图像
4.HTML列表
5.HTML块
6.HTML布局
7.HTML表单
1.HTML链接
(1)给文字及图片添加超链接
< html>
< body> < p>let's have an example< /p> < p>
< a href="http://www.baidu.com">baidu< /a>
< /p> < /body>
< /html>
(2)超链接的打开方式
超级链接标签提供了target属性进行设置,取值分别为_self(自我覆盖,默认)、_blank(创建新窗口打开新页面)。
< html>
< body> < p>let's have an example< /p> < p>
< a href="http://www.baidu.com " target="_blank">baidu< /a>
< /p> < /body>
< /html>
(3)超链接添加提示文字
< a>标签加上title属性:title="this word will link to the wed of baidu"
< html>
< body> < p>let's have an example< /p> < p>
< a href="http://www.baidu.com " target="_blank" title="this word will link to the wed of baidu">baidu< /a>
< /p> < /body>
< /html>
(4)超链接实现书签
涉及到的标签当然还是< a>标签,超级链接标签的name属性用于定义锚的名称,
一个页面可以定义多个锚,通过超级链接的href属性可以根据name跳转到对应的锚.
<a href="#跳转目的地名称">跳转起始字符</a>
...
...
...
<a name="跳转目的地名称">跳转目的地字符</a>
<html>
<head>
<title>HTML</title>
</head>
<body style="font-size:20px"> <p style="text-align:center">HTML LEARNING</p> <p>
<a href="#c1"> HTML chushi</a>
</p>
<p>
<a href="#c2">HTML wenben </a>
</p>
<p>
<a href="#c3">HTML chaowenben 1 </a>
</p>
<p>
<a href="#c4"> HTML chaowenben 2 </a>
</p>
<p>
<a href="#c5">HTML shiyan </a>
</p> <h1><a name="c1"></a>chapter 1 chushi HTML</h1> <h1><a name="c2"></a>chapter 2 wenben HTML</h1> <h1><a name="c3"></a>chapter 3 chaowenben 1 HTML</h1> <h1><a name="c4"></a>chapter 4 chaowenben 2 HTML</h1> <h1><a name="c5"></a>chapter 5 shiyan HTML</h1> </body>
</html>
2.HTML表格
表格由 < table> 标签来定义。每个表格均有若干行(由 < tr> 标签定义),每行被分割为若干单元格(由 < td> 标签定义)。
<html>
<title >TABLE</title>
<body style="font-size:20px"> <p style="text-align:center">table practice</p> <table align="center" border="1">
<tr>
<td>first row and first column</td>
<td>first row and second column</td>
<td>first row and third column</td>
</tr> <tr>
<td>second row and first column</td>
<td>second row and second column</td>
<td>second row and third column</td>
</tr> </table> </body>
</html>
一些比较重要的属性
表格还有很多细节可以定义
- 标签:< th>表头< /th>:设置表头
标签:< caption>标题< /caption>:设置表的标题
属性:cellpadding="..."设置单元格边距
- 属性:bgcolor="..."设置表格背景颜色
- 属性:background="..." 以某张图片作为表格背景
3.HTML图像
涉及到的标签就是< img>< /img>
1 在body 属性中加入background属性添加背景图片
2.举例插入一张图片<img src="路径加文件名">
3.添加属性调整图片的对其方式
img>标签中加入align属性,调整对其。有这些关于对其方式的属性 bottom、middle、top
<html>
<head>
<title>image test</title>
</head>
<body background="./qwe.gif"> <p>let's have an example<img src="./julizi.png"></p>
<p> align top<img src="./julizi.png" align="top" ></p>
<p>align middle<img src="./julizi.png" align="middle"></p>
<p>align left<img src="./julizi.png" align="left" ></p> </body>
</html>
4.调整插入图片尺寸
< img>标签中加入width height 两个属性 可以对图片的尺寸进行调整
width="80" height="80"
4.HTML列表
HTML列表标记主要有三种:有序列表、无序列表和定义列表
(1).有序列表
有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<ol>
<li>balabala</li>
</ol>
(2).无序列表
无序列表始于 < ul> 标签。每个列表项始于 < li>(有序无序是一样的)。
与有序列表的属性都是用的一样
<ul>
<li>asas</li>
<li>asas</li>
</ul>
(3).定义性列表
定义列表通常用于术语的定义和解释。定义列表由< dl>开始,术语由< dt>开始,
解释说明有< dd>开始,< dd>....< /dd>里的文字缩进显示。
5.HTML块
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;就像以前用到的 < h1>, < p>, < ul>, < table>标签。
内联元素(inline)特性: 和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)
和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;以前用到的< b>, < td>, < a>, < img>标签。
介绍两个比较常用的两个标签< div>标签和< span>标签。
< div>用来定义文档中的分区或节(division/section),没有特定的含义。它是可用于组合其他 HTML 元素的容器
< span>用来组合文档中的行内元素,也没有特定的含义
6.HTML布局
网页布局可以通过< table>元素,或者< div>元素实现。
<html>
<body bgcolor="gray"> <table width="1000">
<tr>
<td colspan="2" style="background-color: royalblue">
<h1 align="center">shiyanlou book store</h1>
</td>
</tr> <tr valign="top">
<td style="background-color: darkorange;width:300px">
<dl>
<dt>list of book</dt>
<dd>
<ol>
<li>hadoop</li>
<li>linux</li>
<li>c</li>
</ol>
</dd>
</dl>
</td>
<td style="background-color: forestgreen;height:500px;width:700px;">
<h1 style="font-size: 20px;text-align: center">the summary of the book</h1>
i will lead you to travel in the season of linux
</td>
</tr> <tr>
<td colspan="2" style="background-color: powderblue;text-align:center;height: 100px">
good good study day day up</td>
</tr> </table>
</body>
</html>
用< div>元素进行布局,般的div元素结构就如下图(思路也是用table的思想
<html>
<head>
<style>
div#container{width:1000px}
div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>shiyanlou book store</h1>
</div>
<div id="sidebar">
<dl>
<dt>list of book</dt>
<dd>
<ol>
<li>hadoop</li>
<li>linux</li>
<li>c</li>
</ol>
</dd>
</dl>
</div>
<div id="mainbody">
<h1>the summary of the book</h1>
<p>i will lead you to travel in the season of linux</p>
</div>
<div id="footer">good good study day day up</div>
</div>
</body>
</html>
style中的标签可以写在css文件里面吗,然后在导入使用。
7.HTML表单
表单标签就是用于网页中的数据提交,比如我们注册网页,在留言板中留言、评论等可以填写数据,
提交处理地方都需要表单标签,form表单标签内有输入框input、单选、多选、select下拉列表菜单与跳转菜单、提交按钮等标签内容。
<form>
user:
<input type="text" name="user">
<br />
password:
<input type="password" name="password">
</form>
单选框
<form>
<input type="radio" name="sex" value="male" /> Male
<br/>
<input type="radio" name="sex" value="female" /> Female
</form>
多选框:
<form>
<input type="checkbox" name="married" />
married
<br/>
<input type="checkbox" name="have a job" />
have a job
<br/>
<input type="checkbox" name="chinese" />
chinese
</form>
HTML超文本的更多相关文章
- html 超文本标记语言
1.html超文本标记语言 2.在html中存在着大量的标签,我们用html中存在的标签将要显示在网页的内容包含起来. 3.css 控制网页显示内容的效果. 4.html+css 只能是静态网页. 5 ...
- HTTPS----安全超文本传输协议
HTTPS协议详解HTTPS以保密为目标研发,简单讲是HTTP的安全版.其安全基础是SSL协议,因此加密的详细内容请看SSL.全称Hypertext Transfer Protocol over Se ...
- HTTP超文本传输协议-HTTP/1.1中文版
摘要 超文本传输协议(HTTP)是一种为分布式,合作式,多媒体信息系统服务,面向应用层的协议.它是一种通用的,不分状态(stateless)的协议,除了诸如名称服务和分布对象管理系统之类的超文本用途外 ...
- http 超文本传输协议
超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接 ...
- 2认识HTML中的“ML”:深入理解超文本
HTML是描述网页结构的标记语言(即HTML中的'ML'),而HT指把一个网页链接到其他网页. <a>元素可以创建超文本链接到另外一个网页,<a>元素中的内容在网页中是可点击的 ...
- 超文本标记语言(HTML)
超文本标记语言(HyperText MarkUp Language,HTML) HTML是用来制作网页的标记语言,HTML不需要编译,直接由浏览器解析: HTML文件是一个文本文件,包含了一些HTML ...
- 计算机网络——超文本传送协议HTTP
一.简述 每个万维网网点都有一个服务器进程,它不断地监听TCP的端口80,以便发现是否有浏览器向它发出连接建立请求.一旦监听到连接建立请求并建立了TCP连接之后,浏览器就向万维网服务器发出浏览某个页面 ...
- 超文本传输协议-HTTP/1.1
超文本传输协议-HTTP/1.1(修订版) ---译者:孙超进本协议不限流传发布.版权声明Copyright (C) The Internet Society (1999). All Rights R ...
- HTTP协议(超文本传输协议)
一.HTTP的简介: 超文本传输协议. 它是基于TCP连接的(默认端口号是80).所以在传输数据前客户端需向服务器发送连接请求.当服务器同意连接请求,建立连接后才可以发送数据报文. 二.HTTP的报文 ...
- HTML——超文本标记语言
HTML: 网站(站点) - 网页 1.HTML作为文件后缀名,可以把文件变为网页 2.HTML是一门编程语言的名字:超文本标记语言 3.超越了文字的范畴,除了文字还可以有图片.视频.音频.动画特效等 ...
随机推荐
- 在Linux下安装eclipse
在Linux下安装eclipse 今天上午终于在Linux下把eclipse安装上去了,前几天尝试了一次,失败了,不知道是软件版本的问题还是我自己的原因,估计还是我自己的原因占多数!下面把这次成功的经 ...
- 【Spring】XML配置整合Mybatis
注意:项目开发使用了mybatis的mapper代理! 首先是mybatis自己的配置文件,被spring整合之后,只有typeAliases存在了,其他都整合在了spring-mybatis.xml ...
- -webkit-overflow-scrolling 与滚动回弹效果.
参考来源:https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling https://www.w3cways ...
- mysql用户权限管理
参考文章:http://www.cnblogs.com/jackruicao/p/6068821.html?utm_source=itdadao&utm_medium=referral (1) ...
- 微信原图泄露的只能是 Exif ,你的隐私不在这!!!
版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 序 最近很多公众号都推送了关 ...
- linux(十)配置ssh免密登录实现
知道ssh的朋友应该知道它是用来干什么的,如果你不知道什么是ssh远程登录的话,可以去看一下我的上一篇博客,关于linux的网络基础的知识.备注:ssh是用于远端登入.执行ssh指令开启终端机阶段作业 ...
- Linux下C/C++和lua交互-Table
本来这些文章都是在我的个人网站www.zhangyi.studio,目前处在备案状态,暂时访问不了,所以搬到这边. 最近这两天需要弄清楚C++和lua间相互调用和数据传递,废话不多说,直接上过程. ...
- 编译安装LAMP并实现wordpress
author:JevonWei 版权声明:原创作品 软件环境 centos7.3 apr-1.5.2.tar.bz2 apr-util-1.5.4.tar.bz2 httpd-2.4.27.tar.b ...
- ASP.NET Core 运行原理解剖[5]:Authentication
在现代应用程序中,认证已不再是简单的将用户凭证保存在浏览器中,而要适应多种场景,如App,WebAPI,第三方登录等等.在 ASP.NET 4.x 时代的Windows认证和Forms认证已无法满足现 ...
- 分布式定时任务 -- elastic-job
一.前言 在我们的项目当中,使用定时任务是避免不了的,我们在部署定时任务时,通常只部署一台机器.部署多台机器时,同一个任务会执行多次.比如短信提醒,每天定时的给用户下发短信,如果部署了多台,同一个用户 ...