Web前端学习笔记第一篇HTML5

最新推荐文章于 2024-09-21 11:33:29 发布

萨尔斯堡咸树枝

最新推荐文章于 2024-09-21 11:33:29 发布

阅读量562

点赞数 1

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/babypiglolo/article/details/108939829

版权

本文作为Web前端学习笔记的第一篇，详细介绍了HTML5的基础知识，包括HTML5的概述、常见的标签、表格的使用以及表单的构建。重点讲解了头部内容的设置，如<head>、<title>和<meta>标签，以及块级和行级标签的差异。此外，还深入探讨了HTML5的表格结构化和直列化，以及智能表单的新特性。

摘要由CSDN通过智能技术生成

Web前端学习笔记第一篇

第一篇 HTML5

第一篇 HTML5

第1章 HTML5学习概述

HTML：HyperText Markup Language（超文本标记语言）

1.1 认识HTML5

HTML5: 万维网联盟（WC3）制定标准（2014）
BAT三巨头：百度、阿里、腾讯

1.2 学习HTML5前的工作准备

浏览器内核：渲染引擎、JavaScript引擎

<!DOCTYPE html>
<html>
	<head>   <! --头部标记，定义标题、样式等-->
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>   <! --主体，浏览器要显示的内容-->
		
	</body>
</html>

部分HTML5标签

html5标签	作用
<html>	定义html文档
<head>	定义文档头部信息
<a>	html链接标签
<div>	定义文档头部信息
<tr>	html链接标签
<form>	html表单标签
<body>	定义文档body
<title>	定义文档的标题
<img>	html图像标签
<table>	定义html表格
<input&gt	定义表单的输入域

<! --这是HTML5注释-->

1. 头部内容

<head>标签：表示网页元数据（描述网页的基本信息）

<title>定义页面标题（成对标记）

<meta>定义页面相关信息（非成对标记）
<meta>标签常用属性：
1）charset属性：设置文档的字符集编码格式

		<meta charset="utf-8" />
		<! --GB232国标码，简体中文-->
		<! --GBK扩展国标码-->
		<! --utf-8是一种针对Unicode的可变长度字符编码，也称万国码（常用）-->

2）http-equiv属性：给浏览器执行，表明需要设置的是哪一部分

		<meta http- equiv="Content-Type"content="text/html; charset=UTF-8"/>
			<! --Content-Type(文档类型)-->
			<! -refresh（网页定时刷新）-->
			<! --set-cookie（设置浏览器cookie缓存，需要配合content属性使用）-->

3）name属性：搜索引擎

   	<! --作者-->
   	<meta name="author"content="http://www.jredu100.com"/>
   	<! --网页关键字:多个关键字用英文逗号分隔-->
   	<meta name="keywords"content="HTML5,网页,Web前端开发"/>
   	<! --网页描述:搜索网站时,title下面的解释文字.-->
   	<meta name="description"content="这是我开发的第一个网页"/>
   		<! --author（作者）-->
   		<! -keywords（网页关键词）-->
   		<! --description（网页描述）-->

<link>标签：网页图标
1） rel属性：声明被链接文件与当前文件的关系，此处选icon
2） type属性：声明被链接文件的类型，可以忽略
3） href属性：表示图片的路径地址

<link rel="icon"type="image/ x- icon"heref="img/icon.jpg"/>

2. 主体内容

<body>
   	<header>网站主题</header>
   	<nav>连接菜单</nav>
   	<article>
   		主内容
   		<section>
   			章节段落
   		</section>
   	</article>
   	<aside>侧边栏</aside>
   	<footer>页脚</footer>
   </body>

第二章 HTML5常见的块级标签和行级标签

2.1 常见的块级标签

块级标签：在网页中显示为块，独占一行

html5标签	作用
<h1></h1>	标题标签（h1-h6）
<hr/>	水平线标签
<p></p>	段落标签
<br/>	换行标签
<bockquote></bockquote>	引用标签（自动缩进）
<pre></pre>	预格式标签（按照文字原始排列方式显示）
<ul><li></li></ul>	无序列表标签（醒目）
<ol><li></li></ol>	有序列表标签
<dl></dl>	定义列表标签
<div> </div>	分区标签
<input>	定义表单的输入域

   <body>
   	<h1>h1标题标签</h1>
   	<h2>h2标题标签</h2>
   	<h3>h3标题标签</h3>
   	<h4>h4标题标签</h4>
   	<h5>h5标题标签</h5>
   	<h6>h6标题标签</h6>
   </body>

在这里插入图片描述

   <body>
    <span>我在水平线上面</span>
   	<hr/>
   	<span>我在水平线下面</span>
   </body>

在这里插入图片描述

   <body>
   	<p>这是我的第一段文字</p>
   	<p>这是我的第二段文字</p>
   </body>

在这里插入图片描述

   <body>
   	<p>
   		我是第一段文字<br/>
   		我是第二段文字
   	</p>
   </body>

在这里插入图片描述

   <body>
   	<p>
   	第一段参考文字
   	<blockquote cite="www.jredu100.com">引用的文字</blockquote>
   	第二段参考文字
   </body>

在这里插入图片描述

   <body>
   	<pre>
    *
   ***
  *****
 *******
*********
   	</pre>
   </body>

在这里插入图片描述

	<body>
		<ul type="dics">
			<li>第一项</li>
			<li>第二项</li>
			<li>第三项</li>
		</ul>
	</body>

在这里插入图片描述

	<body>
			<h4>阿拉伯数字列表</h4>
		<ol type="1">
			<li>第一项</li>
			<li>第二项</li>
			<li>第三项</li>
		</ol>
		<h4>大写字母列表</h4>
		<ol type="A">
			<li>第一项</li>
			<li>第二项</li>
			<li>第三项</li>
		</ol>
		<h4>大写罗马数字列表</h4>
		<ol type="I">
			<li>第一项</li>
			<li>第二项</li>
			<li>第三项</li>
		</ol>
	</body>

在这里插入图片描述

<ol> 标签的属性

属性	属性值	备注
type	1、A、a、I、i	设置编号样式，默认值type=1
start	1、2、3等整数值	设置编号起始值
reversed	reversed	反向排序（IE9不支持）