html 的一些基础操作
花了一天学了点html语言。。不记下来的话又白学了
基础中的基础格式
<!DOCTYPE html> <html>
<head>
<!-- 字符集的选择 utf-8 gbk gbk2312 -->
<meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 -->
<title>我是标题</title>
</head> <body> <!-- 换行标签 -->
Hello world!</br>
html语法不区分大小写</br> <!-- 下划线标签 -->
<hr/> <!-- 加粗标签 -->
<h1>h1级加粗</h1>
<h2>h2级加粗</h2>
<h3>h3级加粗</h3>
<h4>h4级加粗</h4>
<h5>h5级加粗</h5>
<h6>h6级加粗</h6> <!-- 段落标签 -->
<p>
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．
通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
</p> <p>
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、
图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，
</p> <!-- 属性 -->
<p align="right">
向右对齐属性
</p>
<p align="center">
居中对齐属性
</p>
<p align="justify">
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致
</p> <!-- 预格式标签：将编辑器里的文字原封不动显示到浏览器-->
<pre>
HTML称为超文本标记语言
，
是一种标识性的语言。它包括一系列标签．
通过这些标签可以将网络上的文档格式
统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML
命令可以说明文字，图形、动画、声音、表格、链接等
</pre> <!-- 字体属性标签 -->
<p>
颜色是<font color="red">红色</font>
颜色是<font color="green">绿色</font>
大小是<font size="1">1号</font>
大小是<font size="3">3号</font>
大小是<font size="7">7号</font>
字体是<font face="隶书">隶书</font>
</p> <!-- 修饰标签 -->
<p>
<b>加粗</b> </br>
<i>倾斜</i> </br><sub>[下标]</sub><sup>[上标]</sup>
</p> <!-- 特殊符号 -->
<p>
左尖括号< 右尖括号> </br>
空格 空格
</p> <!-- 为超链接定义的锚点 -->
<a href="#" name="maodian"></a>
<!-- 从这里就可以跳到图片列表和链接去 -->
<a href="图片列表和链接.html#chapter1" ><h1>第一章</h1></a>
<a href="图片列表和链接.html#chapter2" ><h1>第二章</h1></a>
<a href="图片列表和链接.html#chapter3" ><h1>第三组</h1></a> </body> </html>
图片，列表和超链接
<!DOCTYPE html> <html>
<head>
<!-- 字符集的选择 utf-8 gbk gbk2312 -->
<meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 -->
<title>我是标题</title>
</head> <body> <!-- 图片标签 -->
这是我的<img src="Img/zsben.jpg" align="top"/>和文字上对齐图片</br>
这是我的<img src="Img/zsben.jpg" align="bottom"/>和文字下对齐图片</br>
这是我的<img src="Img/zsben.jpg" align="middle"/>和文字中间对齐图片</br> 给图片调整大小<img src="Img/zsben.jpg" align="bottom" width="200px" height="100px"/></br>
给图片调整大小<img src="Img/zsben.jpg" align="bottom" width="20%" height="20%"/></br> <!-- 图片替代文本 -->
给图片调整大小<img src="Img/zsbenn.jpg" align="bottom"
width="2000px" height="1000px" alt="图片加载失败"/></br> <!-- 无序列表 -->
<ul type="circle">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ul> <ul type="square">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ul> <ul type="disc">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ul> <!-- 有序列表 -->
<ol type="10">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ol> <ol type="a">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ol> <ol type="A">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ol> <ol type="i">
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
<li>两端空白保持一致两端空白保持一致两端</li>
</ol> <!-- 自定义列表 -->
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>运动</dt>
<dd>跑步<dd>
<dd>打篮球</dt>
</dl> <!-- 超链接 -->
<a href="基础文字格式.html">进入站内链接到基础文字格式</a></br>
<a href="http://www.baidu.com">进入站外链接到百度</a>
<!-- 空链接(锚点) -->
<a gref="#">空链接</a> <!-- 图片链接 -->
<a href="http://www.baidu.com"><img src="Img/zsben.jpg"></a></br> <!-- 超链接属性 -->
<a href="基础文字格式.html" target="_blank">打开新网页进行跳转</a></br>
<a href="基础文字格式.html" target="_self">在当前页面进行跳转</a></br>
<a href="基础文字格式.html" title="超链接标题">鼠标滑过可显示标题</a></br> <!-- 锚点：用来进行定位跳转-->
<!-- 在本页面内跳转 -->
<a href="#chapter1">第一章</a></br>
<a href="#chapter2">第二章</a></br>
<a href="#chapter3">第三章</a></br> <a href="#" name="chapter1"></a>
<h1>第一章</h1></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br>
<a href="#" name="chapter2"></a>
<h1>第二章</h1></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br>
<a href="#" name="chapter3"></a>
<h1>第三章</h1></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br></br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> <!-- 跳转到其他网页的某位置 -->
<a href="基础文字格式.html#maodian"><h1>跳转到基础文字格式的超链接</h1></a> <!-- 使用超链接进行下载 -->
<a href="Img.zip">进行下载</a> <!-- 使用超链接访问邮箱 -->
<a href="mailto:1249461124@qq.com">访问邮箱</a>
</body> </html>
表格
<!DOCTYPE html> <html>
<head>
<!-- 字符集的选择 utf-8 gbk gbk2312 -->
<meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 -->
<title>我是标题</title>
</head> <body> <!-- 表格标签 边界 宽度(会自动延伸) 高度 表格居中 颜色 边框间距 单元格内容和边框间距-->
<table border="20px" width="500px" height="400px" align="center"
bgcolor="green" cellspacing="10px" cellpadding="10px"> <!-- 一行 -->
<tr height="300px" align="right" valign="top" bgcolor="red">
<!-- 一列 -->
<td width="200" bgcolor="pink">一个单元格</td>
<td>一个单元格</td>
<td>一个单元格</td>
</tr>
<tr align="center">
<!-- 一列 -->
<td>一个单元格</td>
<td>一个单元格</td>
<td>一个单元格</td>
</tr> </table> </br> <!-- 多行多列合并 -->
<table border="20px" width="500px" height="200px" align="center" >
<tr align="center">
<!-- 列合并--->
<td colspan="2">一个单元格</td>
<td>一个单元格</td>
</tr>
<tr align="center">
<!-- 行合并 -->
<td rowspan="2">一个单元格</td>
<td>一个单元格</td>
<td>一个单元格</td>
</tr>
<tr align="center">
<td colspan="2" rowspan="2">一个单元格</td>
</tr>
<tr align="center">
<!-- 一列 -->
<td>一个单元格</td>
</tr>
<tr align="center">
<!-- 一列 -->
<td>一个单元格</td>
<td>一个单元格</td>
<td>一个单元格</td>
</tr>
</table> <!-- 练习 -->
<table border="1px" align="center" width="500px" height="300px">
<tr align="center">
<td rowspan="2">商品</td><td colspan="2">本月</td><td colspan="2">上月</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table> <!-- 设置网页百分比 嵌套表格-->
<table border="1px" align="center" width="80%">
<tr align="center">
<td rowspan="2">
<table border="1px" align="center" width="50%" height="80%">
<tr align="center">
<td rowspan="2">商品</td><td colspan="2">本月</td><td colspan="2">上月</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</td> <td colspan="2">本月</td><td colspan="2">上月</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table> <!-- 设置表头 标题-->
<table border="1px" align="center" width="500px" height="300px">
<caption>销售统计表</caption>
<tr align="center">
<th rowspan="2">商品</td><th colspan="2">本月</td><th colspan="2">上月</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table> </body>
</html>
表单的一些操作
<!DOCTYPE html> <html>
<head>
<!-- 字符集的选择 utf-8 gbk gbk2312 -->
<meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 -->
<title>我是标题</title>
</head> <!-- action为表单提交路径 method控制数据提交方法:get是直接放在url里，post将数据单独封装成一个包 最后一个参数用来上传文件-->
<form action="表格.html" method="post" name="register" enctype="mutipart/form-data"> <!-- 表单的一些属性 -->
<table>
<tr>
<td>账号</td>
<td><input type="text" name="text"
maxlength="6" placeholder="请输入你的用户名"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password"
name="password" placeholder="请输入密码"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password"
name="repassword" placeholder="请输入密码"/></td>
</tr> <!-- 单选框 -->
<tr>
<td>性别</td>
<!-- 两个控件同名，只能选择一个 -->
<td>男<input type="radio" name="sex" checked /> 女<input type="radio" name="sex"/></td>
</tr> <tr>
<td>是否是中国人</td>
<td>是<input type="radio" name="isChinese" checked /> 不<input type="radio" name="isChinese"/></td>
</tr> <!-- 多选框 -->
<tr>
<td>爱好</td>
<td>读书<input type="checkbox" name="hobby" />
游泳<input type="checkbox" name="hobby" />
旅游<input type="checkbox" name="hobby" />
玩游戏<input type="checkbox" name="hobby" /></td>
</tr> <!-- 提交按钮，重置按钮，普通按钮 -->
<tr>
<td colspan="2" align="center"> <input type="reset" name="reset" value="设置为默认">
<input type="submit" name="register" value="注册"/> </td>
</tr> <!-- 图片提交按钮 -->
<tr>
<td colspan="2" align="center"> <input type="image" src="Img/zsben.jpg" /> </td>
</tr> <!-- 隐藏控件 -->
<input type="hidden" name="id" value="100" /> <!-- 下拉列表 -->
<tr>
<td>生日</td>
<td>
<select name="month">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7" selected>7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
</td>
</tr> <!-- 文本域 -->
<tr>
<td>交友宣言</td>
<td>
<textarea placeholder="可以说一下你的交友理由" rows="20" cols="20">
</textarea>
</td>
</tr> <!-- 文件上传 -->
<tr>
<td>
简历上传<input type="file" name="resume"/>
</td>
<td></td>
</tr> </table> </form> </html>
框架切割网页
<html>
<frameset rows="25%,*">
<frame src="框架1.html" name="top"/> <frameset cols="25%,*">
<frame src="框架2.html" name="bottom"/>
<frame src="框架3.html" name="middle"/>
</frameset> </frameset>
</html>
html 的一些基础操作的更多相关文章
- python基础操作以及hdfs操作
目录 前言 基础操作 hdfs操作 总结 一.前言 作为一个全栈工程师,必须要熟练掌握各种语言...HelloWorld.最近就被"逼着"走向了python开发之路, ...
- MYSQL基础操作
MYSQL基础操作 [TOC] 1.基本定义 1.1.关系型数据库系统 关系型数据库系统是建立在关系模型上的数据库系统 什么是关系模型呢? 1.数据结构可以规定,同类数据结构一致,就是一个二维的表格 ...
- 【Learning Python】【第二章】Python基础类型和基础操作
基础类型: 整型: py 3.0解决了整数溢出的问题,意味着整型不必考虑32位,64位,有无符号等问题,你写一个1亿亿亿,就是1亿亿亿,不会溢出 a = 10 ** 240 print(a) 执行以上 ...
- Emacs学习心得之 基础操作
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础操作 1.前言与学习计划2.Emacs基础操作 一. 前言与学习计 ...
- Git基础操作
配置秘钥 1.检查本机有没有秘钥 检查~/.ssh看看是否有名为d_rsa.pub和id_dsa.pub的2个文件. $ ~/.sshbash: /c/Users/lenovo/.ssh: Is a ...
- activiti基础操作
package activitiTest; import java.io.InputStream; import java.util.List; import java.util.zip.ZipInp ...
- 《Genesis-3D开源游戏引擎-官方录制系列视频教程：基础操作篇》
注:本系列教程仅针对引擎编辑器:v1.2.2及以下版本 G3D基础操作 第一课<G3D编辑器初探> G3D编辑器介绍,依托于一个复杂场景,讲解了场景视图及其基本操作,属性面板和工具栏的 ...
- MYSQL 基础操作
1.MySQL基础操作 一:MySQL基础操作 1:MySQL表复制 复制表结构 + 复制表数据 create table t3 like t1; --创建一个和t1一样的表,用like(表结构也一样 ...
- php之文件基础操作
在php中对文件的基础操作非常的简单,php提供的函数粗略的用了一遍. file_get_contents():可以获取文件的内容获取一个网络资源的内容,这是php给我封装的一个比较快捷的读取文件的内 ...
- ArcGIS Pro 简明教程（2）基础操作和简单制图
ArcGIS Pro 简明教程(2)基础操作和简单制图 By 李远祥 本章主要介绍ArcGIS Pro如何加载数据并进行简单的地图制作,以基本的操作为主. 上一章节介绍过,ArcGIS Pro是可以直 ...
随机推荐
- 前后端分离及React的一些研究
前言 在对英才网企业线前端不断的完善过程中,我们尝试进行了前后端分离,引入Node环境.以及在使用React的过程中,自行开发DOM渲染框架,解决React兼容低版本IE的问题,在这个过程中,我们有了 ...
- Window 相关命令
net user Administrator /Active:Yes NET USER 用于创建和修改计算机上的用户帐户.当不带选项使用本命令时,它会列出计算机上的用户帐户.用户帐户的信息存储在用户帐 ...
- Linux 初始化系统（init）- systemd
wikipedia 浅析 Linux 初始化 init 系统 systemd 中文手册 fedoraproject - systemd 1. Systemd 简介 Systemd 是 Linux 系统 ...
- c++虚函数与重载
class base{ public: virtual void f(int n){ cout << "base"<<endl; } }; class De ...
- Bootstrap 学习笔记4 巨幕页头略缩图警告框
- LeetCode 113. Path Sum II 动态演示
给第一个目标值,返回一棵树从根到叶子所有和等于目标值的路径. 经典的深度优先算法 /** * Definition for a binary tree node. * struct TreeNode ...
- 模拟赛毒瘤状压DP题：Kronican
Kronican 内存限制:32 MiB 时间限制:2000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 上传者: cqbzgm 题目描述 Mislav有N个无限体积的杯子,每一个杯子中都 ...
- Codeforces 1110F(DFS序+线段树）
题面 传送门 分析 next_id = 1 id = array of length n filled with -1 visited = array of length n filled with ...
- 小Z的袜子(题解)(莫队)
小Z的袜子(题解)(莫队) Junlier良心莫队 题目 luoguP1494 [国家集训队]小Z的袜子 code #include<bits/stdc++.h> #define lst ...
- hdu5858 Hard problem（求两圆相交面积）
题目传送门 Hard problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...