初识HTML

什么是HTML

web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。

HTML的结构：

标记放在 HTML 文件的开头，是一个形式上的标记；标记称为主体标记，网页所要显示的内容都放在这个标记内，它是 HTML 文件的重要所在；标记称为头标记，起的作用是放置关于此 HTML 文件的信息，如提供索引、定义 CSS 样式等；标记称为标题标记，起的作用是设定网页标题；

HTML文本排版标识：

段落标签: p

换行标签: br

标题标签: h1~h6

文字居中标签:Center

文字段落缩进标签: blockquote

设置文字列表:文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来；

无序列表 ul

有序列表 ol

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meat charset="UTF-8">
  5. <title>标签</title>
  6. </head>
  7. <body>
  8. <p>段落标签   这里面放需要的第一个段落,每放一个段落都需要这样的格式<p>
  9. <p>如上所述 放第二段<p>
  11. 换行标签 在所需要换行的每一个据此后面加上<br/>
  12. 这是一句话<br/>
  13. 这是第二行的一句话<br/>
  15. 标题标签 h1-h6 每一种都有着不同的风格
  16. <h1><<明月>></h1>
  17. <h2><<明月>></h2>
  18. <h3><<明月>></h3>
  19. <h4><<明月>></h4>
  20. <h5><<明月>></h5>
  21. <h6><<明月>></h6>
  22. <h> 这里放标题</h>
  24. 文字居中标签将文字居中
  25. <center>
  26. 这里面放所需要文字
  27. 并且把文字调整为居中
  28. </center>
  30. 文字段落缩进标签
  31. <p><blockquote>缩进标签 类似于前面空几格 </blockquote><p>
  33. <p> 正常的一个段落 用于与上面的作为比较,未作任何缩进处理<p>
  35. </body>
  36. </html>

HTML标记和HTML属性：

在大多数 HTML 标记中都可以对属性控制，属性的作用是帮助 HTML 标记进一步控制 HTML 文件的内容，比如 内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。其基本语法为：

用 align 属性控制段落的水平位置    用 bgcolor 属性设置背景颜色

文字样式设置:

  1. 标记                    显示效果
  2. <b></b>                  文字以粗体方式显示
  3. <i></i>                  文字以斜体方式显示
  4. <u></u>                  文字以加下划线方式显示
  5. <s></s>                  文字以加下删除方式显示
  6. <big></big>              文字以放大方式显示
  7. <small></small>          文字以缩小方式显示
  8. <strong></strong>        文字以加强强调方式显示
  9. <em></em>                文字以强调方式显示
  10. <address></address>      用来显示电子邮件地址或网址
  11. <code></code>            用来说明代码与指令

特殊文字符号：

  1. 符号                  HTLM代码
  2.  <                      &lt;
  3.  >                      &gt;
  4.                        &copy;
  5. 上标                  <sup></sup>
  6. 下标                  <sub></sub>

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>设置文字特殊样式</title>
  6. </head>
  7. <body>
  8. 默认文字样式<br/>
  9. <b>文字以粗体方式显示</b><br/>
  10. <i>文字以斜体方式显示</i><br/>
  11. <u>文字以加下划线方式显示</u><br/>
  12. <s>文字以加下删除方式显示</s><br/>
  13. <big>文字以放大方式显示</big><br/>
  14. <small>文字以缩小方式显示</small><br/>
  15. <strong>文字以加强强调方式显示</strong><br/>
  16. <em>文字以强调方式显示</em><br/>
  17. <address>caofeng2012@126.com</address><br/>
  18. <code>abc</code><br/>
  19. </body>
  20. </html>

网页图片认识 大小设置

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>设置图片尺寸</title>
  6. </head>
  7. <body>
  8. <img width="150" height="200" src="liu.jpg"/>
  9. </body>
  10. </html>

相对路径&绝对路径

  1. 例：
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>相对路径&绝对路径</title>
  7. </head>
  8. <body>
  9. <img src="gg.png"/>
  10. <img src="../gg.png">
  11. <img src="https://bizhishe.com/d/file/2020-02-22/1582383053799166.png"/>
  12. <img src="D://yx.png"/>
  13. </body>
  14. </html>

用alt属性为图像设置替换文本

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用alt属性为图像设置替换文本</title>
  6. </head>
  7. <body>
  8. <img width="450" height="300" alt="截图1" src="yx.png"/>
  9. </body>
  10. </html>

用title属性为图像设置标题

  1. 例：
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>用title属性为图片设置标题</title>
  7. </head>
  8. <body>
  9. <img width="450" height="300" title="截图1" alt="截图1" src="yxyx.png"/>
  10. </body>
  11. </html>

4.设置基本文字超链接，图片的超链接，以新的窗口显示链接页面，电子邮件链接

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>设置图片超链接</title>
  6. </head>
  7. <body>
  8. <a href="https://bizhishe.com/d/file/2020-02-22/1582383053799166.png"><img src="1582383053799166.png"></a>
  9. </body>
  10. </html>

框架之间的链接：

框架是一种常用的网页布局工具。它的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。

