HTML入门2—HTML常用标签
HTML常用标签练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html常用标签</title>
<base href="https://www.cnblogs.com/" target="_blank">
<style type="text/css">
h1{color:red;}
h2{background-color:#ccc;}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta name="description" content="练习">
<meta name="keywords" content="html">
</head> <body>
<h1>标题h1</h1>
<h2>标题h2</h2>
<h3>标题h3</h3>
<h4>标题h4</h4>
<h5>标题h5</h5>
<h6>标题h6</h6>
<p>段落<br>
<a href="dinghanhua">链接</a>
图片：<img src="https://pic.cnblogs.com/face/987451/20160705115211.png" alt="pic" border='3',width="50" height="50" style="float:right;"/></p>
<hr>
<p><br>br换行。多个回车或空格都仅算作一个空格。 空格        
换行<br><br><br><br>
小于<，大于>，其他特殊符号：©，®，",&.<br> <b>b加粗文本</b> <strong>strong加粗</strong>
<i>i斜体</i> <em>em斜体</em>
<sub>下标sub</sub><sup>上标sup</sup>
<big>大字体</big><small>小字体</small>
<pre>
预格式输出文本。回车和空格不会被处理成一个： 鹅，鹅，鹅，曲项向天歌。 白毛浮绿水，红掌拨清波。
</pre>
<address>地址：银河系太阳系地球亚洲中国上海XX区XX路XX号<br>
maitto:<a href="mailto:xxx@xx.com">点击发送邮件</a><br>
</address>
<abbr title="world wide web">WWW缩写</abbr>
一般文字从左往右.<bdo dir='rtl'>从右往左</bdo>
<del>删除</del><strike>原价：99999999</strike>
<u>下划线</u><ins>插入字</ins>
</p> <a href="dinghanhua" style="text-decoration:none;">去掉链接的下划线</a>
<p>内联样式、内部样式、外部引用三种样式定义<br>
<h3 style="background-color:yellow;text-align:center;">标题3</h3>
<p style="font-family:arial;color:red;font-size:20px;text-align:center;">段落段落段落。</p> 图片热区
<img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.html">
<area shape="circle" coords="90,58,3" href="mercur.html">
<area shape="circle" coords="124,58,8" href="venus.html"
</map> 表格
<table width="100%" border="1" cellpadding="10" cellspacing="10" align="center">
<caption>表格标题</caption>
<tr><th colspan="2">name</th><th>points</th></tr>
<tr style="background-color:#333;color:#fff;">
<td>first name</td><td>last name</td><td>points</td></tr>
<tr ><td>jill</td><td>smith</td><td>50</td></tr>
<tr ><td>eve</td><td>jackson</td><td>94</td></tr>
</table> 列表
<ol type="I" start=2>有序列表
<li>项1</li>
<li>项2</li>
<li>项3</li>
</ol>
<ol type="A" >有序列表
<li>项1</li>
<li>项2</li>
<li>项3</li>
</ol>
<ul style="list-style-type:circle" >无序列表
<li>项1</li>
<li>项2</li>
<li>项3</li>
</ul> <dl>自定义列表
<dt>水果</dt><dd><ul>
<li>苹果</li>
<li>橘子</li>
</ul></dd>
<dt>鲜花</dt><dd>郁金香 蔷薇</dd>
</dl> div和span <div style="width:200px;height:100px;background:#ccc;">
文本文本文本<span style="color:red">span里的文本</span>文本文本。
</div> 用div进行网页布局。
<div id="container" sytle="width:100%;">
<div style="background-color:yellow"><h1 style="margin-bottom:0;">标题</h1></div>
<div style="width:30%;height:300px;float:left;background-color:green;">left menu</div>
<div style="width:70%;float:left;height:300px;background-color:#333;">content</div>
<div style="width:100%;background-color:red;clear:both;">footer</div>
</div> 表单——用户交互
<form action="">
<fieldset>
<legend>留言区</legend>
username: <input type="text" name="username" value="input your name"><br>
password: <input type="password" name="password" ><br>
<input type="radio" name="usertype" value="teacher" checked="checked">teacher
<input type="radio" name="usertype" value="student">student<br>
<input type="checkbox" name="logstate" value="keeplog" checked="checked">keep login<br>
<select name="sex">
<option value="male">男</option>
<option value="female" selected>女</option>
</select><br>
<textarea rows="3" cols="30">输入你的建议</textarea><br>
<input type="submit" value="提交">
<input type="reset" value="取消">
<button type="botton" onclick="alert('hello')">点我</button>
</fieldset>
</form> iframe
<iframe src="http://www.baidu.com" width="100%" height="200" frameborder="0" ></iframe>
<iframe src="https://www.cnblogs.com" width="100%" height="200" name=iframe1></iframe>
<a href="https://www.baidu.com" target="iframe1">click me </a>
<br>
颜色:rgb(red-green-blue)16进制符号定义。每种颜色区间00-ff
<p style="background-color:#ff0000">aaaaaaaaaa</p>
<p style="background-color:#0f0">aaaaaaaaaa</p>
<p style="background-color:#0000ff">aaaaaaaaaa</p>
<p style="background-color:#ffff00">aaaaaaaaaa</p>
<p style="background-color:#ff00ff">aaaaaaaaaa</p>
<p style="background-color:#00ffff">aaaaaaaaaa</p>
<p style="background-color:#ffffff">aaaaaaaaaa</p>
<p style="background-color:#000000">aaaaaaaaaa</p>
<p style="background-color:#ff4400">aaaaaaaaaa</p>
<p style="background-color:#ccc">aaaaaaaaaa</p>
<p style="background-color:rgb(120,120,120)">aaaaaaaaaa</p>
<p style="background-color:brown">aaaaaaaaaa</p> 脚本script<p><script>document.write("hello world")</script></p> <p id="demo">wfjoewfjoewjf</p> <script>function fun(){ele=document.getElementById("demo");ele.style.color="#f00"}</script>
<button type="button" onclick="fun()">点击改变文字字体</button>
</body>
</html>
HTML入门2—HTML常用标签的更多相关文章
- 前端入门html（常用标签及标签分类）
day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html 任何标签都有有三个属性:ID,class.style <!DOCTYPE ht ...
- HTML常用标签简介及快速入门
此HTML常用标签简介编写的目的,是给一个经常使用网页编辑器的一个朋友提供一个快速熟悉和入门HTML的途径. 现在分享出来,给其他有类似需求的朋友,此处只列出了编辑文章时最常用和遇到的标签,完整标签页 ...
- SpringBoot入门系列（五）Thymeleaf的常用标签和用法
前面介绍了Spring Boot 中的整合Thymeleaf .不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/16577 ...
- 咸鱼入门到放弃7--jsp<二>jsp常用标签
一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...
- java struts2入门学习--OGNL语言常用符号和常用标签学习
一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...
- java struts2入门学习---常用标签学习总结
jsp页面中引入标签: <%@ taglib uri="/struts-tags" prefix="s"%> 常用标签知识点总结: <s:fi ...
- Git版本控制软件结合GitHub从入门到精通常用命令学习手册（转）
简要参考:http://www.tuicool.com/articles/mEvaq2 http://gitref.org/zh/index.html GIT 学习手册简介 本站为 Git 学习参考手 ...
- html常用标签学习笔记
本文内容: 前言:本文讲述的内容包括几类常用标签,以及这些标签的一些常用属性(有一些属性由于已经有CSS样式来代替,所以对于一些不重要的这里选择不讲) 排版标签 段落标签:p div span 标题标 ...
- html常用标签整理
html文档结构 <!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言,zh-CN中文的意思,整个文档的内容以中文 ...
随机推荐
- PHP的魔术常量
PHP的魔术常量(变量).魔术方法(函数).超全局变量 一.魔术常量(魔术变量) 概念:所谓的魔术常量就是PHP预定义的一些常量,这些常量会随着所在的位置而变化. 1.__LINE__ 获取文件中的 ...
- IP 地址分类
1.1 网络IP地址分类 网络通讯过程中数据封装与解封过程(网际互联通讯过程) TCP/IP模型 1)应用层 总结记录一些常见网络协议以及对应的端口号(FTP HTTP telnet) 2)主机到主机 ...
- 修改阿里云ESC Centos 7.4 防火墙开放端口
例如系统:Centos 7.4操作如下 1,进入 cd /etc/firewalld/zones/ 目录 2,编辑 vim public.xml 3,按i或insert键进入编辑模式 4,在<z ...
- 服务器报nginx: [warn] conflicting server name "blog.xueyi.com" on 0.0.0.0:80, ignored
nginx: [warn] conflicting server name "blog.xueyi.com" on 0.0.0.0:80, ignored 修改nginx配置参数后 ...
- tail -f 实时跟踪一个日志文件的输出内容
tail -f 实时跟踪一个日志文件的输出内容 http://hittyt.iteye.com/blog/1927026 https://blog.csdn.net/mengxianhua/arti ...
- 阿里云服务器mail 命令发邮件
一.申请开通25端口 https://yundun.console.aliyun.com/?spm=5176.2020520001.aliyun_topbar.188.KbmgKc&p=sc# ...
- DEDE图集手工上传图片，加入水印
DEDE的图集手工上传图片,是一个非常好用的flash上传图片工具.但是如果我们希望上传的图片,带有自己网站指定的水印,却发现没有达到我们的要求--那么如果我们确实希望上传的图片,带有水印,怎么办?以 ...
- NET平台4.0 发布网站流程及出错总结
1.进入IIS设置,在控制面板中选择“管理工具”,进入后选择 “Internet 信息服务(IIS)管理器” 2.点击[添加]应用程序池,根据版本选择framework 3.添加网站 ,右击网站,添加 ...
- IIS_常见问题及解决方法
配置错误 在唯一密钥属性“value”设置为“default.aspx”时,无法添加类型为“add”的重复集合项 配置文件 \\*******\web\web.config web.config中 & ...
- phoneGap异步加载JS失败
现在正在做一个phoneGap项目,安卓平台,有个异步加载JS总是失败,phoneGap也不好调试,一个问题纠结了一下午 最后找了半天,找到了原因,因此写本文记录一下,也顺便帮帮遇到同样问题的人 原因 ...