HTML你好！
初识HTML
什么是HTML
web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。
HTML的结构：
标记放在 HTML 文件的开头，是一个形式上的标记；标记称为主体标记，网页所要显示的内容都放在这个标记内，它是 HTML 文件的重要所在；标记称为头标记，起的作用是放置关于此 HTML 文件的信息，如提供索引、定义 CSS 样式等；标记称为标题标记，起的作用是设定网页标题；
HTML文本排版标识：
段落标签: p
换行标签: br
标题标签: h1~h6
文字居中标签:Center
文字段落缩进标签: blockquote
设置文字列表:文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来；
无序列表 ul
有序列表 ol
例：
<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>标签</title>
</head>
<body>
<p>段落标签 这里面放需要的第一个段落,每放一个段落都需要这样的格式<p>
<p>如上所述 放第二段<p>
换行标签 在所需要换行的每一个据此后面加上<br/>
这是一句话<br/>
这是第二行的一句话<br/>
标题标签 h1-h6 每一种都有着不同的风格
<h1><<明月>></h1>
<h2><<明月>></h2>
<h3><<明月>></h3>
<h4><<明月>></h4>
<h5><<明月>></h5>
<h6><<明月>></h6>
<h> 这里放标题</h>
文字居中标签将文字居中
<center>
这里面放所需要文字
并且把文字调整为居中
</center>
文字段落缩进标签
<p><blockquote>缩进标签 类似于前面空几格 </blockquote><p>
<p> 正常的一个段落 用于与上面的作为比较,未作任何缩进处理<p>
</body>
</html>
HTML标记和HTML属性：
在大多数 HTML 标记中都可以对属性控制，属性的作用是帮助 HTML 标记进一步控制 HTML 文件的内容，比如 内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。其基本语法为：
用 align 属性控制段落的水平位置 用 bgcolor 属性设置背景颜色
文字样式设置:
标记 显示效果
<b></b> 文字以粗体方式显示
<i></i> 文字以斜体方式显示
<u></u> 文字以加下划线方式显示
<s></s> 文字以加下删除方式显示
<big></big> 文字以放大方式显示
<small></small> 文字以缩小方式显示
<strong></strong> 文字以加强强调方式显示
<em></em> 文字以强调方式显示
<address></address> 用来显示电子邮件地址或网址
<code></code> 用来说明代码与指令
特殊文字符号：
符号 HTLM代码
< <
> >
©
上标 <sup></sup>
下标 <sub></sub>
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字特殊样式</title>
</head>
<body>
默认文字样式<br/>
<b>文字以粗体方式显示</b><br/>
<i>文字以斜体方式显示</i><br/>
<u>文字以加下划线方式显示</u><br/>
<s>文字以加下删除方式显示</s><br/>
<big>文字以放大方式显示</big><br/>
<small>文字以缩小方式显示</small><br/>
<strong>文字以加强强调方式显示</strong><br/>
<em>文字以强调方式显示</em><br/>
<address>caofeng2012@126.com</address><br/>
<code>abc</code><br/>
</body>
</html>
网页图片认识 大小设置
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片尺寸</title>
</head>
<body>
<img width="150" height="200" src="liu.jpg"/>
</body>
</html>
相对路径&绝对路径
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对路径&绝对路径</title>
</head>
<body>
<img src="gg.png"/>
<img src="../gg.png">
<img src="https://bizhishe.com/d/file/2020-02-22/1582383053799166.png"/>
<img src="D://yx.png"/>
</body>
</html>
用alt属性为图像设置替换文本
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用alt属性为图像设置替换文本</title>
</head>
<body>
<img width="450" height="300" alt="截图1" src="yx.png"/>
</body>
</html>
用title属性为图像设置标题
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用title属性为图片设置标题</title>
</head>
<body>
<img width="450" height="300" title="截图1" alt="截图1" src="yxyx.png"/>
</body>
</html>
4.设置基本文字超链接，图片的超链接，以新的窗口显示链接页面，电子邮件链接
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片超链接</title>
</head>
<body>
<a href="https://bizhishe.com/d/file/2020-02-22/1582383053799166.png"><img src="1582383053799166.png"></a>
</body>
</html>
框架之间的链接：
框架是一种常用的网页布局工具。它的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。
用cols属性将窗口分为左右两个部分，2用rows属性将窗口分为上中下三个部分，用src属性在框架中插入网页，框架之间嵌套和建立链接。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用src属性在框架中插入网页</title>
</head>
<frameset cols="50%,*">
<frame src="li1.html">
<frameset rows="70%,*">
<frame src="li2.html">
<frame src="li3.html">
<frameset>
</frameset>
</html>
HTML中的表格
表格的基本结构：
合并单元格：用colspan属性左右合并单元格，用rowspan属性上下合并单元格。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用 rowspan 属性上下合并单元格</title>
</head>
<body>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>//tr表示行 td表示列 border="1"给表格加边框 th加表头 一行一二列合并 二行二列三行二列合并
<td colspan="2">1-1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td rowspan="2">3-2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
用align属性设置对齐方式，用bgcolor属性设置表格背景色和边框颜色，用cellpadding属性和cellspacing属性设定边距。
(cellspadding属性设定表格单元格中的内容距离格线的距离, cellspacing属性设定表格相邻单元格边线之间的距离。)
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用 cellpadding 属性和 cellspacing 属性设定边距</title>
</head>
<body>设置边距 内容到边框距离 设置单元格距离
<table border="1" width="400" bgcolor="red" cellpadding="20px" cellspacing="20px">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr align="center">设置居中
<td colspan="2">1-1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>设置居中 设置某一列背景颜色
<td rowspan="2" align="center" bgcolor="green" >3-2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr bgcolor="blue">设置某一行背景颜色
<td>3-1</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
HTML表单
Form 表单:
表单是一个包含表单元素的区域。主要作用就是向服务器提交数据。
文本表单包括:文本框 ,密码框 ,文本域
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<from action="1.html" method="post">
<p>
用户名:<input type="text" id="userName" name="userName"/>
</p>
<p>
密码:<input type="password" id="password" name="pwd"/>
</p>
</from>
</body>
</html>
按钮:
普通按钮,提交按钮.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<from action="1.html" method="post">
<p>
用户名:<input type="text" id="userName" name="userName"/>
</p>
<p>
密码:<input type="password" id="password" name="pwd"/>
</p>
<input type="submit" value="登录"/>
<input type="Button" value="重置"/>
</from>
文件上传
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<input type="file" id="id1" name="filename"/>
</body>
</html>
HTML中的块
用于网页中内容的填充
DIV:HTML:元素是块级元素，它是可用于组合其他 HTML 元素的容器。
SPAN:HTML 元素是内联元素，可用作文本的容器。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV块元素</title>
</head>
<body> id 加个边框 红色的
<div id="d1" style="border: 1px red solid">
<h1>张三</h1>
<h2>李四</h2>
<p>王五</p>
</div>>
<div id="d2" style="border: 1px yellow solid">
<h1>jack</h1>
<h2>rose</h2>
<p>lucy</p>
</div>>
</body>
</html>
HTML你好！的更多相关文章
- 用CIL写程序:你好，沃尔德
前言: 项目紧赶慢赶总算在年前有了一些成绩,所以沉寂了几周之后,小匹夫也终于有时间写点东西了.以前匹夫写过一篇文章,对CIL做了一个简单地介绍,不过不知道各位看官看的是否过瘾,至少小匹夫觉得很不过瘾. ...
- docker4dotnet #1 – 前世今生 & 世界你好
作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...
- java 写一个"HelloJavaWorld你好世界"输出到操作系统文件Hello.txt文件中
package com.beiwo.homework; import java.io.File; import java.io.FileOutputStream; import java.io.IOE ...
- 你好，欢迎来到我的博客，我是博主royalmice1
你好,欢迎来到我的博客,我是博主royalmice
- 你好，欢迎来到我的博客，我是博主royalmice
你好,欢迎来到我的博客,我是博主royalmice
- 按要求编写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 ...
- 创建一个叫做People的类： 属性：姓名、年龄、性别、身高 行为：说话、计算加法、改名 编写能为所有属性赋值的构造方法； （2）创建主类： 创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80； 让该对象调用成员方法： 说出“你好！” 计算23+45的值 将名字改为“李四”
package com.chuoji; public class People { private String name; private int age; private String sex; ...
- （1）创建一个叫做People的类： 属性：姓名、年龄、性别、身高 行为：说话、计算加法、改名 编写能为所有属性赋值的构造方法； （2）创建主类： 创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80； 让该对象调用成员方法： 说出“你好！” 计算23+45的值 将名字改为“李四”
package a; public class People { private String name,sex; private int age; private double height; pu ...
- 《C++ 并发编程》－ 第1章 你好，C++的并发世界
<C++ 并发编程>- 第1章 你好,C++的并发世界 转载自并发编程网 – ifeve.com 本文是<C++ 并发编程>的第一章,感谢人民邮电出版社授权并发编程网发表此文, ...
- 你好，C++（23） 4.4.2 工资程序成长记：用数组处理批量数据，用循环结构执行重复动作
4.4 从语句到程序 了解了各种表达式和语句之后,就相当于掌握了写作文要用到的词语和句子,但是,仅有词语和句子是无法构成一篇有意义的文章的.要完成一篇文章,先需要确定这篇文章的结构,是先分述再总述, ...
随机推荐
- Java多线程_阻塞队列
1.什么是阻塞队列 我们知道,PriorityQueue.LinkedList这些都是非阻塞队列.在我们使用非阻塞队列的时候有一个很大问题,它不会对当前线程产生阻塞,那么在面对类似消费者- ...
- LR与LR？
目录 逻辑回归与线性回归 逻辑回归 1.建立目标函数 2. 梯度求解 3. 实现 线性回归 1. 建立目标函数 2. 求解 3. 实现 逻辑回归与交叉熵 逻辑回归与线性回归 逻辑回归 线性回归 目标函 ...
- 前端ES6 一些面试题
1.ES5.ES6和ES2015有什么区别? ES2015特指在2015年发布的新一代JS语言标准,ES6泛指下一代JS语言标准,包含ES2015.ES2016.ES2017.ES2018等.现阶段在 ...
- 加载PHP的配置扩展文件
一.在PHP的安装目录中去创建一个 php.ini 的配置文件 复制php.ini-development文件,修改成php.ini文件(注意:不要多加一个空格或标点什么的).其中 php.ini ...
- 流光shader 和 流光+扭曲shader
我认为这种shader能通过简单的方式呈现出不错的效果. 1.流光shader: Shader "Unlit/StreamShader" { //流光shader Properti ...
- 程序员你的maven多模块项目如何对外输出为一个构件？
上图为常见的台式机,程序员,你看了有啥启发? 台式机生产线 我的maven代码工程 xxx 显示器 xxx-web 主机 xxx-app 键盘 xxx-domian 鼠标 xxx-infrastrat ...
- libtorrent资料整理
源码libtorrent源码地址:https://github.com/arvidn/libtorrent/releases libtorrent Java库地址:https://github.com ...
- nginx模块化结构
NGINX是一个免费.开源.高性能.轻量级的HTTP和反向代理服务器,也是一个电子邮件(IMAP/POP3)代理服务器 特点: 占有内存少,并发能力强 Nginx的优点: 模块化.事件驱动.异步.非阻 ...
- 剑指 Offer 46. 把数字翻译成字符串
题目描述 给定一个数字,我们按照如下规则把它翻译为字符串:0 翻译成 "a" ,1 翻译成 "b",--,11 翻译成 "l",--,25 ...
- Mysql慢查询（配置）
慢查询?什么鬼?查询很慢吗?刚看一脸萌,学无止境 好吧,就是执行很慢的SQL 什么是慢查询 慢查询定义及作用 慢查询日志,顾名思义,就是查询慢的日志(感觉在说F话),是指Mysql记录所有执行超过lo ...