html还是蛮有意思的，我的理解它也是一门语言，这门语言直接由浏览器解析呈现。

一.文本标签

标题标签<hn>

将文本设置为标题显示的标签对。设定标题字体大小，n=1（大）~6（小），标题大小一共有6种，也就是从<h1>……</h1>到<h6>……</h6>

<head>
<title>Welcome</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1> i am  Jack_Sun</h1>
<h2>hello my friend </h2>
<h3>  let's study together</h3>
</body>
</html>

显示效果如下：

二.字体修饰标签

对文字的格式做相应的变化，如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。

<b>……</b>:指定文字为粗体字【bold】
<i>……</i>:指定文字为斜体字【italic】
<u>……</u>:指定文字为带有下划线【Underline】
<tt>……</tt>:指定文字为打字机效果
<sup>……</sup>:指定文字为上标【superscript】
<sub>……</sub>:指定文字为下标【subscript】
<em>……</em>:对某段文字进行强调，通常用斜体字显示出来
<strong>……</strong>:对文本进行强调，通常用粗体字显示出来

我们看下加粗前后对比，其它效果类似方式

<head>
<title>Welcome</title>
</head>
<body bgcolor="11ffff" text="000000">
<b> i am  Jack_Sun</b>
hello my friend
let's study together
</body>
</html>

显示效果如下：

三.字体标签<font>

设置文档的字体，改变其属性，对文本进行不同的设置，包含字体、大小、颜色等

size
face
color

我们看看大小的对比区别

<head>
<title>Welcome</title>
</head>
<body bgcolor="11ffff" text="000000">
<b> i am  Jack_Sun</b>
<font size="20px">hello my friend </font>
let's study together
</body>
</html>

显示效果如下：

三.超链接标签

超链接的定义

在不同文档、同一个文档的不同段落之前相互跳转。html链接包含两部分：锚标和目标点。锚标就是链接的源点，当鼠标被移动到锚标处时会变成小手状。此时，用户通过点击鼠标就可以到达链接的目标点。目标点可以是一张图片、一个网络文件、一个多媒体文件等。

1.属性href（hypertext reference）

用于设定链接地址，其链接地址必须是URL地址，必须给出具体的路径。其中URL地址可以为下面内容：

网站：可以设置ip地址或者是网站的网址。

<a href="http://sunjian.blog.csdn.net/">my blog</a>

点击页面的百度地址可直接跳转到我的博客，当然也可以跳转至你指定的任意链接

可执行文件：当文件扩展名不是html、asp等时，会将链接到的文件下载到本地计算机或直接执行。如果是文本文件（如word格式），则在浏览器中打开文件并进行编辑。

<a href="index.txt">打开txt文件进行编辑</a>
<a href="index.wav">播放声音</a>

网页上的书签：通常使用在网页的长度超过屏幕时，可以使用书签直接跳转到该书签指向的具体内容，节省移动滚动条的时间。

2.属性target

属性值分别为_blank、_self、_parent、_top。
target=_blank：在新的浏览器窗口中打开连接的文档，同时保持当前窗口不变
target=_self：将链接的文档载入链接所在的同一框架或窗口，默认设置为_self
target=_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。
target=_top：将链接的文档载入整个浏览器窗口，从而删除所有框架

我们以“_blank”为例，可以按照如下方式编写：

<a href="http://sunjian.blog.csdn.net/" target=_blank>my blog</a>

3.属性title

浏览器会以浮动提示的方式显示解释信息

<a href="http://sunjian.blog.csdn.net/" target=_blank title=“welcome”>my blog</a>

实际效果展示：

4.属性name

利用name属性作为锚定位，可以实现文档内部的定位。这个需要我们在两个<a>标签中，一个写明name，作为一个锚点；另外一个写明herf，用于指向锚点。如下面的示例，点击“my blog”会跳转到“test”（当页面超过一页长度时，测试效果更明显）

<a name=mao>test</a>
<a href="#mao" target=_blank title=“welcome”>my blog</a>

四.图像标签

图片标签<img 属性=“属性值”>

属性src：来定义图片的URL（统一资源定位符）地址，是图片必不可少的属性。用法形如：<img src=“url”>

<img src="https://xxxx">

属性height和width：规定图片的大小。属性值都是数字，表示图像宽度和高度所占的像素点数。默认是浏览器窗口将自动调整图像显示尺寸

<img heigh="500px" width="500px" src="https://xxxx">

属性align：设置图片对齐方式，垂直对齐（居上、居中和居下）和水平对齐（居左、居中和居右）。

<img align="right" heigh="500px" width="500px" src="https://xxxx">

属性border：默认图片是没有边框的，可以利用border属性添加边框。

<img border="20px" align="rows" heigh="500px" width="500px" src="https://xxxx

五.表格标签

表<table>

创建一个表格，有属性width（宽度）、height（高度）、border（边框）、bordercolor（边框颜色）、cellspacing、cellpadding

行<tr> 【table row】

创建表格中的每一行，有属性align、valign、bgcolor

