HTML入门与实战

最新推荐文章于 2024-09-07 07:17:47 发布

Xember05

最新推荐文章于 2024-09-07 07:17:47 发布

阅读量115

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_40131680/article/details/107474454

版权

@HTML入门与实战（阿里云大学）

HTML入门与实战（阿里云大学）

浏览器

主要浏览器

主要使用Google Chrome
浏览器市场份额

浏览器内核

Trident(IE内核) → EdgeHTML → Chromium
Geko（firefox）
Webkit(Safari)
Chromium/Blink(Google)
Presto(Opera)→Chromium

Web标准

W3C以及其他标准化组织

结构标准：逻辑性 XML HTML
样式标准：装饰内容 CSS
行为标准：内容交互 DOM ECMAScript JavaScript

HTML简介

HTML（Hyper Text Markup Language）超文本标记语言

HTML骨架格式

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

<html></html>根标签
<head></head>头标签
<title></title>标题标签
<body></body>主体标签

HTML标签分类

双标签 <标签名></标签名>
<body></body>
单标签 <标签名/>

HTML标签关系

嵌套关系

<html>
			<head>
			</head>
</html>

并列关系

开发工具

DeamWaver
Sublime
WebStorm 10
HBuilder
Visual Studio Code

Sublime Text 3

生成html骨架

输入 html:5 按下tab键或者！+Tab键即可生成骨架
如果失败，可能是缺少Emmet插件，按ctrl+shift+P打开命令面板，输入install，鼠标点击下面出来的Package Control:Install Package.
如果2失败，说明没有安装Package Control组件，在https://packagecontrol.io进行安装
如果已经安装Package Control，安装Emmet后出现如下错误：

需要手动到https://github.com/emmetio/pyv8-binaries安装适合操作系统的pyv8文件 github作者Emmet已停止维护，pyv8文件疑似需要翻墙
Emmet2下载地址https://github.com/emmetio/sublime-text-plugin,疑似需要翻墙

骨架内容

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html> 代表文件类型html 5
<meta charset="UTF-8"> 代表字符集

HTML标签

排版标签

标题标签
一共六级，一级比较重要，慎用

<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
</body>

2.段落标签

<body>
	<p>helloworld</p>
	<p>secondparagraph</p>
</body>

3.水平线标签

<body>
	<hr />
</body>

4.换行标签

<body>
	<br />
</body>

div span标签 (没有语义，用于布局)
文本格式化标签
|标签 |作用 |
|--------------------------|-----------------|
||粗体(XHTML推荐strong)|
| |斜体(XHTML推荐em) |
|<s></s><del></del> |加删除线(XHML推荐使用del)|
|<ins></ins> |加下划线(XHML不推荐u) |

标签属性

<标签名属性一=“属性一” 属性二=“属性二” …>

图像标签

<img src="图片路径" alt="替换文本" title="鼠标悬停文本" width="宽度" height="高度" border="边框" />

链接标签

<a href="链接" target="_blank"></ a>

target=“目标的打开方式”

锚点定位

<a href="#live">跳到锚点</a>
<h3 id="live">锚点</h3>

Base标签

<head>
	<base target="_blank" />
</head>

特殊字符

字符	效果
空格	&nbsp
<	&lt
>	&gt
&	&amp
￥	&yen
版权©	&copy
注册商标®	&reg
摄氏度℃	&deg
正负号±	&plusmn
乘号✖	&times
除号➗	&divide
平方	&sup2
立方	&sup3

注释

<!-- 这是一句注释 -->

相对路径

1.图像与html文件处于同一级路径下：<img src="image.jpg" />
2.图像处于html文件下一级路径：<img src="filename/image.jpg" />
3.图像处于html文件上一级路径：<img src="../image.jpg" />

绝对路径

<img src="https:/www....">

<img src="C:/...">

列表

无序列表

<body>
	<h3>你喜欢的水果：</h3>
	<ul>
		<li>苹果</li>
		<li>香蕉</li>
		<li>榴莲</li>
		<li>芒果</li>
	</ul>
</body>

PS:

标签里面只能放
标签，
标签里面都可以

有序标签

<body>
	<h3>你喜欢的水果：</h3>
	<ol>
		<li>苹果</li>
		<li>香蕉</li>
		<li>榴莲</li>
		<li>芒果</li>
	</ol>
</body>

自定义列表

<body>
	<h3>你喜欢的水果：</h3>
	<dl>
		<dt>苹果</dt>
		<dd>红苹果</dd>
		<dd>青苹果</dd>
	</dl>
</body>

Xember05

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门与实战

@HTML入门与实战（阿里云大学）HTML入门与实战（阿里云大学）浏览器主要浏览器主要使用Google Chrome浏览器市场份额浏览器内核Trident(IE内核) → EdgeHTML → ChromiumGeko（firefox）Webkit(Safari)Chromium/Blink(Google)Presto(Opera)→ChromiumWeb标准W3C以及其他标准化组织结构标准：逻辑性 XML HTML样式标准：装饰内容 CSS行为标准：内容交互 DOM
复制链接

扫一扫