# 转载请留言联系

  • 一个HTML的基本结构如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>

第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。

一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

1.标签

  • 双标签和单标签

# 双标记/双标签
  结构格式：
    <标签名 属性名="属性值" 属性名="属性值" ...>内容</标签名>     
  注意：
      一个双标签会两部分，左边叫开始标签，右边的结束标签，结束标签必须在标签名左边，有一个正斜杠 /

例如：<p></p>

# 单标记/单标签
  结构格式：
    <标签名 属性名="属性值" 属性名="属性值" ... />
 
  注意：
  单标签，最好在开始标签的最后，有一个正斜杠。

例如：<img />

  • 标题标签

<h1>标题</h1>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>标题1</h1>

    <h2>标题2</h2>

    <h3>标题3</h3>

    <h4>标题4</h4>

    <h5>标题5</h5>

    <h6>标题6</h6>

    <!--最多只有标题6，常用的只有1-4-->

</body>

</html>

  • 段落标签

<p>段落内容</p>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>我是段落1</p>

    <p>我是段落2</p>

    <p>我是段落3</p>

</body>

</html>

  • 通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式

<div>内容</div>

  • 换行标签

<br/>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>我是第一段<br/>我是第二段<br/>我是第三段</p>

</body>

</html>

  • 图片标签

<img src="路径。可以是网上的链接路径，也可以是本地路径" alt='图片加载失败时显示的文字' />

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <img src="./images/123.jpg" alt="滑稽" />

</body>

</html>

  • 超链接标签（a链接）

<a href="链接地址">链接显示的文字或者图片</a>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com">百度</a>

    <a href="http://www.baidu.com"><img src="./images/123.jpg"/></a>

</body>

</html>

注意：

1.链接地址一定要写http://或者https://

2.src=" " ----> 刷新当前页面

3.src="#" ----> 回到页面的顶部

关于超链接标签，还有一个很常用的东西。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com" target="_blank">百度</a>  #如果后面还有一个href='...'，只有前面的生效

     <!--target 表示用户点击链接，打开的方式:-->

     <!--target的值是固定：-->

     <!--_self  在当前页面中打开新的页面[默认值]-->

     <!--_blank 在新建的浏览器窗口中打开新的页面-->

</body>

</html>

  • div与span标签

div常用于包含其他的标签，用于表示，网页的一整部分内容，也就是用于进行网页的布局

span常用语包含其他的标签或者普通文本内容，也是用于进行网页的内容布局。

无意义标签的本身，没有任何其他的独特属性。

2.实体字符

&nbsp; 空白字符，一个空格
&lt; 小于号
&gt; 大于号

怎样简单编写一个html网页的更多相关文章

  1. 使用Django简单编写一个XSS平台

    1) 简要描述        原理十分简单2333,代码呆萌,大牛勿喷 >_< 2) 基础知识 XSS攻击基本原理和利用方法 Django框架的使用 3) Let's start 0x01 ...

  2. OpenResty 简单编写一个Module

    使用 Lua module 来进行 Lua 代码的复用是推荐的做法.然后在用户代码中直接用require()来调用 module代码: local myTest = {} function myTes ...

  3. 1、编写一个简单Makefile模板

    一.Makefile简介 一个工程中的源文件不计其数,其按类型.功能.模块分别放在若干个目录中,makefile定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译, ...

  4. 编写一个简单的flask的前后端交互的网页(flask简单知识的讲解)

    实验原理: 1.什么是flask Flask是一个使用Python编写的轻量级Web应用框架,其WSGI工具采用Werkzeng,模板引擎使用Jinja2.Flask与 Django之间的区别就是Dj ...

  5. 使用Java编写一个简单的Web的监控系统cpu利用率，cpu温度，总内存大小

    原文:http://www.jb51.net/article/75002.htm 这篇文章主要介绍了使用Java编写一个简单的Web的监控系统的例子,并且将重要信息转为XML通过网页前端显示,非常之实 ...

  6. 用 Go 编写一个简单的 WebSocket 推送服务

    用 Go 编写一个简单的 WebSocket 推送服务 本文中代码可以在 github.com/alfred-zhong/wserver 获取. 背景 最近拿到需求要在网页上展示报警信息.以往报警信息 ...

  7. Python 网络爬虫 005 (编程) 如何编写一个可以 下载（或叫：爬取）一个网页 的网络爬虫

    如何编写一个可以 下载(或叫:爬取)一个网页 的网络爬虫 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 Python 的集成开发环境:P ...

  8. 编写一个简单的C++程序

    编写一个简单的C++程序 每个C++程序都包含一个或多个函数(function),其中一个必须命名为main.操作系统通过调用main来运行C++程序.下面是一个非常简单的main函数,它什么也不干, ...

  9. 编写一个简单的Web Server

    编写一个简单的Web Server其实是轻而易举的.如果我们只是想托管一些HTML页面,我们可以这么实现: 在VS2013中创建一个C# 控制台程序 编写一个字符串扩展方法类,主要用于在URL中截取文 ...

