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+.NetCore+Nginx搭建集群
本篇和大家分享的是Linux+NetCore+Nginx搭建负载集群,对于netcore2.0发布后,我一直在看官网的文档并学习,关注有哪些新增的东西,我,一个从1.0到2.0的跟随者这里只总结一句话 ...
mysql存储过程查询结果循环遍历判断赋值游标等基本操作
一.首先说下本篇博客所实现功能的背景和功能是怎样的: 背景:因为公司项目开始迁移新平台项目,所以以前的平台老数据以及订单信息需要拆分表,而且需要业务逻辑来分析以前的订单表,来拆分成另外的几个新表,包括 ...
线性代数-矩阵-【4】点乘 C和C++的实现
点击这里可以跳转至 [1]矩阵汇总:http://www.cnblogs.com/HongYi-Liang/p/7287369.html [2]矩阵生成:http://www.cnblogs.com/ ...
jquery的2.0.3版本源码系列(4):285-348行，extend方法详解
目录 1 . jquery extend的基本使用通过285行的源码 jQuery.extend = jQuery.fn.extend = function() { ,extend方法要么是直接挂在 ...
ASP.Net Core Razor 页面路由
在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求.最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中, ...
pyhton安装pillow问题解决
最近在学习Python的微信处理相关,因wxpy库中的微信客户端需要接收二维码需要安装pillow,如下 class wxpy.Bot(cache_path=None, console_qr=Fals ...
selenium,html高宽设置成了0,会影响元素可见性，怎么手动修改某个元素的高宽?
问题:要js的话,需要用webelment,此时元素已经是不可见了 ((JavascriptExecutor) this.driver).executeScript("argument ...
Windows下配置Nginx
一.今天是2017年1月18日.揣着一种也许叫做冲动的心情,决定以后每天都记录和回顾新涉及的技术,巩固已学到的知识,坚持. 二.回归到今天的技术主题,因为之前对于[反向代理]这种技术充满了好奇,借此机 ...
SQL Server 的锁定和阻塞
本帖提供两种做法,可避免在 SQL Server 事务锁定时产生的不正常或长时间阻塞,让用户和程序也无限期等待,甚至引起 connection pooling 连接数超过容量. 所谓的「阻塞」,是指当 ...
js学习--变量作用域和作用域链
作为一名菜鸟的我,每天学点的感觉还是不错的.今天学习闭包的过程中看到作用域与作用域链这两个概念,我觉得作为一名有追求的小白,有必要详细了解下. 变量的作用域就js变量而言,有全局变量和局部变量.这里 ...