html学习笔记

最新推荐文章于 2024-11-16 23:03:00 发布

哔xxx

最新推荐文章于 2024-11-16 23:03:00 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签：前端 html

本文链接：https://blog.csdn.net/qq_40201450/article/details/79094604

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html学习笔记1

1.html格式

（1）一句html一般都含有开始标签以及关闭标签，少数标签除外（<br/><img><link><meta> 等）。如下：

<开始标签 属性1="" 属性2="定义1;定义2">内容</关闭标签>

不同元素间可以嵌套，但开始与关闭标签一定要配套

不同元素有不同的属性，可以用于设置标签功能

（2）一个html文件一般由头部和主体两部分构成

<head>
 放入页面的链接和基本设置等
</head>

<body>
 放入页面显示元素的布局
</body>

2.html部分显示元素表

排版元素

（1）可单个使用类

名称	用处
<p>	表示一个段落（会换行）
<div>	表示一个分块（会换行）
<br/>	表示换行无关闭标签
<hr/>	下划线

（2）一般组合使用类【组合方式[见后]】

名称	用处
<table>	表示表格
<ul>	表示一个无序列表
<ol>	表示一个有序列表
<dl>	表示一个自定义列表

文本格式定义的标签（不会换行）

名称	用处
<span>	定义一个普通文本
<b>	定义一个粗体文本
<i>	定义一个斜体文本
<small>	定义一个小文本
<strong>	定义加重语气
<sup>	定义一个上标字
<sub>	定义一个下标字
<ins>	定义一个插入字（带有下划线）
<del>	定义删除字（会带有一个删除的划线）

常用于显示计算机代码的标签

名称	用处
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机样本代码
<var>	定义变量

其他

名称	用处
<a>	定义超链接
<abbr>	定义缩写
<acronym>	定义缩写
<blockquote>	定义长的引用
<q>	定义短的引用
<cite>	定义引用、印证
<dfn>	定义一个定义项目

3.部分常用标签详解标签

头部`<head>`

（1）`<title>`

定义了htlm文档的标题。<title>标签内的内容会显示在浏览器的页面标题栏上。

（2）`<base>`

为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>

base属性

属性	值	描述
href	URL	规定页面中所有相对链接的基准 URL。
target	_blank/_parent/_self/_top/framename	在何处打开页面中所有的链接。

（3）`<meta>`

使用元素来描述HTML文档的描述，关键词，作者，字符集等。

可点击w3school meta查看详细用法

（4）链接类标签

名称	用途
<link>	标签定义了文档与外部资源之间的关系。标签通常用于链接到样式表(详见css)
<script>	标签定义了HTML文档的样式文件引用地址. 标签通常用于链接到样式表:(详见javascript）
<style>	标签定义了HTML文档的样式文件引用地址. 元素中你也可以直接添加样式来渲染 HTML 文档:

举个栗子：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

（5）`<meta>`

用途

meta标签描述了一些基本的元数据。
可以用于描述字符集
标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

栗子们

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
http-equive=”expire”期限 “refresh”刷新 “Pragma”是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
用法,由于html5新加入charset属性直接定义字符集，可以跳过http-equive进行直接定义

lang和charset

<html lang="zh-CN" >
<head> 
<meta charset="UTF-8">

表示网页语言为中文，但字符集为万国语，若要表示中文生僻字可用字符集GB2312

主体`<body>`

(1) `<a>` 超链接标签

HTML使用标签 <a>来设置超文本链接。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

属性

属性	用途
href	为目标页
target	为打开方式:_blank新页面/_top本页面/_self当前页框/ _parent

使用href发送邮件
“mailto:具体邮箱地址？cc=抄送地址？subject=默认标题？body=内容”

(2)`<img>`图像标签

属性

属性	用途
src	源属性的值是图像的 URL 地址。URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
alt	属性用来为图像定义一串预备的可替换的文本。
width&height	设置图像的宽度和高度

（3）`<map>`可点击式地图

用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
<area> 元素永远嵌套在 map 元素内部。<area> 元素可定义图像映射中的区域。

来个栗子

<img src="planets.gif" width="145" height="126"alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus"  href="venus.htm">
</map>

在 HTML5 中, 如果 id 属性在 标签中指定, 则你必须同样指定 name 属性。
不同映射区域语法：
1.距形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2.圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3.多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

(4)`<form>`和`<input>`

input标签输入类型:
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

又是栗子

<form action="URL" method="get or post"> 
<input name="" type="" value="不可自动清除" placehoder="可自动清除">
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

解析
1.method=”get or post” 以什么方式传到哪
2.name 用于js php
3.type:passsword checkbox复选框 text radio(单选按钮) submit file下拉选框
4.value是输入框的默认输入内容，不可自动清除。placeholder类似提示项开始输入时就会自动清除
5.<select selected=“” name=""><option value="" selected(用于选择预选项)></option></select>selected(用于选择预选项)
6.可加入<label for="xx"><label>(用于和表单元素绑定)