web前端开发从0到1—html结构与常用标签
一:html文档标签结构
<html></html>
<!--文档片头信息,表示文档内容是用什么标签写的。-->
<head></head>
<!--head是网页定义网页头部信息,该信息不会显示在网页中,head标签里面可以嵌入其它标签-->
<title></title>
<!--title标题标签,给自己的网页起一个的名字-->
<meta>
<!--meta元素提供的信息是用户看不见的,只是提供给那些搜索引擎使用。-->
<!--在元素信息里面可以定义关定义关键字:keywords;定义关键字的内容:content -->
<body></body>
<!--正文内容,标签之间的文本是正文,是在浏览器里显示的页面内容。-->
二:常用的HTML标签主要有:
双标签
单标签
标题标签:注意:标题标签只能是h1~h6
段落标签
强调标签
倾斜标签:(注:此标签可用在小图标上)
单独设置样式标签
无序列表标签
有序列表标签
自定义列表标签
盒子标签
图片标签
超链接标签
换行标签:上标和下标
三:图文案例(首先下载编辑器:EditPlus)
<!doctype html><!--文档头信息-->
<html lang='en'><!--跟标签-->
<head>
<meta charset="UTF-8"><!--字符编码-->
<meta name='Keywords' content=''><!--关键字-->
<meta name='Description' content=''><!--网页描述-->
<title></title><!--网站标题-->
</head><!--网页头部-->
<body><!--可视化区域-->
<div>
<!--插入一张图片-->
<img src='https://img.jj59.com/3/5ad9919c8dd1.jpg'>
<!--设置标签大小为h2,并设置一个超链接-->
<h2><a href='https://www.jj59.com/jjart/424201.html'>禅荷一支烨人生<a/></h2>
<!--单独设置字体样式-->
作者:<span>晓枫婉月</span>
<!--用段落标签输入文本内容-->
<p>一支荷,从那碗幽幽的泥水里探出几枚纤巧的叶,见此,我甚喜,以为,它终不负春风的意,阳光的暖,雨露的润,泥土的力而捧出了一颗忘我的心</p>
<p>一碗“红颜滴翠”,一碗“春水绿波”,都是我久别重逢的客人。因来之不易,便格外地悉心。而今,伴冬去春回,看它脉脉含情欲诉心意,贻红颜赧报之势,柔软得我如祥云白雾一般,绵绵乎飘飘然不知归处。</p>
<!--创建一个无序列表-->
<ul>
<li>一直以为,荷是清贫的,一口水,一把泥,便是一生;</li>
<li>一直以为,荷是灵魂的,任凭夜深露重,风起雨落,自可将生死都置之于度外。</li>
</ul>
<p>这世上,最恬淡,最明净的是什么呢?</p>
<dl>
<!--自定义列表dl-->
<dt>我问朝霞</dt>
<dd>朝霞流露出痛苦的光芒</dd>
<dt>我问高山</dt>
<dd>高山扬起绵绵的思量</dd>
<dt>我问河水</dt>
<dd>河水倾泻出奔腾的泪光</dd>
</dl>
<!--粗体、斜体强调-->
<p><strong>夜深,<em>月明</em>、我低头向荷,荷静静地矗在水中央。<strong></p>
</div>
</body>
</html>
四:结果如图:
web前端开发从0到1—html结构与常用标签的更多相关文章
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
- Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版
WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...
- Web前端开发的应用和前景——web 1.0到web 3.0
Web前端开发的应用和前景--web 1.0到web 3.0 Web1.0:(只读时代) 以静态.单向阅读为主,网站内信息可以直接和其他网站信息进行交互,能通过第三方信息平台同时对多家网站信息进行整合 ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- 4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
- web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- 【转载】WEB前端开发规范文档
本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 研究了一年多的js,也差不多写一个自己的js库了.我写这个不算框架,只是一个小型的js工具 ...
- bootstrap Table的使用方法
1.官网 url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 文档包含了表格属性.列属性.事件.方法等等. 2.引入库 只 ...
- 五、angularjs在进入界面前加载数据
有时候我们需要在页面加载前就要绑定数据,比如有的图片太多就会导致在加载的过程中很慢,或者title是动态的,通过从后台取数据来改变,如果进入页面后在读取数据会导致以页面刷新数据太慢,这样就需要我们在进 ...
- windows更新文件和windows.old文件夹清理
在对Windows系统进行升级之后会发现C盘多出一个Windows.old文件夹,直接点击删除缺没有权限,不能进行删除. 在对window进行修复补丁时会产生大量的补丁更新文件,有时不清楚文件存在在哪 ...
- Java学习---Pinyin4j使用手册
一般用法 pinyin4j的使用很方便,一般转换只需要使用PinyinHelper类的静态工具方法即可: String[] pinyin = PinyinHelper.toHanyuPinyinStr ...
- 音乐mp4网站 汽车服务工程 张旭
- MapReduce Design Patterns(chapter 2(part 1))(二)
随着每天都有更多的数据加载进系统,数据量变得很庞大.这一章专注于对你的数据顶层的,概括性意见的设计模式,从而使你能扩展思路,但可能对局部数据是不适用的.概括性的分析都是关于对相似数据的分组和执行统计运 ...
- 二进制安装mariaDB
1.获取二进制安装包 获取二进制格式MariaDB安装包,可去官网下载. 因为是实验环境,所以选择了最新版. mariadb-10.2.12-linux-x86_64.tar.gz 2.解压 解压到 ...
- UNIX crontab自动执行脚本
crontab 是不会加载环境变量的你手动执行可以是因为登录了oracle用户加载了环境变量,你可以在脚本里添加,echo $ORACLE_HOME echo $ORACLE_SID 等等试试,看看 ...
- Azure Internet 负载均衡器建立
摘自微软官方文档 Azure load balancer 是位于第 4 层 (TCP, UDP) 的负载均衡器. 该负载均衡器可以在云服务或负载均衡器集的虚拟机中运行状况良好的服务实例之间分配传入流量 ...