零基础初学HTML

最新推荐文章于 2024-03-31 19:45:30 发布

chuxin_2017

最新推荐文章于 2024-03-31 19:45:30 发布

阅读量735

点赞数 1

分类专栏： HTML

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学html+css+js，易上手，无需编译，无需搭环境，无需配runtime，一个简单IDE+一个浏览器就搞定，易出成效，玩法多样，不受平台限制，相比其他语言坑比较少，入门容易，是广大闲暇人士茶余饭后必备之选

制作网站是一件充满乐趣的事情，制作成功，会感到很满足。
不需要任何编程基础，参考如下链接一两个小时就可以制成一个网站，会让你更有兴趣学习html
备注：只要具备浏览器和文本编辑器（比如notepad++），无需联网，就可以离线制作网站。
https://wenku.baidu.com/view/bbc59b42cfc789eb162dc828.html?from=search

HTML是“HyperTextMark-upLanguage（超文本标记语言）”的缩写

使用文本编辑好代码后保存为html文档（后缀为.htm或者.html），用浏览器打开即可看到

<hr /> 作用是画一条水平线
HTML中的空元素还包括ul、ol和li，这三个元素用于制作列表。

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

提示：如果你打算使用背景图片，你需要紧记一下几点：

背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？
在这里插入图片描述

有三种类型的图片文件可被插入网页中：
GIF
JPG或JPEG
PNG

HTML常用基础语句效果图如下：
在这里插入图片描述

<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<head>
	<title>我的第一个网站</title>
	</head>
	
	<body style="background-color:#d0d0d0;">
	<p>哇！这是我的第一个网站</p>
	<a href="https://www.baidu.com/"  title="百度">这是一个指向百度的链接</a>
	<a href="test.html">点击这里转向test页</a>
	<b>显示粗体文本</b>
	<img arc="logo.jpg" width="30" height="30" alt="叮当猫">
	<h1 id="heading1">标题1</h1>
	<a href="#heading1">转到标题1</a>
	<h2>子标题</h2>
	<h3>子子标题</h3>
	<p>用于段落</p>
	<i>这句话显示为斜体</i>
	<small>这句话显示为小字体</small>
	<b><i>这句话既是粗体又是斜体</i></b>
	写一句话<br />换行再写一些话
	<hr />
	<ul>无序列表
		<li>列表项1，把多个列表项组织为一个列表</li>
		<li>列表项2，把多个列表项组织为一个列表</li>
	</ul>
	<ol>有序列表
		<li>列表项1，把多个列表项组织为一个列表</li>
		<li>列表项2，把多个列表项组织为一个列表</li>
	</ol>
	<table border="1" width="30%">
		<tr>
			<td align="right" valign="top">单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
			<td rowspan="2">单元格4</td>
		</tr>
		<tr>
			<td colspan="3">单元格5</td>
		</tr>
	</table>
	</body>
</html>

里边涉及到中文时，有时会显示为乱码，解决办法如下：
1、调整网页的编码字符集
要在开头统一规范下编码格式，通常charset的设值我们常用的有gb2312，gbk，utf-8三种，即有三种编码规定：

2、使用IE8打开，然后右击选编码，选择UTF-8

级联样式表（CascadingStyleSheets，简称CSS）
CSS是HTML的搭档，HTML负责网页的具体内容（结构），CSS则修饰网页的表现形式（布局），比如可以用style属性将CSS内嵌到网页中。
CSS可以对页面进行集中管理，不必在每个标签里都是用style属性，可以只声明一次，浏览器便会按照相应的页面布局效果来显示文本

<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<head>
	<title>我的第一个CSS页面</title>
	<style type="text/css">
		h1{font-size:30px;font-family:宋体;}
		h2{font-size:15px;font-family:黑体;}
		p{font-size:8px;font-family:"隶书";}
	</style>
	</head>
	
	<body style="background-color:#d0d0d0;">
	<p>哇！这是我的第一个CSS页面</p>
	<h1 id="heading1">标题1</h1>
	<h2>子标题</h2>
	<h3>子子标题</h3>
	<p style="padding;25px;border:1px solid red;float:left">用于段落</p>
	
	</body>
</html>

chuxin_2017

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
零基础初学HTML

学html+css+js，易上手，无需编译，无需搭环境，无需配runtime，一个简单IDE+一个浏览器就搞定，易出成效，玩法多样，不受平台限制，相比其他语言坑比较少，入门容易，是广大闲暇人士茶余饭后必备之选制作网站是一件充满乐趣的事情，制作成功，会感到很满足。不需要任何编程基础，参考如下链接一两个小时就可以制成一个网站，会让你更有兴趣学习html备注：只要具备浏览器和文本编辑器（比如not...
复制链接

扫一扫