HTML入门

最新推荐文章于 2020-06-04 01:24:19 发布

野尘丶

最新推荐文章于 2020-06-04 01:24:19 发布

阅读量175

点赞数

分类专栏： HTML 文章标签：学习笔记

本文链接：https://blog.csdn.net/u012972114/article/details/88930796

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML学习

1、HTML head元素

元素是所有头部元素的容器。元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。以下列出的元素能被用在元素内部：

<title>（在头部中，这个元素是必需的）设置标题
<title>My HTML
<style>：写入css设置
<style type="text/css">
#Password{color: red;font-size: small} //设置id为Password的显示效果
</style>
<base>：超链接的一些基本设置，
以统一超链接的打开方式，如 //超链接打开方式为新窗口
<base href=”xxxx” >相当于写在每一个<a href=base.href+”yyyyy”>的href前面
<link>:引入外部配置文件
如：<link rel=stylesheet href="03.css" type="text/css"> //引入css配置文件
注释：rel：规定当前文档与被链接文档之间的关系。(relationship)
stylesheet：文档的外部样式表。
type：规定被链接文档的 MIME 类型。
MIME：描述消息内容类型的因特网标准。
text/css：描述样式表
<meta>：设置页面相关的内容
<meta name=”keyword” content=”js,html…”> //设置搜索的关键字，早期浏览器
<meta http-equiv=”refresh” content=”3,src=xxxx.html”> //3s后自动跳转
<meta http-equiv=”refresh” content=”30”> //定时刷新，每30s刷新一次
http-equiv：用来模拟http协议请求。content用于设置内容，设置响应头

<script>：javascript的程序。中间可以插入js代码:

<script src="SignCheck_New.js" language="JavaScript">
//如果上面引入了js文件，以下部分不会执行
   function  xxx(){
          ….
    }
  </script>

<noscript> 不支持JavaScript代码

2、HTML样式 – 图像

<img src = " 20170403_IMG_8397.JPG"  alt = "提示文本" width = "258" height = "300" border = "8" />

图像标签（）和源属性（Src）
在 HTML 中，图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
设置图像的高度与宽度
height（高度）与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素:px。
. 基本的注意事项 - 有用的提示：
1.假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
2.加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片

图像的排列可以通过CSS实现

3、HTML 表格

HTML 表格标签
-<table>...</table>：定义表格。- border：规定表格单元是否拥有边框

border：规定表格单元是否拥有边框
width：表格宽度

<th> ：定义表格的表头（表头内容表示一列）

属性：colspan / headers / rowspan / scope：

<tr> 定义表格的行（……表示一行）
<td> 定义表格单元（单元内容表示一列）

属性：colspan / rowspan

其中<th colspan: 横跨的列数>合并列，colspan=“0” 告知浏览器使单元格横跨到列组 (colgroup) 的最后一列。

4、HTML 列表

ol ul li定义列表
<ol>与<li>实现有序，<ul>与<li>实现有序。
ol:ordered lists
ul:unordered lists
li:list items

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。同时可以使用期属性type来指定类型。
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
ul与ol前的符号是可以修改的。只需要修改它们的type值。
ul的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块
ol的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。
通过CSS也可以在将它们前的符号改为图片，这样列表显示就会更美观了。
有序无序详见：有序无序列表.html

dl dd dt定义列表：
dl:definition list 定义列表
dt: definition title 定义标题
dd: definition dscription 定义描述
html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。
使用格式如下：

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签

5、HTML 区块（span与div）

HTML 可以通过 <div> 和 <span>将元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。如: <h1>, <p>, <ul>, <table> 。内联元素在显示时通常不会以新行开始。如: <b>, <td>, <a>, <img>。
<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
<span> 元素是内联元素，可用作文本的容器。与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。行内元素进行组合又叫行内块。

6. HTML 布局

网页布局对改善网站的外观非常重要。

使用表格：使用 HTML <table> 标签是创建布局的一种简单的方式。大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 - 表格不是布局工具！

7、HTML 框架 <重要>

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

frame标签定义 frameset 中的一个特定的窗口（框架）。frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等
重要事项：您不能将标签与标签一起使用。不过，如果您需要为不支持框架的浏览器添加一个标签，请务必将此标签放置在标签中！
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
例子：

 <frameset cols="200,25%,*" >
    		<frame name="left" src="创建图片链接.html" noresize>
    		<frame name="middle" src="表单2.html" scrolling="yes">
    		<frame name="right" src="HTML图片.html" >
    </frameset>

