博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML基础标签
阅读量:4710 次
发布时间:2019-06-10

本文共 2400 字,大约阅读时间需要 8 分钟。

什么是HTML:

超文本标记语言,一种纯文本类型的语言;使用带“尖括号”的“标记”将网页中的内容标识出来;

标记语法:

HTML用于描述功能的符号称为“标记”;
标记在使用时必须用“尖括号”括起来;

封闭标记:

封闭标记又叫双标记,必须成对出现;<标记>内容</标记>;

非封闭标记:

又叫空标记或者单标记;<标记 /> 或者 <标记>

Xhtml于2000年1月成为W3C标准;Xhtml是更严格更纯净的HTML版本;

HTML文档结构:

1、声明--文档类型声明;声明必须写在文档的最开始部分;
2、页面/文档--<html></html>
3、页面头部--<head></head>主要装载页面的信息;
4、页面主体--<body></body>
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

文档标题:<title></title>给页面起一个名字;

每一个标签都有属性,属性可以是一个或者多个,多个属性之间用空格隔开;

属性的组成:属性名=“属性值”;
属性必须写在开始标记内部;

HTML注释:只有程序员自己看得见,而不会再网页中显示的内容;

<!--注释内容-->
注释内容中一定不要存在--
<!--fjlwaijf--waefwefa-->

再HTML页面中无论敲多少空格,都只会显示一个空格;

要想有多个空格,必须使用转义字符;
转义字符:
空格--&nbsp;
左尖括号<--&lt;
右尖括号>--&gt;
版权©--&copy;
注册商标--&reg;

换行标记:<br />

强制不换行标记:<nobr>不换行内容</nobr>

标题标记:<hn></hn> n=1,2,3,4,5,6

段落标记:<p></p>

文本样式标签:

<b></b>文本加粗;
<i></i>文本倾斜;
<u></u>添加下划线;
<s></s>添加删除线;
以上标签全部不推荐使用,已经被废弃;
<strong></strong>强调文本,表现为文本加粗;
<em></em>强调文本,表现为文本倾斜;
<sup></sup>上标标记;
<sub></sub>下标标记;

标签分类:

块级标签:默认情况下,块级标签回独占一行,元素的前后内容都会自动换行;
<hn></hn>、<p></p>
行内标签:不会换行,可以和其他行内元素位于同一行;
b、i、u、s、strong、em、sup、sub

分区标签:

<div></div>
<span></span>

预格式化标签:

<pre></pre>
写在该标签内的内容会按照编写时的格式展示在网页中;

页面属性:

背景颜色--bgcolor;
页面文本颜色--text;

字体标签:

<font></font>
字体颜色--color;
字体--face;
字体大小--size;最小1,最大7;
该标签已被废弃;

目录结构:

一个项目(web站点)下的所有文件所在的位置;一个web站点包含多个目录,每个目录包含站点的不同部分;web站点的主目录称为根目录;位于根目录下的其他文件夹称为子目录;每个子目录都会包含具体功能的下一级子目录;

所有的文件命名必须是英文、数字、下划线(_)和连接线(-)组成;

URL:

uniform resource location 统一资源定位器;
用来标识网络中的任何资源
即路径,指从当前位置到目标位置所经过的路线;

URL分类:

1、绝对路径:192.168.101.111
http:// www.baidu.com /images /img01.jpg
协议名 主机名 目录路径 文件名
用于指向其他设备上的文件;
2、相对路径:
指目标文件的位置是相对于当前文件的位置;
目标文件和当前文件在同一个目录下,直接写文件名--img01.jpg
目标文件所在的文件夹和当前文件在同一个目录下--文件夹名/文件名 images/img01.jpg
目标文件和当前文件不在同一目录下,用../表示返回上一级目录,一个../表示返回一级
../images/img01.jpg
../../images/img01.jpg
3、根相对路径:
用于服务器

水平居中标签:

<center></center>
该标签已被废弃;

标签的对齐属性:

align="left"
align="right"
align="center"

水平分割线标签:<hr />

宽度--width,最好带上单位px
高度--size,不用带单位
对齐--align
颜色--color

图像标签:<img />

链接图像地址--src="路径";
宽度--width,只给宽度表示定宽,高度自动等比变化;
高度--height,只给高度表示定高,宽度自动等比变化;
title--鼠标移入后的提示文字,用于描述图片;
alt--当图片无法正常显示时所用的替代文字;

超链接标签:<a></a>

链接属性--href="路径"
空链接:1、href="#",会有返回顶部的效果;
2、href="javascript:;"
图片:href="图片路径",可以将链接指向一张图片;
压缩包:href="XXX.rar",指向一个压缩包,点击之后会下载;
发邮件:href="mailto:邮箱地址",可以给该邮箱发送邮件;
target--链接打开的目标位置;
target="_blank",在新窗口打开链接;
target="_self",在当前页面打开链接;
锚点名称--name,标记,可以将链接指向该标记,以达到跳转到页面指定位置的效果;

转载于:https://www.cnblogs.com/tangdiying/p/10098481.html

你可能感兴趣的文章
191. Number of 1 Bits
查看>>
通过划分的方式在线性时间内找出一个序列中第K大的元素
查看>>
用一段代码去了解函数的结构
查看>>
HDFS源码分析数据块复制选取复制源节点
查看>>
java线程池(一)
查看>>
Sublime插件安装
查看>>
Spring主从数据源动态切换
查看>>
JUnit 4在Eclipse中的使用
查看>>
在DOS命令中输入ipconfig /all,出现“该命令不是系统内部命令......”
查看>>
Django中的CSRF
查看>>
百度地图API 绘制轨迹历史
查看>>
jssdk微信图片上传功能
查看>>
c++学习02——queue
查看>>
tensorflow-1day入门
查看>>
spring boot-- 三种启动方式
查看>>
Dm8168 多核通信
查看>>
针对DDR2-800和DDR3的PCB信号完整性设计
查看>>
光子嫩肤
查看>>
在Windows 下使用OpenCL
查看>>
linux的定制和发布(一)
查看>>