web开发 简单的html2
2024-04-29 08:30:20
文章目录
- 块级元素
- 行内元素
- html字符实体
- 引用
- 格式化元素
- 排序
- ol
- 案例：二级菜单
块级元素
块级元素总是在新的行上开始，并尽可能的占据本行全部可用的宽度
常见的有
<address> <article> <aside> <blockquote><canvas> <dd> <div> <dl> <dt>
<fieldset><figcaption> <figure><footer><form><h1>~<h6><header> <hr><li><main>
<nav><noscript><ol><output><p><pre><section><table> <tfoot><ul><video>
行内元素
行内元素不会另起一行，只是占用必要的宽度
<a> <abbr> <acronym> <b> <bdo><big><br><button> <cite> <code> <dfn> <em>
<i><img><input> <kbd> <label> <map><object> <q><samp> <script> <select>
<small><span> <strong><sub> <sup><textarea ><time><tt><var>
- 一般情况下，行内元素只能包含数据和其他行内元素
- 块级元素可以包含行内元素和其他块级元素
- 这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构
<!DOCTYPE html>
<html>
<head><title>换行</title><style>span { color: red }</style>
</head>
<body><!--span是行内元素，不会换行，br相当于是换行符--><p>或许是不知梦的缘故，<br />流离<span>之人追</span>逐幻影</p><p>生人无与相惜者，<span>曰悲</span></p><a href="https://space.bilibili.com/456687192" target="_blank">一键进入</a>
</body>
</html>
html字符实体
- 在 HTML 中，某些字符是预留的。不能使用包含这些字符的文本。
- 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
- 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体查阅 小甲鱼
下面的这种情况在网页显示不出来
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>pre元素演示</title>
</head>
<body><pre><!DOCTYPE html><html><head><meta charset="utf-8"><title>pre元素演示</title></head><body></body></html></pre>
</body>
</html>
要用到字符实体
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>插入代码演示</title>
</head>
<body><!--pre元素插入代码--><pre><!DOCTYPE html><html><head><meta charset="utf-8"><title>pre元素演示</title></head><body></body></html></pre><!--code元素插入代码--><p>HTML中注释的语法是：<code><!--这里写注释的内容--></code></p><!--pre和code插入代码--><pre><code><!DOCTYPE html><html><head><title>七里香-周杰伦</title></head><body><h1>七里香</h1><h6>哈哈哈</h6><p>是一种鸡屁股</p></body></html></code></pre><!--var、kbd、samp元素--><!--定义程序的变量、定义用户的输入、定义程序的输出--><p>上面的代码定义了一个变量<var>user_input</var>，用于定义用户的输入</p><p>如果用户的输入是<kbd>香蕉</kbd>，那么程序将打印<samp>你最喜欢吃的水果是：香蕉</samp></p>
</body>
</html>
引用
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>引用演示</title>
</head>
<body><!--q元素用于简短的行内引用--><p>孔子有云：<q>学而不思则罔，思而不学则殆</q></p><!--cite包括一个标题--><p><cite>《百度百科》</cite>中对龙族有如下解释</p><!--blockquote采用缩进的形式引用--><blockquote><p>《龙族》是作家江南创作的系列长篇魔幻小说</p><p>由《龙族Ⅰ火之晨曦》、《龙族Ⅱ悼亡者之瞳》、《龙族Ⅲ黑月之潮》、《龙族Ⅳ奥丁之渊》，《龙族Ⅴ：悼亡者的归来》组成</p><p>2009年10月1日开始在小说绘上连载，第一部于2010年04月首次出版，第二部于2011年05月出版，第三部上篇于2012年12月出版，第三部中篇于2013年07月出版，第三部下篇于2013年12月出版，第四部则于2015年10月出版，第五部于2018年5月15日在QQ阅读平台开始连载</p></blockquote><!--abbr元素可以包含一个可能不认识东西--><p><abbr title="哔哩哔哩">BiliBili.com</abbr>是一个网站</p><!--dfn元素用于包裹术语--><p><dfn>HTML</dfn>是一门用于创建网页的标准标记语言</p><!--address元素包裹作者的地址，邮箱等联系方式--><address><strong>联系我们：</strong><br>邮箱：905854985@qq.com<br>微信：123456</address><!--ruby元素用于给出拼音，和rt元素以及rp元素搭配使用--><ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby><ruby>魅<rp>(</rp><rt>mèi</rt><rp>)</rp></ruby><ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby><ruby>魉<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby><br><!--bdo元素默认dir属性是ltr从左到右--><bdo dir="rtl"><ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby><ruby>魅<rp>(</rp><rt>mèi</rt><rp>)</rp></ruby><ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby><ruby>魉<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby></bdo>
</body>
</html>
格式化元素
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>格式化元素演示</title><style type="text/css">.bold {font-weight: bolder;}.italic {font-style: italic;}</style>
</head>
<body><!--使用strong元素表示重要的内容--><!--使用b元素表示粗体，没有附带表示任何表示重要的语义--><p>总政版<b>《毛主席语录》</b>出版后，地方出版部门纷纷要求加印。人民出版社报经领导部门批准，从1964年9月开始向地方供应总政版语录的纸型，人民出版社也先后出版多种版本，均在内部发行。<strong>文化部规定，不在报上发消息，不登广告，不公开陈列，不卖给外国人。</strong></p><!--em元素表示强调，斜体--><!--i元素表示斜体，没有强调的语义--><p>我们都是<em>小怪兽</em>，有一天会被正义的奥特曼打死。</p><p>let us across <i>hell</i> and reach to heaven!</p><!--使用css代替b和i元素--><p class="bold">这里的内容加粗</p><p class="italic">这里的内容是倾斜的</p><!--del元素是删除线和ins元素是下划线--><p>我的网名由<del>木土子</del>变成了<ins>Tumuzi</ins>，因为那个人</p><!--s元素表示删除线，表示错误--><p>Something for <s>nothing</s></p><!--u元素拼写错误的单词或者汉语中的专有名词--><p>七宗罪，不是<u>玩具</u>，是“凡王之血，必以剑终”</p><!--mark元素，标记作用--><p><mark>可乐</mark>，<mark>雪碧</mark>，<mark>柠檬茶</mark>，请问客官喝点啥</p><!--sup元素和sub元素，上标和下标--><p>E=mc<sup>2</sup></p><p>Mg+ZnSO<sub>4</sub>=MgSO<sub>4</sub>+Zn</p><!--small元素，文本变小--><p>这次<strong>六级过了</strong><small>把瘾</small></p>
</body>
</html>
排序
ol
| 属性 | 值 | 描述 |
|---|---|---|
| reversed | reversed | 规定列表顺序为降序 |
| start | number | 规定有序列表的起始值 |
| type | 1、A、a、I、i(其中I和i代表罗马数字) | 规定在列表中使用的标记类型 |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>列表演示</title><style>/*通过list-style-type 设置列表的标志*/ul.b {list-style-type: disc;}ul.c {list-style-type: circle;}ul.d {list-style-type: none;}ul.e {list-style-image: url("../image/ori.png");}</style>
</head>
<body><!--ul元素创建无序列表--><ul><li>Coffee</li><li>Tea</li><li>Me</li></ul><!--ol元素创建有序列表--><ol type="i" reversed><li>HTML5 & CSS3</li><li>JavaScript</li><li>JQuery</li><li>BootStrapt</li><li>Vue</li><li>PHP</li></ol><!--四种不同的标号--><ul class="b"><li>Coffee</li><li>Tea</li><li>Me</li></ul><ul class="c"><li>Coffee</li><li>Tea</li><li>Me</li></ul><ul class="d"><li>Coffee</li><li>Tea</li><li>Me</li></ul><ul class="e"><li>Coffee</li><li>Tea</li><li>Me</li></ul><!--列表嵌套--><p>ow联赛战队(不完全统计)</p><ol><li>HangZhouSpark</li><ul><li>Guxue</li><li>Lige</li><li>Shy</li><li>IDK</li></ul><li>ChengDuHunters</li><ul><li>Ga9a</li><li>Elsa</li><li>Leave</li><li>Jinmu</li><li>Mommk</li></ul><li>ShangHaiDragon</li><ul><li>Fate</li><li>Void</li><li>Fleta</li><li>Lip</li><li>Leegangon</li><li>Izzakiay</li></ul></ol><!--定义列表--><dl><dt>Lip</dt><dt>Fleta</dt><dd>上海龙的两名队员</dd><dd>上海龙的主C</dd></dl>
</body>
</html>
案例：二级菜单
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>二级菜单</title><style type="text/css">/*使菜单居中*/body {text-align: center;}/*菜单css代码*/.menuDiv {border-right: 1px solid #fff;overflow: hidden;display: inline-block;}.aSpecial {color: orange !important;}/*去掉a标签的下划线*/.menuDiv a {text-decoration: none;}/*设置ul和li的样式*/.menuDiv ul , .menuDiv li {list-style: none;margin: 0;padding: 0;float: left;}/*设置二级菜单绝对定位，并隐藏*/.menuDiv > ul > li > ul {position: absolute;display: none;}/*设置二级菜单的li样式*/.menuDiv > ul > li > ul > li {float: none;}/*鼠标放到一级菜单上，显示二级菜单*/.menuDiv > ul > li:hover ul {display: block;}/*一级菜单*/.menuDiv > ul > li > a {width: 120px;line-height: 40px;color: #fff;background-color: #429296;text-align: center;border-left: 1px solid #bbf;display: block;}/*在一级菜单中，第一个不设置左边框*/.menuDiv > ul > li:first-child > a {border-left: none;}/*在一级菜单中，鼠标放上去的样式*/.menuDiv > ul > li > a:hover {color: #fff;background-color: #174c4b;text-decoration: underline;}.menuDiv .aSpecial:hover {color: orange;background-color: #174c4b;text-decoration: underline;}/*二级菜单*/.menuDiv > ul > li > ul > li > a {width: auto;font-size: 16px;padding-left: 10px;padding-right: 10px;line-height: 36px;color: #456;background-color: #fff;text-align: left;border: 1px solid #ccc;border-top: none;display: block;}/*在二级菜单中，第一个设置顶边框*/.menuDiv > ul > li > ul > li:first-child > a {border-top: 1px solid #ccc;}/*在二级菜单中，鼠标放上去的样式*/.menuDiv > ul > li > ul > li > a:hover {color: #174c4b;background-color: #e6f3f4;}</style>
</head>
<body><div class="menuDiv"><ul><li><a href="#">大会员</a></li><li><a href="">消息</a><ul><li><a href="#" style="color:red;">收到的赞</a></li><li><a href="#">收到的回复</li></ul></li><li><a href="">动态</a></li><li><a href="">收藏</a></li><li><a href="">历史</a></li><li><a href="" class="aSpecial">创作中心</a></li></ul></div>
</body>
</html>
web开发 简单的html2相关推荐
- Web开发-简单BBS论坛
Web开发-简单BBS论坛 开发了两周的bbs论坛系统,总算在上周完成了,并且已经把项目文件上传到github上了.[我的bbs]... 开发完之后,感觉对sql语句.mysql函数和PHP代码有了深 ...
- html5移动web开发简答题,HTML5移动Web开发简单知识点介绍
原标题:HTML5移动Web开发简单知识点介绍 1 :基于HTML5的移动Web应用 Canvas绘图:通过获取HTML中的Dom元素Canvas,调用其渲染上下文的Context对象,使用Js进行图 ...
- web开发 简单的html
文章目录 meta style css base script 注释 第一个html <!DOCTYPE html> <html><head><title&g ...
- web开发 简单的css1 样式和选择器
文章目录 样式 内联样式 内部样式表 外部样式表 选择器 伪元素选择器 伪类选择器 UI伪类选择器 结构伪类选择器 其他伪类选择器 总结 属性选择器 样式 内联样式 <!DOCTYPE html ...
- 移动web开发rem+js适配布局开发
浏览器现状 pc端浏览器 360浏览器,谷歌浏览器,qq浏览器百度浏览器,搜狗浏览器.IE浏览器 移动端常见浏览器 uc浏览器 qq浏览器 欧朋浏览器 百度手机浏览器,360安全浏览器... 国内 ...
- Spring Boot之Web开发
Web开发 简单了解 快速上手 JSON 的支持 RESTful 的支持 支持热部署 快速上手 拦截器与过滤器 自定义过滤器 示例 自定义拦截器 示例 打包部署 多环境配置 服务器配置 项目打包 简单 ...
- 利用Stripes实现Java Web开发
Stripes是一个以让程序员的web开发简单而高效为准则来设计的基于动作的开源Java web框架.本文将介绍Stripes与其它如Struts之类基于动作的框架的区别和其提供的一些存在于Ruby ...
- 主流WEB开发语言简单对比（转）
主流WEB开发语言简单对比 原文链接:http://www.uml.org.cn/site/201401091.asp 随着时间的飞逝,随着岁月的流失.从世界上第一台计算机ENIAC诞生至今,已 ...
- SpringMVC+Spring4+Mybatis3集成，开发简单Web项目+源码下载
转载自 SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载 基本准备工作 1.安装JDK1.6以上版本,安装与配置 2.下载mybatis-3.2.0版:htt ...
最新文章
- Vue 路由知识三(过渡动画及路由钩子函数)
- python之初体验(一)
- 杭州计算机学校哪家好,杭州2021年哪所计算机学校比较好
- LeetCode 题 - 69. x 的平方根 python解法
- Apache Sqoop性能调整
- 那些年，我们一起踩过的 “Android 坑”
- CSS： 对background: url(“~assets/img/common/collect.svg“) 0 0/14px 14px 的理解
- JavaSE基础笔记——字符串常用类/ArrayList（集合）
- 细思极恐的星座分析（下）- 外太空？内子宫？人类的天赋从何而来？
- JAVA从入门到精通（2）
- 【3D建模制作技巧分享】Zbrush中凹凸贴图、法线贴图和置换贴图的区别
- 正则表达式与re模块
- 永久免费 内网穿透工具 傻瓜式配置
- 《沟通的方法》笔记十：激励
- 穿越鸿蒙电视剧,2020“必追”的5部穿越剧，每一部都有高颜值，剧荒的别错过！...
- bat 输入密码_不记得密码了？教你查看设备保存的账号密码，绝对干货
- Fastjson解析错误---NumberFormatException: For input string: Nov 11, 2015 12:22:12 PM
- 安装Google Chrome OS 操作系统
- 共享链基于区块链技术的共赢社区
- office受保护视图_使用受保护的视图激发恶意Office文档