HTML基础(从属性开始)

HTML属性

属性是 HTML 元素提供的附加信息。
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现,比如:name=“value”。

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的,不过使用单引号也没有问题。

Remark提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name=‘John “ShotGun” Nelson’

HTML 提示:使用小写属性

TomcatTest的目录解析

  • deployment descriptor:部署的描述。
    Web App Libraries:自己加的包可以放在里面。
    build:放入编译之后的文件。
    WebContent:放进写入的页面。

HTML 文本格式化

<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

HTML 格式化标签

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如:粗体 or 斜体

这些HTML标签被称为格式化标签(请查看底部完整标签参考手册)。

Remark 通常标签 替换加粗标签 来使用, 替换 标签使用。

然而,这些标签的含义是不同的:

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果

HTML 文本格式化标签

标签 描述

<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字
HTML "计算机输出" 标签
标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本//能写好多行
HTML 引文, 引用, 及标签定义
标签	描述
<abbr>	定义缩写
<acronym>定义首字母缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。
href:地址
<del> 删除字效果
<ins>插入字效果

HTML链接

  • `

  • href 属性描述网页地址

  • `一个未访问过的链接显示为蓝色字体并带有下划线。
    访问过的链接显示为紫色并带有下划线。
    点击链接时,链接显示为红色并带有下划线。

    • <a href="url">链接文本</a>

    链接属性

  • target:被链接到何处_blank链接在新窗口打开

  • HTML 链接- id 属性
    id属性可用于创建在一个HTML文档书签标记。

  • 提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

在当前页面链接到指定位置

<a href="#c">到id去</a>//在本文中链接用#
<a id="c"></a>

图片链接

<a href="网址"><img border="10" src="smiley.gif" alt="HTML 教程" width="32" hteight="32"></a>

跳出框架

<p>跳出框架?</p> 
<a href="http://www.runoob.com/" target="_top">点击这里!</a> 

电子邮件链接

<a href="mailto:1745830957@qq.com?Subject=hello%20again" target="_top">发送邮件</a>

注意: 单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。

  • 复杂版本
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>

HTML头部

<title> - 定义了HTML文档的标题
使用 <title> 标签定义HTML文档的标题

<base> - 定义了所有链接的URL
使用 <base> 定义页面中所有链接默认的链接目标地址。

<meta> - 提供了HTML文档的meta标记
使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。

HTML 元素

元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> 元素
<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时,显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

总结

HTML head 元素
标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

HTML样式 - CSS

  • CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式
  • <style type="text/css"> h1 {color:red;} p {color:blue;} </style>
  • //没有下划线的链接 <a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>
  • 链接到一个外部样式表
<link rel="stylesheet" type="text/css" href="styles.css">

HTML图像

HTML 图像- 图像标签( <img>)和源属性(Src)
在 HTML 中,图像由<img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示:
注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。

HTML 图像标签

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

HTML表格

标签	描述
<table>	    	定义表格
<th>   			定义表格的表头
<tr>			定义表格的行
<td>			定义表格单元
<caption>		定义表格标题
<colgroup>		定义表格列的组
<col>			定义用于表格列的属性
<thead>			定义表格的页眉
<tbody>			定义表格的主体
<tfoot>			定义表格的页脚

HTML列表

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

HTML区块

标签	描述
<div>	定义了文档的区域,块级 (block-level)
<span>	用来组合文档中的行内元素, 内联元素(inline)

HTML布局

标签	描述
<div>	定义文档区块,块级(block-level)
<span>	定义 span,用来组合文档中的行内元素。

HTML表单

标签	描述
<form>		定义供用户输入的表单
<input>		定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签,一般为输入标题
<fieldset>	定义了一组相关的表单元素,并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

HTML框架

标签	说明
<iframe>	定义一个内联的iframe

HTML颜色

URL(统一资源定位器)

URL 是一个网页地址。
scheme://host.domain:port/path/filename
说明:

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机(http 的默认主机是 www)
domain - 定义因特网域名,比如 runoob.com
:port - 定义主机上的端口号(http 的默认端口号是 80)
path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename - 定义文档/资源的名称

常见的 URL Scheme

以下是一些URL scheme:

Scheme 访问 用于…
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页,加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值