前端开发HTML&css入门——常用的标签以及一个小练习
meta标签
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
</head>
<body>
</body>
</html>
使用meta标签还可以用来设置网页的关键字，搜索引擎会对网页的关键字进行抓取。name属性设置为keywords，content属性为关键字。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="发布h5、js等前端相关的信息" />
</head>
<body>
</body>
</html>
使用meta标签还可以用来指定网页的描述，搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
</head>
<body>
9 <h1>5秒以后跳转页面</h1>
</body>
</html>
使用meta可以用来做请求的重定向，<meta http-equiv="refresh" content="秒数;url=目标路径" />
xhtml标签规范
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>xHtml的语法规范</title>
</head>
<body>
<!--
1.HTML中不区分大小写,但是我们一般都使用小写
--> <!--
2.HTML中的注释不能嵌套
--> <!--
3.HTML标签必须结构完整，要么成对出现，要么自结束标签
-->
<!-- 正确 -->
<p>我是一个p标签</p>
<!-- 错误 -->
<p>我是一个p标签 <!--
浏览器尽最大的努力正确的解析页面，你所有的不符合语法规范的内容，
浏览器都会为你自动修正，但是有些情况会修正错误
-->
<!-- 自结束标签 -->
abc
<br />
bcd
<br>
efg <!--
4.HTML标签可以嵌套，但是不能交叉嵌套
-->
<p>今天天气<font color="red">真不错</font><p> <p>今天天气<font color="red">真不错<p></font>
<hr />
<!--
5.HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
--> <p>今天天气<font color>真不错</font><p>
<p>今天天气<font color='red'>真不错</font><p>
48 </body>
49 </html>
内联框架
就是在一个页面里显示另外一个页面，在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>内联框架</title>
</head>
<body>
<h1>我是demo03</h1>
<iframe src="demo02.html" name="tom"></iframe> </body>
</html>
属性：
src ：指向一个外部页面的路径，可以使用相对路径
width：宽度
height：高度
name ：可以为内联框架指定一个name属性，name有什么用我们下面会讲到。
超链接
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<h1>我是demo04</h1>
<a href="http://www.baidu.com">我是一个超链接</a> <br /><br /> <a href="http://www.Google.com" taget=_blank>我是一个超链接</a> <br /><br />
<a href="demo03.html" target="tom">我是一个超链接</a>
<br /> <br />
<iframe src="demo02.html" name="tom"></iframe>
<center>
<p>我是一个p标签</p>
</center> </body>
</html>
使用超链接可以让我们从一个页面跳转到另一个页面，使用a标签来创建一个超链接。
标签中的target属性可以用来指定打开链接的位置。
center标签中的内容，会默认在页面中居中显示，我们可以将要居中的元素，全都放到center中
target属性可选值：
_self，表示在当前窗口中打开（默认值）
_blank，在新的窗口中打开链接
也可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
属性：
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址。
target:可以用来指定打开链接的位置。
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<center>
<h1>这是我的个人博客</h1>
<hr />
<h2>东风破</h2>
<a href="#">周杰伦</a>
<p>
一盏离愁 孤单伫立在窗口 <br />
我在门后 假装你人还没走 <br />
旧地如重游 月圆更寂寞 <br />
夜半清醒的烛火 不忍苛责我 <br />
一壶漂泊 浪迹天涯难入喉<br />
你走之后 酒暖回忆思念瘦<br />
水向东流 时间怎么偷<br />
花开就一次成熟 我却错过<br />
谁在用琵琶弹奏 一曲东风破<br />
岁月在墙上剥落 看见小时候<br />
犹记得那年我们都还很年幼<br />
而如今琴声幽幽 我的等候你没听过<br />
<img src="1.jpg" alt="mv图片" width="300px"><br />
谁在用琵琶弹奏 一曲东风破<br />
篱笆外的古道我牵着你走过<br />
荒烟漫草的年头 就连分手都很沉默<br />
<a href="https://www.bilibili.com/video/av55145151?from=search&seid=8625942381498730567" target="B">东风破</a>
<iframe src="" width="500px" height="500px" name="B"></iframe><br>
谁在用琵琶弹奏 一曲东风破<br />
岁月在墙上剥落 看见小时候<br />
犹记得那年我们都还很年幼<br />
而如今琴声幽幽 我的等候你没听过<br />
谁在用琵琶弹奏 一曲东风破<br />
枫叶将故事染色 结局我看透<br />
篱笆外的古道我牵着你走过<br />
荒烟漫草的年头 就连分手都很沉默<br />
</p>
<hr />
友情链接：<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a>
<br /> <br />
<a href="#top">回到顶部</a> | <a href="mailto:aaa@aaa.com">联系我们</a>
</center>
</body>
</html>
前端开发HTML&css入门——常用的标签以及一个小练习的更多相关文章
- 前端开发HTML&css入门——一些其他常用的文本标签
em标签和strong标签 i标签和b标签 small标签 cite标签 q标签和blockquote标签 em主要表示语气上的强调,em在浏览器中默认使用斜体显示strong表示强调的内容,比em更 ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
- 前端开发HTML&css入门——CSS&选择器练习
CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低 ...
- 前端开发HTML&css入门——HTML
HTML究竟为何物?其实HTML就是一种标记语言,英文全称为Hypertext Markup Language,翻译过来就叫超文本标记语言.它的作用就是负责负责网页的三个要素之中的结构. HTML使用 ...
- 前端开发HTML&css入门——CSS的文本格式化
长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能 ...
- 前端开发HTML&CSS入门——具体是做什么的
软件开发,一提起来感觉这个感觉这个词范围很大很广,说起来也很笼统.不知所云,开发的到底是什么?或者说开发的具体内容是什么?以前我们讲软件开发主要是分前端和后端,那前端和后端又是什么那?你可以这么通俗的 ...
- 前端开发HTML&css入门——盒子模型以及部分CSS样式
CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 要web开发精品教程吗？免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
随机推荐
- springboot + 注解 + 拦截器 + JWT 实现角色权限控制
1.关于JWT,参考: (1)10分钟了解JSON Web令牌(JWT) (2)认识JWT (3)基于jwt的token验证 2.JWT的JAVA实现 Java中对JWT的支持可以考虑使用JJWT开源 ...
- requiredBackgroundModes
申明需要后台运行的能力,类型为数组.目前支持以下项目: audio: 后台音乐播放如: { "pages": ["pages/index/index"], &q ...
- poj 3613Cow Relays
Description For their physical fitness program, N (2 ≤ N ≤ 1,000,000) cows have decided to run a rel ...
- IDEA集成java编程规范插件
第一种:如图所示搜索 Alibaba Java Coding Guidelines(阿里巴巴) 安装完成后,重启idea,点击tools>阿里巴巴编程>编程规约扫描 即可
- linux/Unix下的vim/vi指令的使用方法
概述 以下这篇文章介绍的是关于vim的使用方法,由于我本身对linux没有太多的研究,写下的这篇文章纯属是在实际中经常使用vim指令,想通过这篇文章记录下来,方便以后使用时查找方便.个人认为,对于普通 ...
- 大数据笔记（十九）——数据采集引擎Sqoop和Flume安装测试详解
一.Sqoop数据采集引擎 采集关系型数据库中的数据 用在离线计算的应用中 强调:批量 (1)数据交换引擎: RDBMS <---> Sqoop <---> HDFS.HBas ...
- Linux新增用户，并设置Root（管理员）权限
在使用Linux过程中,Root账号拥有最大的操作权限.为保证Root账号安全,一般不直接使用Root账号,而是直接创建一个拥有Root权限的其它账号来使用.详细操作步骤如下 第一步,创建用户,如下图 ...
- #20175201张驰 实验三 敏捷开发与XP实践
实验步骤 (一)敏捷开发与XP 一.敏捷开发与XP实践-1 ①实验要求: 敏捷开发与XP实践 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse ...
- TCP报文段首部格式详解
TCP首部格式 格式字段详解 源端口.目标端口: 计算机上的进程要和其他进程通信是要通过计算机端口的,而一个计算机端口某个时刻只能被一个进程占用,所以通过指定源端口和目标端口,就可以知道是哪两 ...
- C++返回栈上的数组（局部变量）问题探索
char* teststr() { char s[] = "hello"; return s; } void main() { char* str = teststr(); ]; ...