HTML5从入门到精通学习札记

最新推荐文章于 2025-08-26 18:17:14 发布

原创最新推荐文章于 2025-08-26 18:17:14 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #学习 #前端

在每个·HTML标签中不区分大小写
现在的浏览器都可以自动识别HTML文件，并不要求有< html>标签，也不对该标签进行任何的操作
meta元素提供的信息是用户不可见的，属性有两种：name和http-equiv，其中name属性用于描述网页，以便搜索引擎查找和分类，name设置关键字属性，而在content中定义了具体的关键字内容
content可取的值ALL(表示能搜索当前页面及其链接的网页)，Index表示能搜索当前页面，Nofollow（表示不能搜索当前页面的链接接网页），Noindex（表示不能搜索当前页面），None（表示不能搜索当前页面及其连接网页）
列表分为3类，包括无序列表，有序列表，定义列表，ul无序列表，ol有序列表，dir目录列表，dl定义列表，menu菜单列表。dt，dd定义列表的标记，li列表项目的标记。
如果要链接到同一级目录下的文件，只需输入链接文档的名称，要链接到下一目录下的文件，输入文件名加/再输入文件名，若要链接到上一级目录中的文件，先输入…/再输入目录名再添加文件名。
如果不使用< br>或< p>进行显示换行，图像与文字之间的水平距离可以通过hspace参数进行调整。
图像的提示文字alt作用，当图像未加载时可以显示提示文字，当图像下载玩时，光标在图像上时显示提示文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的第一个HTML页面</title>
	</head>
		<body 
	    text="green"
		bbgcolor="black"
		background="img/beijing.jpg"
		link="red"
		alink="green"
		> 
		<a href="http://www.baidu.com">此处为跳转到百度的链接</a>
		<!--标题文字共包含6种文字，其中1号标题最大，6号标题最小-->
		<h1 align="center">标题1</h1><!--设置标题文字居中对齐-->
		<h2 align="right">标题2</h2><!--设置标题文字居右对齐-->
		<h3 align="middle">标题3</h3><!--设置标题文字正中对齐-->
		<h4 align="left">标题4</h4><!--设置标题靠左对齐-->
		<h5>标题5</h5>
		<h6>标题6</h6>
	    <!--文字格式标记font的字体大小size共有7种1~7，逐渐增大-->
	    &nbsp;&nbsp;&nbsp;&nbsp;<!--在行前添加4个空格 其他特殊符号的表示均以&符号开始-->
		<font size="1" color="blue">1</font><!--设置字体颜色为蓝色-->
		<font size="2"><strong>2</strong></font><!--为字体加粗-->
		<font size="3"><em>3</em></font><!--斜体-->
		<font size="4"><u>4</u></font><!--下划线-->
		<font size="5"><sup>2</sup>5</font><!--上标-->
		<font size="6">6<sub>2</sub></font><!--下标-->
		<font size="7"><strike>7</strike></font><!--删除线效果-->
		<p><font size="5"><nobr>这是一段写在p标签内部的文字，一般情况下，长段落的文字都会被浏览器换行显示，为了前置浏览器不要换行显示需要用到< nobr ></nobr><font></p>
		<!--<pre></pre>标签可以保留原始排版方式的标记-->
		<center>此行文字使用了center标签，将显示在屏幕中间位置</center>
		<blockquote>此处文字使用了向右缩进标记blockquote，标记每使用一次段落向右缩进一次</blockquote>
		<!--网页中输入一个<hr />标记就添加一个默认样式的水平线·-->
		<hr color="crimson"/><!--设置水平线的颜色-->
		<br />
		<hr width="100px" align="center" color="blue"/><!--设置水平线宽度，并让其居中对齐-->
		<p><ruby>这段文字被用来显示文字标注标记样式<rt>此处显示标注</rt></ruby></p>
		<ul type="circle"><!--无序列表，空心圆形开始-->
			<li>张三</li>
			<li>李四</li>
		</ul>
		<ul type="disc"><!--无序列表，实心圆形开始-->
			<li>张三</li>
			<li>李四</li>
		</ul>
		<ul type="square"><!--无序列表，方形实心开始-->
			<li>张三</li>
			<li>李四</li>
		</ul>
		<ol type="I" start="3"><!--type还具有属性值1(数字)， A（大写英文），a（小写英文字母），i（小写罗马数字）,I(大写罗马数字)-->
		<li>王五</li><!--strat属性用来指示有序列表的初始值-->
		<li>李四</li>
		</ol>
	    <br />
	    <!--使用定义列表标记dl，dt是既是名词，dd解释-->
	    <dl>
	    	<dt>张三<dd>中学生
	    	<dt>李四<dd>小学生	
	    </dl>
	  <!--  使用菜单列表标记menu-->
	  <menu>
	  	<li>红烧日本豆腐</li>
	  	<li>蒸牛肚</li>
	  </menu>
	<!--  使用目录列表dir-->
	<dir>
		<li>李威</li>
		<li>李伟</li>
	</dir>
	</body>
	<style type="text/css">/*定义css样式*/
			body{
				background-repeat: no-repeat/*指定背景图片不重复 另外两个属性值repeat-x设置在水平方向上平铺，
				repeat-y设置在炊帚方向 上平铺*/
			}
		</style>
</html>