iframe语法: <iframe src="URL"></iframe> 该URL指向不同的网页。

  <iframe src="http://www.runoob.com/html/html-iframes.html" height="700" width="600" frameborder="1" name="Frame_A"></iframe>

Iframe - 设置高度与宽度: height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。但是部分旧浏览器不支持。
Iframe - 移除边框：frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框
使用iframe来显示目标链接页面：iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性。

对比frame与iframe：

frame不能脱离frameset单独使用，iframe可以
frame与frameset配套使用时不能放在body中,否则不能正常显示
嵌套在frameSet中的iframe必需放在body中,不嵌套在frameSet中的iframe可以随意使用
frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制
区别：HTML锚frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架，Iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的<Iframe></Iframe>所包含的内容与整个页面是一个整体，而<Frame></Frame>所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码。
点和链接<a name =”test”> xxxxx </a> 其中“name”属性是给此处取名用，可以通过该名字链接到此处。<a href =”#test” > xxx</a>
<a> 标签的 target 属性规定在何处打开链接文档。浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

可以通过统一指定：

_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。

framename在指定的框架中打开被链接文档。

标签font：基本使用CSS来替代

8、HTML表单（重点）

以<form>……</form>为起始，
作用：可以数库查询、收集用户的信息、收发Email等。
属性有：

Method：get/post （数据提交的方式）

get：发送较少数据（256byte）,显示在url中，…url/userinfo?username=张三&password=hehe
post：数据长度无限制，不会显示在URL中,而在请求体中

Action: 指定from中数据提交给服务器端的哪个程序进行处理。（指定用于接收用户提交的数据的程序，通常是某个Servlet）。
Enctype:上传的时候使用。

Eg.<form method=”post” action=”user.jsp”>……</form>

form 中的一些标签：

<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段(text)、复选框(checkbox)、掩码后的文本控件、单选按钮(radio)、按钮(submit/reset/button)等等。
Eg.
<input type="text" name="username" size="30" maxlength="10"> //text表示输入框，name指定变量名,size 指定宽度，maxlength指定输入的最大字符数
<input type="password" name="username" size="30" maxlength="10"> //密码输入框，输入的值会用*显示
<input type="radio" name="gender" value="male" > //radio表示单选框，用法同name不同value
<input type="checkbox" name="interest" value="vc" checked>VC //checkbox表示复选框，checked表示默认被选中
<input type="submit" value="提交"> //submit表示提交按钮
<input type="image" src="01.jpg" width=30> //使用图片提交
<input type="reset" value="重置"> //reset 表示重置按钮
<input type="button" value="ok"> //普通按键
<input type="hidden" > //隐藏项
<input type=”file”> //文件提交

创建单选或多选下拉菜单

<select name="interest2" size=8 multiple> //size表示高度，即一次显示的条目数，multiple表示可以多选
<option value="vc" selected>VC</option> //option表示一个选项。Selected表示默认选择
<textare>标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

<textarea rows="20" cols="100%"  wrap="soft">

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。
提示：可以通过标签的 wrap 属性设置文本输入区内的换行模式。

9、HTML常用标签

<pre>…</pre>保留中间格式
<div></div>划分时会另起一行
<span></span>是指行内块
<b>：加粗
<u>：下划线
<i>：斜体
<s>：删除线
<pre>：按原格式输出
<sub>：下标
<sup>：上标

补充：form中有action和target属性，这二者的区别？
● action的值是处理程序的程序名(包括网络路径:网址或相对路径)，如：<form action="http://xld.home.chinaren.net/counter.cgi">，当用户提交表单时，服务器将执行网址http://xld.home.chinaren.net/上的名为counter.cgi的CGI程序。
● target属性用来指定目标窗口或目标帧。

附：http-equiv：按我个人理解，是定义客户端请求的消息报头。

<meta http-equiv="content-Tyype" content="text/html;charset=utf-8">

定义Cache-Control :<meta http-equiv="Cache-Control" content="no-cache" />
这些信息会通过HTTP协议发给服务端
“ ”在 html 里是空格占位符，普通的空格在 html 里如果连续的多个可能被认为只有一个，而这个东西你写几个就能占几个空格位

野尘丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门

HTML学习1、HTML head元素元素是所有头部元素的容器。元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。以下列出的元素能被用在元素内部：<title>（在头部中，这个元素是必需的）设置标题<title>My HTML<style>：写入css设置<style typ...
复制链接

扫一扫