【HTML】web网页设计
本人依据上课的内容，将简单的web网页设计要点浓缩在一篇代码中。
2021/12/8首发于csdn，有错误和不足请指出。
<!--首页文件名一般是index.html或default.html，-->
<!--文件名区分大小写，只能由数字字母下划线组成-->
<!--文件扩展名有htm,html，建议用html-->
<!DOCTYPE html><!--用于申明使用何种语法（html,xhtml）-->
<html>
<head><!--以下内容除title外都不会显示在页面--><!--meta元素可以提供有关页面的元信息（属性值等等），可用于关键词搜索，设定页面格式--><!--有两种属性可以描述：(这两种属性最好不要写在一起)http-equiv描述标题信息，将content关联到HTTP头部，添加一个键值对：content-type:text/htmlname描述页面信息，将content关联到一个名称，各自都又有content来进行详细描述，两种属性的取值都是有固定内容的。--><!--charset是字符集，utf-8是它的一种字符集编码方式--><meta http-equiv="content-type" content="text/html"><meta name="Keywords" content="教育，就业，计算机"charset="utf-8"><title>web设计学习</title><!--以下是CSS样式介绍，CSS样式最好单独保存在另一个文件里面，也可以在head定义后于body内使用，或直接在body内使用--><!--构造样式表，这里加上type解释后，里面的注释标记不再是注释，而是CSS样式定义--><!--各样式集内，样式属性之间用分号隔开，用冒号表示取值--><!--#divdemo是一个id号，用#id命名，后面是画区域的样式设置--><!--形如css,p1的是生成样式标签，.p1则是html标记内部都可以引用的类class，h1.p2则是h1专属的class--><style type="text/css"><!--#divdemo{background-color:#90EE90;border:0.2cm groove orange;}css{color:red;}p1{color:red;font-size:20px;}.p1{color:red;}h1.p2{font-size:20;}--></style><!--除此之外，还有base,link,script也是合法的-->
</head>
<body>
<comment>想不到吧，我这个注释居然显示出来了，到底咋回事</comment>在body内随便写都是可以输出的，不需要其他标记也可以输出。无论如何，两个字之间的空白符(包括换行，刚刚有个空格就是换行)是只计入一次的，可以用" " 来显示多个空白，不要漏了";"。<!--以下是关于文字显示的介绍-->
<h2 align="center">标题字，有固定的字号表示，从h1~h6，字体大小递减，align可选位置center|left|right</h2><font face="黑体" size="5" color="blue">用font限制的内容可以设定字体</font>
<B>嵌套代码块，<i><u>字体标记大小写都行，</u>b是粗体，i是斜体，u是下划线，<del>del是删除线。</del></i></B>
<strong>这个也是粗体突出</strong><!--关于CSS样式-->
<div id="divdemo"><!--画一个区域，在head中设置，也可以直接在div标签内部设置style-->div使这里会自动与上下文换行。<h2 style="font-size:18px;color:green">h2本身的功能仍然保留，内容样式会强制被style指定的样式替换</h2><css>head中定义的css样式</css><p1>head中定义的p1样式</p1><p class="p1">p本身的功能保留，字体改变</p><h1 class="p2">只有h1用了class = p2才能换样式，其他标记用p2都没用</h1><p class="p2">这一段用的默认设置，p2没有应用成功</p>span里面的内容和这句话会连起来。<span class="p1">通常建议div包含span而不是span包含div。这一片都是span里面设置好的样式，如果span不设置class或id，等于无用。span标记内的内容不会与上下文换行，但div内的内容会</span>
</div><p>这是个段落标记，在段落标记内写的换行同样只会被识别为一个空格可以发现，在我没有用h2,p,br的地方，字都是没有换行的，在外面存在的换行只会表示为空格<font face="黑体" size="5">让我们悄悄的再来个<b>嵌套</b><u>设置字体，</u>font在部分浏览器是支持使用的，但最好以后用CSS样式</font><br><!--换行--><nobr><wbr>原本nobr是用来不显示换行，wbr是用来在nobr中显示换行，但后续已经不支持这种写法了，用CSS样式来加入空白符</wbr></nobr><center>这部分内容会居中显示，具体表现为：强制单独成行且居中</center><!--水平线属性值不用引号括起来也可以，但最好写上width控制宽度,size控制高度,color颜色,align对齐方式,noshade去除阴影--><hr width="100" size="5px" color="blue" align="center" noshade>
</p><!--接下来介绍列表-->
无序列表ul
<ul type="circle"><li>各个个项目是无序并列关系</li><li>type用来设置项目符号</li><li>disc实心圆，IE浏览器默认值;circle空心圆;square实心方块</li>
</ul>有序列表ol
<ol type="1"><li>各个项目是有序关系</li><li>type用来设置项目符号</li><li type="a">列表本身也是可以单独指定项目符号的，但它本身真正的ol项目符号依然存在，后续项目会继续遵守ol的设定</li><li>1阿拉伯数字，IE浏览器默认值;a;A;i小写罗马数字;I大写罗马数字</li>
</ol>定义列表dl
<dl><dt>定义列表使用缩进的方式来分层</dt><dd>无项目符号</dd><dt>dt标记创建列表标题，里面的内容会左对齐</dt><dd>dd标记创建列表元素</dd><dd>里面的内容会右缩进</dd>
</dl>这两个只做了解：<br>
目录列表dir
<dir></dir>
菜单列表menu
<menu></menu><!--以下内容是超链接-->
<a herf="https://www.baidu.com/" title="解释这个url的预览文字" target="_blank">这是去往百度的超链接,target用来确定打开页面的方式:_blank当前浏览器的新窗口打开；_self当前页面打开，默认为该设置；_parent新浏览器打开；_top关闭当前浏览器所有页面并打开url页面
</a>
<img src="./沉睡.jpg"><!--本地图片链接，要保存在同根目录下，也可以放在超链接内做跳转-->
<!--以下是关于超链接的书签介绍-->
<a name="top"><h1>这是设置的页首书签</h1></a>
<a name="T1">这是设置T1书签</a>
<a herf="https://www.baidu.com/ #T1">戳这里可以回到百度URL的T1书签处</a>
<a herf="#top">戳这回到页首书签处</a>
</a><!--以下是表格的设置-->
<table width="600" height="200" border="1"><!--设置了单个单元格的宽度、高度和整个表边界线的宽度--><caption>这是表格标题</caption><tr><!--表格表头设置,后面的tr有几列（几个td），这里就要写几个表头（几个th）--><th>列1</th><th>列2</th></tr><tr><!--表格第一行--><td>第一行第一列</td><td>第一行第二列</td></tr><tr><!--第二行--><td>第二行第一列</td><td>第二行第二列</td></tr>
</table></body>
</html>
有两个标签需要解释一下：
1.nobr和wbr已经不支持使用了，这里只做了解
2.font标签在部分浏览器中仍然支持使用，但在后续版本中可能会被全面淘汰
【HTML】web网页设计相关推荐
- web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- WEB网页设计前端(前台)开发的常用工具推荐
WEB网页设计前端(前台)开发的常用工具推荐 最近我在搞网页设计,包括网站建设的前台界面设计和JS代码的编写,弄一个JS的时候把我给郁闷了,在寻找JS如何通过子节点操作父节点的时候找到了以下免费的网站 ...
- web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- 文化网页设计成品 web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- div+css静态网页设计web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码
web网页设计实例作业 --中国风的茶文化(4页) web课程设计-HTML网页制作代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
- 2010年Web网页设计趋势
对于追求无限创意和具实验探索精神的Web设计师来讲,趋势一说可能会显得有点可笑,如果每个设计师都遵循原有的趋势,那谁还去开创新趋势?没有了新趋势,下一个轮回的时候,设计师们又去遵循什么趋势? 但不管你 ...
- HTML5期末大作业：旅游酒店网站设计——旅游酒店服务预订(1页) web网页设计—— 出游
HTML5期末大作业:旅游酒店网站设计--旅游酒店服务预订(1页) web网页设计-- 出游 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒 ...
最新文章
- nginx http 服务器搭建
- xampp配置xdebug
- 2019年平面设计趋势
- 2018-2019-2 20175204 张湲祯 实验五《网络编程与安全》实验报告
- 多线程测试工具groboutils的使用
- Web中的鼠标自动移动
- [JMX一步步来] 9、基于JBoss来写MBean
- 计算机组成原理电子时钟设计与实现,《计算机组成原理》课程设计报告-基于VHDL数字电子钟设计与实现.doc...
- mysql查询时间出来数字_mysql查询时间出来数字的解决方法
- 读取Excel任务列表并显示在Outlook日历上
- 日系P2P原理探究(二) — Winny, 日本崛起
- 任正非：华为没有996更没有007，“狼性文化”其实是三个精神
- 数据杂谈：CIO和CTO的区别（首席信息官首席技术官）
- iOS 四舍六入五成双算法
- 激光雷达和毫米波雷达工作原理对比
- MKS SERVO42C 闭环步进电机 使用说明（一）安装闭环PCBA
- Python批量处理图片对比度并且保存
- C语言中string函数库中的一些函数的用法
- 虚拟机通过jumpserver登录服务器,搭建 JumpServer 堡垒机管理数万台游戏服务器
- 2018年“世界品牌500强”新榜出炉，中国38个品牌入选(附总榜单)