用cols属性将窗口分为左右两个部分，2用rows属性将窗口分为上中下三个部分，用src属性在框架中插入网页，框架之间嵌套和建立链接。

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用src属性在框架中插入网页</title>
  6. </head>
  7. <frameset cols="50%,*">
  8. <frame src="li1.html">
  9. <frameset rows="70%,*">
  10. <frame src="li2.html">
  11. <frame src="li3.html">
  12. <frameset>
  13. </frameset>
  14. </html>

HTML中的表格

表格的基本结构：

合并单元格：用colspan属性左右合并单元格，用rowspan属性上下合并单元格。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用 rowspan 属性上下合并单元格</title>
  6. </head>
  7. <body>
  8. <table border="1">
  9. <tr>
  10.     <th>1</th>
  11.     <th>2</th>
  12.     <th>3</th>
  13.     <th>4</th>
  14. </tr>
  15. <tr>//tr表示行 td表示列  border="1"给表格加边框  th加表头    一行一二列合并  二行二列三行二列合并
  16.    <td colspan="2">1-1-2</td>
  17.    <td>1-3</td>
  18.    <td>1-4</td>
  19. </tr>
  20. <tr>
  21.    <td>2-1</td>
  22.    <td rowspan="2">3-2-2</td>
  23.    <td>2-3</td>
  24.    <td>2-4</td>
  25. </tr>
  26. <tr>
  27.    <td>3-1</td>
  28.    <td>3-3</td>
  29.    <td>3-4</td>
  30. </tr>
  31. </table>
  32. </body>
  33. </html>

用align属性设置对齐方式，用bgcolor属性设置表格背景色和边框颜色，用cellpadding属性和cellspacing属性设定边距。

(cellspadding属性设定表格单元格中的内容距离格线的距离, cellspacing属性设定表格相邻单元格边线之间的距离。)

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用 cellpadding 属性和 cellspacing 属性设定边距</title>
  6. </head>
  7. <body>设置边距 内容到边框距离  设置单元格距离
  8. <table border="1" width="400" bgcolor="red" cellpadding="20px" cellspacing="20px">
  9. <tr>
  10.     <th>1</th>
  11.     <th>2</th>
  12.     <th>3</th>
  13.     <th>4</th>   
  14. </tr>
  15. <tr align="center">设置居中
  16.    <td colspan="2">1-1-2</td>
  17.    <td>1-3</td>
  18.    <td>1-4</td>
  19. </tr>
  20. <tr>
  21.    <td>2-1</td>设置居中 设置某一列背景颜色
  22.    <td rowspan="2" align="center" bgcolor="green" >3-2-2</td>
  23.    <td>2-3</td>
  24.    <td>2-4</td>
  25. </tr>
  26. <tr bgcolor="blue">设置某一行背景颜色
  27.    <td>3-1</td>
  28.    <td>3-3</td>
  29.    <td>3-4</td>
  30. </tr>
  31. </table>
  32. </body>
  33. </html>

HTML表单

Form 表单:

表单是一个包含表单元素的区域。主要作用就是向服务器提交数据。

文本表单包括:文本框 ,密码框 ,文本域

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文本域</title>
  6. </head>
  7. <body>
  8. <from action="1.html" method="post">
  9.       <p>
  10.      用户名:<input type="text" id="userName" name="userName"/>
  11.       </p>
  12.       <p>
  13.       密码:<input type="password" id="password" name="pwd"/>
  14.       </p>
  15. </from>
  16. </body>
  17. </html>

按钮:

普通按钮,提交按钮.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文本域</title>
  6. </head>
  7. <body>
  8. <from action="1.html" method="post">
  9.       <p>
  10.      用户名:<input type="text" id="userName" name="userName"/>
  11.       </p>
  12.       <p>
  13.       密码:<input type="password" id="password" name="pwd"/>
  14.       </p>
  15.       <input type="submit" value="登录"/>
  16.       <input type="Button" value="重置"/>
  17. </from>

文件上传

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文件上传</title>
  6. </head>
  7. <body>
  8. <input type="file" id="id1" name="filename"/>
  9. </body>
  10. </html>

HTML中的块

用于网页中内容的填充

DIV:HTML:元素是块级元素，它是可用于组合其他 HTML 元素的容器。

SPAN:HTML 元素是内联元素，可用作文本的容器。

例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DIV块元素</title>
  6. </head>
  7. <body> id 加个边框 红色的
  8. <div id="d1" style="border: 1px red solid">
  9.   <h1>张三</h1>
  10.   <h2>李四</h2>
  11.   <p>王五</p>
  12. </div>>
  13. <div id="d2" style="border: 1px yellow solid">
  14.   <h1>jack</h1>
  15.   <h2>rose</h2>
  16.   <p>lucy</p>
  17. </div>>
  18. </body>
  19. </html>

