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是可以直 ...
随机推荐
- CentOS修改网络设置,不容易啊,终于可以在virtualbox里上网了
CentOS 修改网关 修改对应网卡的网关的配置文件[root@centos]# vi /etc/sysconfig/network修改以下内容NETWORKING=yes(表示系统是否使用网络,一般 ...
- 给url添加时间戳，解决浏览器缓存
//解决浏览器缓存function timestamp(url){ // var getTimestamp=Math.random(); var getTimestamp=new Date().get ...
- 阅读笔记06-架构师必备最全SQL优化方案（2）
四.基础优化 1.优化思路? 定位问题点吮吸:硬件-->系统-->应用-->数据库-->架构(高可用.读写分离.分库分表). 处理方向:明确优化目标.性能和安全的折中.防患未然 ...
- 2019/10/27 TZOJ
1001 Gaussian Prime http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail&id=379 ...
- SQLServer2008查询时对象名无效
情况一:如果表名是关键字,查询时把表名括起来,不作为关键字使用 情况二:看左上角显示的是否是master,这是数据库的默认系统库,点选这个改成自己的即可
- 【五一qbxt】day7-1 引水入城
[noip2010 洛谷p1514]引水入城 Before: 线段覆盖问题#1:(我们所需要的) 一个区间,若干条线段,现在求最少多少条线段覆盖满整个区间 区间长度8,可选的覆盖线段[2,6],[1, ...
- [暑假集训Day3T1]小木棍
经典搜索题. 考虑以下9种优化 1)按木棍长度排序,使得较大长度的木棍被较早的选出. 2)只找能够整除的木棍长度,因为不能被sum整除一定不会出整数根,自然也就不是最优解. 3)枚举木棍长度时只需从最 ...
- Solution for NULL pointer dereference
•mmap_min_addr forbids users from mapping low addresses 1. First available in July 2007 2. Several c ...
- UVAlive 6756 Increasing Shortest Path
We all love short and direct problems, it is easier to write, read and understand the problem statem ...
- NGUI技能CD效果制作(sprite的type:filled)
一,我们先添加一个sprite,改名为skill.给当前skill添加图片,然后再sprite下添加一个sprite和一个label,结果如下 二现在我们来设置skill下的sprite,给他设置一个 ...