当前位置:首页 » 《随便一记》 » 正文

HTML入门笔记(一)_liaoai的博客

25 人参与  2021年12月20日 09:44  分类 : 《随便一记》  评论

点击全文阅读


文章目录

    • 一、HTML5概述
    • 二、文档结构
    • 三、文本元素
    • 四、超链接和路径
      • i.超链接属性
      • ii.相对路径与绝对路径


一、HTML5概述

一种超文本标记语言。 HTML5其中重要的三项技术分别为:HTML5核心规范、CSS、JavaScript。

二、文档结构

<!DOCTYPE  html>                       	 //文档类型声明
<html lang=”zh-cn”>                  	 //表示文档开始(英文用en)
<head>                                   //包含文档元素据开始(不可见)
	<meta charset=”utf-8”>           //声明字符编码
	<title>基本结构</title>           //设置文档标题
</head>                                  //包含文档元素据结束
<body>                                   //表示HTML文档内容(可见)
xxxxxxxxxxxxx
</body>                                   
</html>                                  //表示文档结束

注:

Doctype 文档类型声明   <!DOCTYPE html>

html(标签)双标签,头尾呼应

head 包含元数据内容 (页面不可见)

meta 提供关于文档的信息

title 设置标题

body 包含文档内容的元素 (浏览器可见区域部分)

(双标签 例如head后直接加tab键可以直接出现html格式,前提是文件已保存。)

三、文本元素

元素名称说明
a生成超链接
br强制换行
wbr可安全换行
b标记一段文字但不强调
strong表示重要
i表示外文或科学术语
em表示强调
code表示计算机代码
var表示程序输出
samp表示变量
kdb表示用户输入
abbr表示缩写
cite表示其他作品的标题
del表示被删除的文字
s表示文字已不再确认
dfn表示术语定义
mark表示与另一段上下文有关的内容
q表示引自他处的内容
rp与ruby元素结合使用,标记括号
rt与ruby元素结合使用,标记括号
ruby表示位于表意文字上方或右方的注音符号
bdo控制文字的方向
small表示小号字体内容
sub表示下标字体
sup表示上标字体
time表示时间或日期
u标记一段文字但不强调
span通用元素,没有任何语义。一般配合CSS修饰。

注:

ctrl+?=注释

b、strong 加粗

i、var倾斜

s、del 加删除线

u、ins 加下划线

q 加双引号

mark 黄色背景黑色字

四、超链接和路径

i.超链接属性

属性名称说明
href指定元素所指资源的URL
hreflang指向的链接资源所使用的语言
media说明所链接资源用于哪种设备
rel说明文档与所链接资源的关系类型
target指定用以打开所链接资源的浏览环境
type
target属性
属性名称说明
--------------------------------------
blank在新窗口或标签页中打开文档
parent在父窗框组(frameset)中打开文档
_self在当前窗口打开文档(默认)
_top在顶层窗口打开文档

例如:

<a href="http:www.baidu.com" target="_blank">

ii.相对路径与绝对路径

1.绝对路径: 当整个目录转移到另外的盘符或其他电脑时,目录结构一旦出现任何变化,链接当即失效。

 <a href="file:///磁盘符+目录层次x.html">名称</a>

2.相对路径条件: 必须文件都在一个磁盘或目录下

注: 如果一个主目录有多个子目录层次等其他情况 使用目录语法:

同一个目录: index2.html或./index2.html;
在子目录: xxx/index2.html;
在孙子目录: xxx/xxx/index2.html;
在父目录: ../index2.html;
在爷爷目录: ../ ../index2.html;

3.锚点设置:

//链接
<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>
//锚点
<a name="1"></a> <a id="3"></a>

点击全文阅读


本文链接:http://zhangshiyu.com/post/31785.html

文档  元素  目录  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1