html基础学习之总结
HTML基础学习笔记
- Html基础总结
- 1、换段落标签
- 2、标题标签，共6个级别，h1最大，h6最小
- 3、网页标题标签
- 4、强制换行标签
- 5、斜体设置标签
- 6、加粗标记
- 7、下划线标记
- 8、水平线标签
- 9、不换行空格标签
- 10、备案中图标标签
- 11、左尖括号、右尖括号标签
- 12、预格式化标签
- 13、居中对齐标签
- 14、文字下标字体标记
- 15、文字上标字体标记
- 16、字体设置标记
- 17、设置链接颜色
- 18、超链接的使用
- 19、图像标记
- 20、表格标签
- 1、<caption>的使用
- 2、<tr>xxx</tr>
- 3、<th>xxx</th>和<td>xxx</td>
- 4、实例效果如图：
- 21、表单标签
- 1、表单标记<form>xxx</form>
- 2.文本域和密码<input>标记
- 3.提交、重置、普通按钮
- 4、单选框和复选框
- 5、隐藏域
- 6、多行文本域
- 7、菜单下拉列表域<select></select>标记
- 8、实例如下
- 22、无序列表和有序列表的使用
- 23、定义型列表
- 24、<frameset>框架</frameset>
- 25、div和span的使用
Html基础总结
1、换段落标签
<p>xxx</p>换段落标签
效果如图：
2、标题标签，共6个级别，h1最大，h6最小
<h1>xxx</h1>
<h2>xxx</h2>
<h3>xxx</h3>
<h4>xxx</h4>
<h5>xxx</h5>
<h6>xxx</h6>
效果如图：
3、网页标题标签
<title>xxx</title>
效果如图：
4、强制换行标签
<br />
5、斜体设置标签
<i>xxx</i>
或者
<em>xxx</em>
效果如图：
6、加粗标记
<b>xxx</b>或者<strong>xxx</strong>
效果如图：
7、下划线标记
<u>xxx</u>
效果如图：
8、水平线标签
<hr/>
效果如图：
9、不换行空格标签
 ；