随机推荐

  1. 第十一次ScrumMeeting会议

    第十一次ScrumMeeting 时间:2017/11/18 4:00-4:30 地点:主203 人员:全体人员 照片: 工作情况 名字 今日计划 明天的工作 遇到的困难 蔡帜 讨论策划详情\确定WB ...

  2. C++陷阱系列：让面试官倒掉的题

    http://blog.chinaunix.net/uid-22754909-id-3969535.html 今天和几位同仁一起探讨了一下C++的一些基础知识,在座的同仁都是行家了,有的多次当过C++ ...

  3. 【python爬虫】对喜马拉雅上一个专辑的音频进行爬取并保存到本地

    >>>内容基本框架: 1.爬虫目的 2.爬取过程 3.代码实现 4.爬取结果  >>>实验环境: python3.6版本,pycharm,电脑可上网. [一 爬虫目 ...

  4. 《SQL入门经典》总结

    <SQL入门经典>这本书从考试前就开了个头,一直到前两天才看完,拉的战线也够长的.放假来了,基本上什么内容都不记得了.好不容易看完了,就赶紧总结一下吧! 该书分为两大部分,第一部分是第1~ ...

  5. 使用window.getSelection()获取div中选中文字内容及位置

    div添加一个弹出事件: $(document).ready(function () { $("#marked-area").mouseup(function (e) { $sco ...

  6. Python 类和对象-上

    #类和对象 class Human: #属性 -> 成员属性(变量) ear = 2 mouth = 1 sex = 'man' age = 28 name = 'zhangwang' marr ...

  7. SRM708 div1 PalindromicSubseq（动态规划+容斥原理）

    题目大意:给定一个字符串,记X[i]为包含s[i]这个字符的所有子列是回文串的个数(注意是子列而不是子串),求出所有的X[i]*(i+1),然后异或起来作为返回结果 题解: 首先用容斥来想,如果当前枚 ...

  8. [洛谷P3377]【模板】左偏树（可并堆）

    题目大意:有$n$个数,$m$个操作: $1\;x\;y:$把第$x$个数和第$y$个数所在的小根堆合并 $2\;x:$输出第$x$个数所在的堆的最小值 题解:左偏树,保证每个的左儿子的距离大于右儿子 ...

  9. ARC076 F Exhausted? Hall定理 + 线段树扫描线

    ---题面--- 题目大意: 有n个人,m个座位,每个人可以匹配的座位是[1, li] || [ri, m],可能有人不需要匹配座位(默认满足),问最少有多少人不能被满足. 题解: 首先可以看出这是一 ...

  10. 遇到问题---java---myeclipse中maven项目引用另一个导致的resource文件混乱的问题

    遇到情况 情况是这样的,我们在构建项目时,经常会把一些公用的类和配置提取出去,作为一个公共项目.然后把公共项目作为一个jar包构件引入我们当前的项目中. 引入方式是 <dependency> ...