HTML你好！的更多相关文章

  1. 用CIL写程序:你好，沃尔德

    前言: 项目紧赶慢赶总算在年前有了一些成绩,所以沉寂了几周之后,小匹夫也终于有时间写点东西了.以前匹夫写过一篇文章,对CIL做了一个简单地介绍,不过不知道各位看官看的是否过瘾,至少小匹夫觉得很不过瘾. ...

  2. docker4dotnet #1 – 前世今生 & 世界你好

    作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...

  3. java 写一个"HelloJavaWorld你好世界"输出到操作系统文件Hello.txt文件中

    package com.beiwo.homework; import java.io.File; import java.io.FileOutputStream; import java.io.IOE ...

  4. 你好，欢迎来到我的博客，我是博主royalmice1

    你好,欢迎来到我的博客,我是博主royalmice

  5. 你好，欢迎来到我的博客，我是博主royalmice

    你好,欢迎来到我的博客,我是博主royalmice

  6. 按要求编写Java应用程序。 （1）创建一个叫做People的类： 属性：姓名、年龄、性别、身高 行为：说话、计算加法、改名 编写能为所有属性赋值的构造方法； （2）创建主类： 创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80； 让该对象调用成员方法： 说出“你好！” 计算23+45的值 将名字改为“李四”

    package java1; public class People { public String name; public int age; public String sex; public S ...

  7. 创建一个叫做People的类： 属性：姓名、年龄、性别、身高 行为：说话、计算加法、改名 编写能为所有属性赋值的构造方法； （2）创建主类： 创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80； 让该对象调用成员方法： 说出“你好！” 计算23+45的值 将名字改为“李四”

    package com.chuoji; public class People { private String name; private int age; private String sex; ...

  8. （1）创建一个叫做People的类： 属性：姓名、年龄、性别、身高 行为：说话、计算加法、改名 编写能为所有属性赋值的构造方法； （2）创建主类： 创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80； 让该对象调用成员方法： 说出“你好！” 计算23+45的值 将名字改为“李四”

    package a; public class People { private String name,sex; private int age; private double height; pu ...

  9. 《C++ 并发编程》－ 第1章 你好，C++的并发世界

    <C++ 并发编程>- 第1章 你好,C++的并发世界 转载自并发编程网 – ifeve.com 本文是<C++ 并发编程>的第一章,感谢人民邮电出版社授权并发编程网发表此文, ...

  10. 你好，C++（23） 4.4.2 工资程序成长记：用数组处理批量数据，用循环结构执行重复动作

    4.4  从语句到程序 了解了各种表达式和语句之后,就相当于掌握了写作文要用到的词语和句子,但是,仅有词语和句子是无法构成一篇有意义的文章的.要完成一篇文章,先需要确定这篇文章的结构,是先分述再总述, ...

随机推荐

  1. 区块链入门到实战（37）之Solidity – 循环语句

    与其他语言类似,Solidity语言支持循环结构,Solidity提供以下循环语句. while do ... while for 循环控制语句:break.continue. Solidity – ...

  2. 区块链入门到实战（26）之以太坊(Ethereum) – 挖矿

    以太坊(Ethereum)与其他公共区块链一样,使用工作量证明机制确保区块链网络正常运行. 矿工进行工作量证明计算,即挖矿,来选择区块,写入区块链,确认交易. 交易过程如下图所示: 从技术角度来看,以 ...

  3. 企业站做seo用什么程序好

    http://www.wocaoseo.com/thread-306-1-1.html 随着互联网的兴起,越来越多的人通过网络来了解自已想了解的资讯,网络营销已经慢慢的取代了传统的营销模式.很多企业现 ...

  4. python数值运算 四则运算

    数值运算 描述 获得用户输入的一个字符串,格式如下:‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬ ...

  5. 码云git clone报错Incorrect username or password ( access token )

    使用码云将仓库clone到本地,报错信息如下: D:\>git clone https://gitee.com/ycyzharry/helloworld.git Cloning into 'he ...

  6. [apue] 一图读懂 unix 文件句柄及文件共享过程

    与文件相关的一些概念 在开始上图之前,先说明几个和 unix 文件密切相关的术语,方便后续讨论使用 文件句柄 / 文件描述符 (file descriptor 或 FD):描述一个打开文件相关属性的类 ...

  7. windows快速安装linux虚拟机

    1. 场景描述 因测试中需要linux集群,目前的服务器不太方便部署,需要本机(windows7)启动多个linux虚拟机,记录下,希望能帮到需要的朋友. 2. 解决方案 2.1 软件准备 (1)使用 ...

  8. C# .NET容器的源码

    这里有List<T>的源码http://referencesource.microsoft.com/#mscorlib/system/collections/generic/list.cs

  9. SICP 习题1.10

    题目要求 解题方法 递归计算 没什么好说的,单纯的套用数学公示 (define (f n) (if (< n 3) n (+ (f (- n 1)) (* 2 (f (- n 2))) (* 3 ...

  10. Java诞生及优势

    C语言 1972年诞生 贴近硬件,速度快 指针和内存管理重点 C++ 1982年诞生 面向对象 兼容C 图形领域.游戏等 Java 基于C 没有指针和内存管理 可移植,编写一次到处运行,JVM 面向对 ...