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 ...
随机推荐
- html和css入门 （一）
HTML简介 什么是HTML HTML 的全称为 超文本标记语言(Hyper Text Markup Language),这种语言给我们提供一种建立结构性文档的方法.通过表示结构性的标签语法,我们可以 ...
- BZOJ1149 [CTSC2007]风玲
Description Input Output 输出仅包含一个整数.表示最少需要多少次交换能使风铃满足Ike的条件.如果不可能满足,输出-1. Sample Input 6 2 3 -1 4 5 6 ...
- WiFiDog 与 AuthServer
背景 在一些公共场所(比如公交车.地跌.机场等)连接当地的 WiFi 时会弹出一个验证表单,输入验证信息(比如短信验证码)后就能够通过该 WiFi 联网. 本文将介绍通过 OpenWrt WiFiDo ...
- Git 拉取Gitee仓库报错：“fatal: unable to access ''": Failed to connect to 127.0.0.1 port 1080: Connection refused”
1.报错信息: 2.本地查看是否Git使用了代理 git config --global http.proxy 3.取消代理 git config --global --unset http.prox ...
- A memory map of an object
Phone类 package com.itheima_02; /* * 手机类: * 成员变量:品牌,价格,颜色... * 成员方法:打电话,发短信... */ public class Phone ...
- Android MediaPlayer 和 MediaCodec 的区别和联系（一）
目录: (1)概念解释 : 硬解.软解 (2)Intel关于Android MediaCodec的相关说明 正文: 一.硬解.软解 (1)概念: a.硬 ...
- Socket(套接字) IP TCP UDP HTTP
Socket(套接字) 阮老师的微博 (转)什么是套接字(Socket)? 应用层通过传输层进行数据通信时,TCP和UDP会遇到同时为多个应用程序进程提供并发服务的问题.多个TCP连接或多个应用程序进 ...
- windows&cmd常用命令&快捷键
1: cls即CLear Screen 功能:清除屏幕上的所有显示 2:Win+Tab快捷键进行3D窗口切换还有比较快速切换窗口的新方法. 3:利用Alt+Tab快捷键进行切换窗口时,在桌面中间会显示 ...
- 在centos6.x上安装teamviewer
首先下载公钥: # wget http://www.teamviewer.com/link/?url=354858 # rpm --import TeamViewer_Linux_PubKey.asc ...
- android 实现微信分享多张图片的功能
昨天公司老大通知客户改需求了,原来的微信分享改成分享多张图片,然后屁颠屁颠跑到微信平台看了以后 心里千万只草泥马狂奔而过,微信平台没有提供分享多张的SDK有木有啊,我们只能自己调用系统自带的分享功能实 ...