列<td> 【table datacell】

创建表格的中每一列，有属性

表头<th> 【table head】

设置表头

我们现在建造一个表

<head>
<title>Welcome</title>
</head>
<body bgcolor="11ffff" text="000000">
<table border>
<th>tablehead</th>
<tr>
<td>row1 column1</td>
<td>row2 column2</td>
</tr>
<tr>
<td>row2 column1</td>
<td>row2 column2</td>
</tr>
</table>
</body>
</html>

显示如下：

六.框架标签

1.框架<frame>

一个浏览器文档窗口一般只能显示一个网页文件，但是使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件。

2.框架集<frameset>

多个框架组成了一个框架集（Frameset），定义了各个框架如何排列的。有属性rows和cols，两个属性至少选择一个，否则浏览器只显示第一个定义的框架。

七.表单标签

1.表单标签<form>

主要用于采集和提交用户输入的信息，使网页具有交互功能。有属性：

action（处理提交数据的页面）
method（提交方式（get、post、request））
target（）

2.用户输入区域标签<input type="">

这个标签必须放在<form>……</form>标签之间。有属性type，具体参数值有：

text（单行文本输入框）
textarea（多行输入框）
password（密码输入框）
radio（单选框）
checkbox（复选框）
select（下拉框）
submit（提交）
reset（重置）
image（图片提交）
file（上传文件）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>welcome</title>
</head>

<body>
<p>用户名<input type="text"></input></p>
<p>多行输入框<textarea></textarea></p>
<p>密  码<input type="password"></input></p>
<p>单选框<input type="radio"></input></p>
<p>复选框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>图片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>

</body>
</html>

效果图：

渗透知识-HTML基础相关推荐

渗透知识-linux基础命令
学过linux的朋友,可以忽略,都是些非常基础的linux命令. Linux系统的介绍 Linux的定义: 是由众多程序员通过Internet协作开发的开源(open source)系统,可以运行在P ...
BigData：大数据开发的简介、核心知识(linux基础+Java/Python编程语言+Hadoop{HDFS、HBase、Hive}+Docker)、经典场景应用之详细攻略
BigData:大数据开发的简介.核心知识(linux基础+Java/Python编程语言+Hadoop{HDFS.HBase.Hive}+Docker).经典场景应用之详细攻略 BigData:大数 ...
计算机wrod初级考试题及答案,计算机基础知识+Word基础知识+Excel基础知识试题答案解析.doc...
文档介绍: 计算机基础知识+ Word基础知识+ Excel基础知识第一部分一.单项选择题 1.世界上第一台电子数字计算机取名为( ). A.UNIVAC B.EDSAC C.E ...
知识图谱基础知识(一): 概念和构建
推荐: 知识图谱构建技术一览知识图谱基础知识之三--知识图谱的构建过程目录一.什么是知识图谱二.知识图谱的分层架构三.知识图谱构架技术 (一)数据获取(Data Acquisition) ( ...
使用微型计算机的基础知识,计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识.DOC...
计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识计算机应用基础考试大纲基本要求 ???????????????????????????????????????????????????? ...
公共基础知识计算机,公共基础知识计算机基础知识试题
计算机基础知识是公共基础知识考试的组成成分之一,以下是由学习啦小编整理关于共基础知识计算机基础知识试题的内容,希望大家喜欢! 公共基础知识计算机基础知识试题 1.CPU的主要功能是进行( ). A.算 ...
计算机专业技能知识,2017年度计算机专业技能知识资料基础知识资料试题'及其答案...
2017年度计算机专业技能知识资料基础知识资料试题'及其答案 (19页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.90 积分 ''第一部分一 ...
计算机硬件价钱分配,电脑基础知识计算机硬件基础课件.ppt
电脑基础知识计算机硬件基础课件操作系统的概念指直接控制和管理计算机的硬件和软件资源以便于有效的使用这些资源的程序. 操作系统分类 :单用户操作系统.批处理操作系统.实时操作系统.分时操作系统.网络 ...
计算机知识应用,计算机知识应用基础复习大纲
计算机知识应用基础复习大纲计算机应用基础复习大纲包括六大部分内容: 一. 计算机基础知识二. 操作系统三. 文字处理软件word 四. 电子表格软件excel 五. 文稿演示制作软件power ...

渗透知识-HTML基础

html还是蛮有意思的，我的理解它也是一门语言，这门语言直接由浏览器解析呈现。

一.文本标签

标题标签<hn>

二.字体修饰标签

三.字体标签<font>

三.超链接标签

超链接的定义

1.属性href（hypertext reference）

2.属性target

3.属性title

4.属性name

四.图像标签

图片标签<img 属性=“属性值”>

五.表格标签

表<table>

行<tr> 【table row】

列<td> 【table datacell】

表头<th> 【table head】

六.框架标签

1.框架<frame>

2.框架集<frameset>

七.表单标签

1.表单标签<form>

2.用户输入区域标签<input type="">

渗透知识-HTML基础相关推荐

最新文章

热门文章