效果如图：
10、备案中图标标签
©
效果如图：
11、左尖括号、右尖括号标签
<； >；
效果如图：
12、预格式化标签
<pre>xxx</pre>
效果如图：
13、居中对齐标签
<center>xxx</center>
效果如图：
14、文字下标字体标记
<sub>xxx</sub>
效果如图：
15、文字上标字体标记
<sup>xxx</sup>
效果如图：
16、字体设置标记
<font size="" color="" face="">xxx</font>
效果如图：
17、设置链接颜色
link连接的颜色
alink正在点击的颜色
vlink已经访问的连接颜色
效果如图：
18、超链接的使用
<a href=“”>xxx</a>
19、图像标记
<img src=“”>xxx</a>
20、表格标签
1、<caption>的使用
2、<tr>xxx</tr>
bgcolor属性(设置背景颜色）
algin属性（设置水平方向对齐方式）
（bottom 靠底部对齐）
（top 靠顶端对齐）
（middle 居中对齐）
valign属性（设置垂直方向对齐方式）
（left 靠左对齐）
（right 靠右对齐）
（center 居中对齐）
3、<th>xxx</th>和<td>xxx</td>
4、实例效果如图：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1 align="center">前端技术阶段划分标准</h1><caption align="top">表格的标题</caption><table border="2px" cellspacing="0"><col width="200px" /><col width="200px" /><col width="200px" /><col width="200px" /><col width="200px" /><tr align="center"><td></td><td>初级</td><td>中级</td><td>高级</td><td>专家</td></tr><tr align="center"><td>标准</td><td>dsaasdfg</td><td>sdgaadsg</td><td>dfhsdfg</td><td>dsfhgsfdhsdh</td></tr><tr align="center"><td>用户A</td><td>染发膏电风扇刚发的</td><td>东方故事帝国时代</td><td>的事故发生的</td><td>电饭锅</td></tr><tr align="center"><td>用户B</td><td>电风扇感受到</td><td>的双方各</td><td>对方告诉对方</td><td>对方告诉对方</td></tr><tr align="center" ><td>用户C</td><td>电饭锅的双方各</td><td>规划法规</td><td>规范化</td><td>同一合同号</td></tr></table></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="2px" cellspacing="0"><colgroup span="6" width="100px"/><colgroup span="1" width="200px"/><th colspan="7">个人简历</th></tr><tr height="40px" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40px" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="40px" align="center"><td>求职意向</td><td colspan="6"></td></tr></table></body>
</html>21、表单标签
1、表单标记<form>xxx</form>
2.文本域和密码<input>标记
3.提交、重置、普通按钮
4、单选框和复选框
5、隐藏域
当<input type=“hidden”>时，为隐藏表单域
6、多行文本域
7、菜单下拉列表域<select></select>标记
8、实例如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="../003图片的使用/index.html" method="get"><table width="600px" border="1px" cellspacing="0"><tbody><tr height="40px"><td rowspan="5" align="center" style="color: red;">总体信息</td><td colspan="2"></td></tr><tr height="40px" ><td align="right">用户名：</td><td><input type="text" name="loginname"/></td></tr><tr height="40px"><td align="right">密码：</td><td><input type="text" name="password"/></td></tr><tr height="40px"><td align="right">性别：</td><td><input type="checkbox" name="男"/>男<input type="checkbox" name="女"/>女</td></tr><tr height="40px"><td colspan="2" align="center"><input type="submit" value="提交" style="width: 80px; height: 30px; background-color: #A6E22E;"/><input type="reset" value="重置" style="width: 80px; height: 30px; background-color: #A6E22E;"/></td></tr></tbody></table> </form></body>
</html>
<p>出生年月<select ><option >1990</option><option >1991</option><option >1992</option><option >1993</option><option >1994</option></select>年<select ><option >1</option><option >2</option><option >3</option><option >4</option><option >5</option></select>月<select ><option >1</option><option >2</option><option >3</option><option >4</option><option >5</option></select>日<p>个人简介<textarea rows="10" cols="50"></textarea></p></p>
<input type="checkbox" name='sport' value=''>打篮球<input type="checkbox" name='sport' value=''>踢足球<input type="checkbox" name='sport' value=''>羽毛球
22、无序列表和有序列表的使用
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>百度新闻列表</title></head><body><h1>科技</h1><hr /><ul><li><a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></li><li><a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></li><li><a href="http://www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></li><li><a href="http://www.baidu.com" target="_blank">哦和阿US富婆sad鼓风机安利给你们</a></li><li><a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></li></ul><ol><li><a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></li><li><a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></li><li><a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></li><li><a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></li><li><a href="www.baidu.com">哦和阿US富婆sad鼓风机安利给你们</a></ol><ul type="disc"><li>dafgadga</li><li>dafgadga</li><li>dafgadga</li></ul><ul type="circle"><li>dafgadga</li><li>dafgadga</li><li>dafgadga</li></ul><ul type="square"><li>dafgadga</li><li>dafgadga</li><li>dafgadga</li></ul></body>
</html>23、定义型列表
24、<frameset>框架</frameset>
框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果
<html><head><title>框架</title><meta charset="utf-8"></head><frameset rows="190px,*,190px"><frame><frameset cols="20%,80%"><frame><frame></frameset><frame></frameset>
</html>
25、div和span的使用
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div style="color: gray; margin: auto; width: 500px;"><p style="text-align: center;"><span style="background-color: gray; color:white; font-size: 24px;">阿飞转前端了</span></p> <p><b>安居客和数据库寒风三</b>按时扣积分哈酸辣粉<span style="color: aqua;">刻录机散发和激发卡死了</span>阿克苏解放路口</p><p>雷克萨家搜房<b>离开家梵蒂冈瑟吉欧拍摄地方见过了快速减肥的老客户近年来咖啡店</b>来看待时间覅偶就是打了<span style="color: red;">客服妹妹水电费</span>拉数据覅索拉卡发你的</p><p>抗裂砂浆阿里客服及时答复您当时都干嘛哪几款时空裂缝佳世客DNF，暗示法卡死了积分快乐哈克鲁赛德见覅哦啊接发来看</p></div></body>
</html>第一次写，请批评指正。为了效率，文中大多数实例的汉字是随机输入的，本篇博客是自己学习笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：1105810790
html基础学习之总结相关推荐
- 【转】oracle PLSQL基础学习
[转]oracle PLSQL基础学习 --oracle 练习: /**************************************************PL/SQL编程基础****** ...
- python创建对象的格式为_Python入门基础学习(面向对象)
python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内 继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...
- 虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
- 动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类--动画产业基础 大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...
- Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender Blender纹理基础学习视频教程 CGCookie – Funda ...
- ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
- 0基础学好python难不难_零基础学习Python难不难？Python有什么优势？
原标题:零基础学习Python难不难?Python有什么优势? Python是一种计算机程序设计语言.首先,我们普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如下载一个 ...
- 计算机一级ps2019,2019年计算机一级考试PS基础学习点子：PS菜单中英文对照表.docx...
2019 年计算机一级考试 PS 基础学习点子: PS 菜单中英文对照表 PS菜单中英文对照表 一.File New 2.Open 3.Open As 4.Open Recent Close 6.Sa ...
- Java零基础学习难吗
java编程是入行互联网的小伙伴们大多数的选择,那么对于零基础的小伙伴来说Java零基础学习难吗?如果你是初学者,你可以很好的理解java编程语言.并不困难.如果你的学习能力比较高,那么你对Java的 ...
- 零基础学习java，这些书一定要看!
学习java技术除了看视频,看书也是非常重要的,尤其是零基础同学,本文包含学习Java各个阶段的书籍推荐,史上最全,学习Java,没有书籍怎么行,就好比出征没带兵器一个道理,这些书籍整理出来给大家作为 ...
最新文章
- 【深度】北大王奕森：对抗机器学习的鲁棒、隐私和架构
- JAVA中方法的类型转换_Java中几种常用数据类型之间转换的方法
- documentum中的Fulltext search的文章收集
- 学习了Python那么长的世界，有没有玩转过hello word？
- Linux 命令之 cut -- 分割字符串，显示或删除指定字段的内容，合并文件内容
- linux中sleep详解实例
- Debug和Release区别
- 分布式微服务开发_想要精通分布式微服务架构？你得先学会设计、原理与实战...
- staticmethod自己定制
- 无法定位软件包python-pip
- 龙芯3A5000笔记本安装开源操作系统loongnix记录
- 留给19371213看的
- IDEA maven项目使用Junit报错 java: 程序包org.junit不存在
- 创意撰写优化技巧通配符
- ORBSLAM2论文翻译
- 特征多项式及Cayley-Hamilton定理
- 阿里云服务器安装jdk8版本
- 在网站上的视频直播添加弹幕做法
- Solidigm P44 Pro M.2 SSD评测：全套原厂方案，性能高效且稳定
- 6-tcp/ip协议栈发展史