Wed前端--HTML基础

目录

一、开发工具

二、HTML文档结构

2.1头部head

2.1.1title标记

2.1.2元信息meta标记

具体实例

​编辑


一、开发工具

最基础的开发工具是:HBuilder

二、HTML文档结构

HTML文档由头部head和主体body组成

头部head标记中可以定义标题样式,头部信息不显示在网页上;

主体body 标记中可以定义段落,标题字,超链接,脚本,表格,表单

HTML文档的基本结构如下:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2.1头部head

头部head标记主要包含页面标题标记,元信息标记,样式标记,脚本标记,链接标记

头部标记所包含的信息不会展示在网页上。

2.1.1title标记

语法说明

<title>是开始标记

</title>是结束标记

两者之间内容显示在浏览器的标题栏上

例如:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面标题</title>
	</head>
	<body>
	</body>
</html>

2.1.2元信息meta标记

meta标记用来描述一个HTML网页文档属性,也称为元信息,这些信息不会显示在浏览器页面中,例如:作者,日期,时间

基本语法

html 复制代码
			<meta name=""content="" >
			<meta http-equiv=""content="">

name属性用于描述网页,它是"名称/值"形式中的名称,name属性的值所描述的内容通过content属性表示,便于搜索引擎机器人查找,分类,其中最重要的是description、keywords、 robots

http-equiv属性用于提供HTTP协议的响应头报文,它回应给浏览器一些有用的信息,以帮助浏览器正确精准的显示网页内容,http-equiv属性的值所描述的内容通过content属性表示

meta标记的属性、取值如下所示

具体实例

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>传统美德故事:铁杵磨成针</title>
		<style type="text/css">
			div{text-align: center;}
			p{text-align: left;text-indent:2em;margin: 3px ;}
			strong,em(color:red;)
		</style>	
	</head>
	<body bgcolor="#FEFEFE" leftmargin="100px"rightmargin="100px">
		<h2 align="center">传统美德故事:铁杵磨成针</h2>
		<hr size="1"color="red"width="100%" />
		<div id="class=">
			<img src="R-C.jpg" />
			<p>唐朝大诗人李白,小时候不喜欢读书。一天,乘老师不在屋,悄悄溜出门去玩儿。他来到山下小河边,见一位老婆婆,在石头上磨一根铁杵。李白很纳闷,上前问:"老婆婆,您磨铁杵做什么?"老婆婆说:"我在磨针。"李白吃惊地问:"哎呀!铁杵这么粗大,怎样能磨成针呢?"老婆婆笑呵呵地说:"只要天天磨铁杵总能越磨越细,还怕磨不成针吗?" </p>
            <p>聪明的李白听后,想到自己,心中惭愧,转身跑回了书屋。从此,他牢记<strong>"只要功夫深,铁杵磨成针"</strong>的道理,发奋读书,最后成为有名的大诗人。</p>
            "书山有路勤为径,学海无涯苦作舟"   中华民族自强不息的精神,在勤奋读书方面表现得格外突出。不论是善于治国的政治家,还是胸怀韬略的军事家;不论是思维敏捷的思想家,还是智慧超群的科学家,他们之所以在事业上不同凡响,都是与他们从小的远大抱负分不开的。俗话说:"有志者立常志,无志者常立志",立志,贵在少年。 </p>
            <hr size="1" color="red" width="100%" />
		
		</div>
	</body>
</html>

相关推荐
蓝婷儿8 分钟前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐9 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
荔枝hu10 分钟前
springboot生成pdf方案之dot/html/图片转pdf三种方式
spring boot·pdf·html
小小小小小惠13 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农13 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛38 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵43 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程