这是我的第2篇博客。
在菜鸟教程上学习HTML,做一些简单的笔记。附上网址:菜鸟教程-HTML教程
欢迎访问我的github个人博客:https://midoq.github.io/
HTML:Hyper Text Markup Language,超文本标记语言,通常用来描述网页。
在Chrome浏览器中,右击页面空白处右击,选择“查看网页源代码”,可以查看页面的HTML源码。不同浏览器查看方式有所差异,但大体类似。
HTML可以直接内嵌到Markdown文件中。换言之,Markdown对HTML是兼容的。
一个基本的html文件通常包括文件类型声明、头部、主体内容等。
用一对尖括号
和包含该部分内容,分别称作开始标签和结束标签,一对标签及其中间的内容称为一个元素,元素嵌套构成了整个html文档。HTML标签对大小写不敏感,但通常建议使用小写。下面是一个html实例。
<html>
<head>
<meta charset="utf-8">
<title> 我的html hello-world title>
head>
<body>
<h1> 我的第一个标题 h1>
<p> 我的第一个段落。 p>
body>
html>
在上面的实例中:
声明为HTML文档
html的根元素
包含文档的元数据(meta data),如如 定义网页编码格式为 utf-8
描述文档标题,显示在浏览器标题栏
描述网页主体,是网页的可见页面内容
定义一个大标题
定义一个段落HTML元素可以设置属性,通常写在开始标签内。如HTML链接元素:
<a href="https://midoq.github.io/">MidoQ的小站a>
在上面的实例中:
该部分介绍了一些基本的HTML元素。
用注释标签插入注释。浏览器渲染时会忽略注释。
标题(Heading)是通过
<h1>这是一个标题。h1>
<h2>这是一个标题。h2>
<h3>这是一个标题。h3>
<p>这是一个段落 p>
<p>这是另一个段落p>
注意,浏览器显示页面时,所有连续的空行和空格都会被算作一个,这种由键盘键入的空格叫不换行空格( )。
如果要加入多个空格,可以使用HTML空格实体。
如果要加入多个空行,可以使用换行元素。
<p>这是一个段落。p>
<hr />
<p>这是一个段落。p>
<hr />
<p>这是一个段落。p>
<p>这个<br />段落<br />演示了分行的效果p>
标签 | 描述 |
---|---|
定义粗体文本 | |
定义加重语气 | |
定义斜体字 | |
定义着重文字 | |
定义小号字 | |
定义下标字 | |
定义上标字 | |
定义插入字 | |
定义删除字 |
在效果上等同于,在效果上等同于,但相比较而言含义有所差别。lt;strong>和意味着该段文本是重要的,所以要突出显示。
在HTML中,被保留的字符是无法直接输入的,如大于号<和小于号>以及多余的空格,它们会被解析为html语言的一部分而不是作为字符显示出来。另外一些特殊字符也是无法直接输入的,所以要使用实体编号或实体名称来代替字符本身,相当于字符的转义。
这里介绍可能常用的几种,其他具体可以查阅手册。
字符 | 实体名称 | 实体编号 | 描述 |
---|---|---|---|
< | < | < | 小于号 |
> | > | > | 大于号 |
& | & | & | 和号 |
" | " | " | 引号 |
A B | 半角空格 | ||
A B | 全角空格 | ||
A B | 窄空格(全角空格的1/6宽) |
注意,HTML字符实体对大小写敏感,如希腊字母大小写的实体名称是不同的。
基本语法:
<a href="https://midoq.github.io/">MidoQ的小站a>
href属性描述了超链接的目标。建议始终在链接末尾添加斜杠,否则服务器会发起两次HTTP请求,第二次添加正斜杠后创建新的请求。
超链接的文本部分(上面“MidoQ的小站”部分)不仅可以是文本,也可以是图片元素或其他HTML元素。
规定在何处打开目标URL。
默认为_self,在当前页面打开。如果设置为_blank则为在新窗口打开。
以下代码会在新窗口打开文档:
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!a>
id属性可以为任意一个标签设定唯一的ID值,可以用作到本页面上或者其他页面上某位置的超链接目标。此时必须在id值前加井号#。
在HTML文档中插入ID:
<a id="tips">这里是提示a>
在本文档中创建一个链接到"这里是提示(id=“tips”)":
<a href="#tips">访问有用的提示部分a>
从另一个页面创建一个链接到"这里是提示(id=“tips”)":
<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分a>
定义文档标题。该元素是头部标签中必需的。
用于加载脚本文件,如JavaScript脚本。
定义基本链接地址。该标签的href作为本页面所有相对地址超链接的默认链接,target作为本页面所有超链接的默认打开方式。
将
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<base href="//www.runoob.com//images/" target="_blank">
head>
<p><img src="logo.png" > - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"p>
<p><a href="//www.runoob.com/">runoob.coma> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。p>
定义文档与外部资源的关系。通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
head>
定义HTML文档的样式文件引用地址。
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
style>
head>
meta标签描述了一些基本的元数据。通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
一些实例如下。
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">
基本语法:
<img src="url" alt="some_text">
img是空标签,没有闭合标签。
src属性为图像的包含存储路径的文件名,静态图、动态图均可。
alt属性用于定义一串可替换的文本,当用户浏览器无法加载图片时可以显示信息。
还可以设置宽度和高度属性,默认单位为像素。为图像指定宽高可以防止破坏页面布局。
实例:
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
标签定义单元格。 用 | 标签定义表头。 实例:
上面table标签的属性中,border代表边框粗细,不设置或设置为0时无边框。 6. 列表元素有序列表
显示如下:
无序列表
显示如下:
自定义列表
其中, 显示如下:
7. 区块元素区块元素和内联元素大多数 HTML 元素被定义为块级元素或内联元素。 ,, |
---|