【HTML 笔记】（一）

最新推荐文章于 2024-01-18 19:00:14 发布

啊哟玮

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量292

点赞数 1

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/KibaSE/article/details/90373359

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Tool: Real-time HTML Editor

1. Element of HTML

<h1> Starbuzz Coffee Beverages </h1>

An element consists of the enclosing tags like <h1></h1> and the content in between. The tags <h1></h1>, <h2></h2>…present head titles.

2. HTML & CSS

The Browser uses its own built-in default style to display HTML.
HTML(Hyper Text Markup Language): structure the web page
CSS(Cascading Style Sheets): control the presentation of HTML

3. Import Image

<html>
	<body>
		<h1>Image</h1>
		<img src="image.gif">
		<p>description of the image</p>
	</body>
</html>

3. <style> Element CSS

<html>
	<head>
	
		<meta charset = "utf-8">
		<title> Starbuzz Coffee </title>
		<style type = "text/css">
			body {
					background-color: #d2b48c;
					margin-left: 20%;
					margin-right: 20%;
					border: 2px dotted black;
					padding: 10px 10px 10px 10px;
					<!-- padding between the content and the border (on all sides) -->
					font-family: sans-serif;
			}
		</style>
		
	</head>
	
	
	<body>
	
		<h1></h1>
		
		<h2></h2>
		<p></p>
		
		<h2></h2>
		<p></p>
		
	</body>
	
</html>

4. links to new pages

The element <a> is used to create a link to another page. The content of the <a> element is the link text.
点击text中的 “link” 字样，就会跳转到新的页面。

<body>
	<h1>Titel</h1>
	<p> This is a <a herf="new.html"> link </a> to another page.</p>
</body>

<link rel="stylesheet" type="text/css" href="theme.css" />

relative path

<p> locate in the root folder, but the <a herf="subfolder/new.html"> new html file  </a> is in a subfolder.
<p> locate in the sub folder, but the  <a herf="../../new.html"> new html file  </a> is in a root folder.

!! Don’t use spaces in the names for files and folders.

5. Text form

quote and block quote

<q>adding quote</q>

[output]: “adding quote”

<blockquote>
	Passing cars,
	When you can't see,
	May get you,
	A glimpse,
	of eternity.
</blockquote>

[output]:
Passing cars,
When you can’t see,
May get you,
A glimpse,
of eternity.

The <blockquote> element is a block element and the <q> element is an inline element.
Block element are always displayed as if they have a linebreak (break in the line / Return key) before and after them, while inline elements appear “in line” within the flow of the text in the page.
<blockquote>是独立的部分，<q>是一个内嵌元素，比如放在<p>元素的内部。

斜体<em>text</em>
换行<br>，不需要closing tag
列表<li></li>，li = list item
- <ol> ordered list
- <ul> unordered list
- <dl>definition list, 用来创建一个普通的列表
- <dt>创建列表中的上层项目—>定义列表中的项目
- <dd>创建列表中最下层项目—>描述列表中的项目
  —> <dt>和<dd>都必须放在<dl>标志对之间。

<ol>
	<li>Laptop</li>
	<li>Smart phone</li>
	<li>PC</li>
	<li>XBox</li>
	<li>Switch</li>
</ol>

[output]:

Laptop
Smart phone
PC
XBox
Switch

<pre> HTML <pre> 标签

6. Character entities

URL: HTML符号实体

<p>Kosten: &euro;1000</p>

URL:HTML ASCII
URL:HTML ISO-8859-1 参考手册

在这里插入图片描述

Quelle：
《深入浅出HTML和CSS》ISBN:978-7-5641-3894-3
W3school：HTML系列教程

啊哟玮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录