网页设计 1.HTML
一、HTML介绍
1.1 HTML概述
HTML全称：Hyper Text Markup Language(超文本标记语言)
HTML是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。
浏览器来解析HTML标记的内容（文字的处理，画面排版安排，图片如何显示、音频、视频等等）
HTML是用来创建网页的标记语言
1.2 HTML特点
1、简易性：超文本标记语言的版本升级采用的超集方式。更加方便灵活
2、可扩展性：超文本标记语言采取的子类元素的方式，为系统扩展带来保证
3、平台无关性：
4、通用性：HTML是网络的通用语言，一种简单、通用的标记语言。
1.3 HTML的发展
超文本标记语言(第一版)------1993年6月作为互联网工程小组(IETF)工作草案发布(并非标准)
HTML2.0 --1995年11月
HTML3.2 --1997年1月14日，W3C标准
HTML4.0 --1997年12月18日 W3C标准
HTML4.01 --1999年12月24日 W3C的推荐标准
HTML5 —2014年10月29日，W3C推荐标准
1.4 HTML基本结构
<!-- 文档声明：告诉浏览器使用HTML5版本解析 -->
<!DOCTYPE html>
<html><!--网页的头部 --><head><!--页面的字符集编码 --><meta charset="utf-8" /><!-- 页面的标题 --><title>我的页面</title></head><!-- 网页的主题，显示的部分--><body>展示的内容</body>
</html>
1、HTML页面包含头部head和主体body
2、HTML标签通常是成对出现的，有开始标签，有结束标签，称为对标签。没有结束标签的为 空标签
3、HTML标签都长都有属性，格式：属性名 = “属性值” 属性名 = “属性值”。多个属性用空格间隔
4、HTML标签不区分大小写，建议小写
5、HTML文件后缀名为html或htm
二、HTML基本标签
2.1 结构标签
<html></html>:根标签
<head> ：头标签<title></title>页面的标题
</head>
<body>：主体标签：显示网页内容</body>
属性：
color:文本的颜色
bgColor:背景色
background：背景图片
颜色的表示方式：
第一种：颜色名称 red blue green yellow orange
第二种方式：RGB模式 #000000 #ffffff #325687
2.2 排版标签
1、注释标签：<!-- 注释 -->2、换行标签：<br/>3、段落标签：<p>文本文字</p>特点：段落与段落之间有行高（行间距）自带换行
属性：文本对齐方式 align （left、center 、right）4、水平线标签：<hr/>属性： width：水平线的长度(两种：像素表示。第二种：百分比显示) size：水平线的粗细（避免过粗、太丑、一般给个位数 比如 6px）
color：水平线的颜色 align：水平线的对齐方式(left、center、right)
2.3 标题标签
<h1>-<h6>
数字越小，标题文字越大！默认加粗、默认字号、默认占据一行
2.4 容器标签
<div></div> ： 块级标签，独占一行，自带换行
<span></span> ： 行级标签，所有内容都在同一行作用：<div>主要是结合css做页面分块 布局<span>：进行友好提示信息的显示
2.5 列表标签
2.5.1 无序列表
ul(unorder list)
<!--ul是无序列表，默认标识为实心圆 disccircle 空心圆square 黑色方块--><ul type="square"><li>兰博基尼</li><li>法拉利</li><li>宾利</li><li>迈凯伦</li></ul>
2.5.2 有序列表
ol(order list)
<!--ol是有序列表，默认标识为阿拉伯数字 1a A 字母字典顺序i I 罗马数字--><ol type="I"><li>铁胆火车侠</li><li>光明勇士</li><li>米老鼠和唐老鸭</li><li>小头儿子和隔壁老王</li></ol>
2.5.3 定义列表
dl(defination list)定义列表
dt(defination title)定义标题
dd(defination description) 定义描述
<dl><dt>秦牛正威</dt><dd>就当是一场梦，醒来还是很感动</dd><dt>???</dt><dd>蛋黄的长裙，蓬松的头发。</dd></dl>
2.5.4 列表嵌套
<ul><li>最新娱乐新闻</li><li><dl><dt>青春有你2</dt><dd>非常庞大的导师阵容，Ella，Jony J，蔡徐坤，Lisa</dd></dl></li><li>猎心者<ol><li>戴猛。。。</li><li>廖朵朵。。。</li><li>花笙。。。</li></ol></li></ul>
2.6 图片标签
<img /> 独立标签
属性：src 图片地址width 图片的宽度height 图片的高度border 边框alt 图片的文字说明 当图片未能正确加载时，才显示title 鼠标悬停时，显示的文字
<img src="img/微信图片_20200306173413.jpg"width="500px"height="900px"/><img src="img/timg.jpg"width="500px"height="500px"border="5"alt="给你点赞的小脑斧"title="给你点赞的大脑斧"/>
2.7 链接标签
超链接可以是文本，也可以是图片，可以点击链接标签，进入新的文档，或者是当前文档中的某个部分
<a>文本或图片</a>、
属性：href="跳转的地址"跳转外网需要添加协议target:_self(当前文档)_blank(新页面,会一直打开新的)_search 之前打开的页面存在，则不打开新的页面，直接复用name 充当锚点（顶部、底部）需要为标签提供name属性，进行赋值需要点击跳转的标签href属性给 #name
2.8 表格标签
表格由
标签来定义，每个表格均有若干行(由tr标签定义行)，每行由若干个单元格组成(由td标签来定义)。每一个数据单元可以包含文本、图片、列表。。。。。。
2.8.1 普通表格
table tr td
<!--创建表格 table 行 tr 列 tdtable属性：默认没有边框体现border:边框的宽度bordercolor:边框的颜色cellspacing:单元格的间距cellpadding:单元格与内容的间距width:宽度height:高度align:控制表格的对齐方式 left center righttd的属性：align:控制的单元格内容的对齐方式 left center rightvalign:控制单元格内容的垂直对齐方式 top middle bottom--><table border="1" bordercolor="red" cellspacing="10" cellpadding="10"width="300px" height="300px" align="center"><tr><td align="center">学号</td><td align="center">姓名</td><td align="center">性别</td></tr><tr><td valign="bottom">S1001</td><td valign="middle">张阔</td><td valign="top">男</td></tr></table>
2.8.2 表格的表头
th
<!-- th作为表头，默认居中，加粗 -->
<table border="1"><tr><th>学号</th><th>姓名</th><th>分数</th></tr><tr><td>S1002</td><td>刘欣</td><td>100</td></tr></table>
2.8.3 表格的列合并
colspan
<table border="1" bordercolor="red"><tr><td align="center" colspan="4">学生信息表</td></tr><tr><td>学号</td><td>姓名</td><td colspan="2">各科成绩</td></tr><tr><td>1</td><td>哆啦A梦</td><td>80</td><td>90</td></tr></table>
2.8.4 表格的行合并
rowspan
<table border="1" bordercolor="blue"><tr><td colspan="4" align="center">学生表</td></tr><tr><td>学号</td><td>姓名</td><td>语文成绩</td><td>数学成绩</td></tr><tr><td rowspan="2">1</td><td rowspan="2">光头强</td><td>80</td><td>90</td></tr><tr><td>100</td><td>99</td></tr></table>
2.9 文本格式化标签
<!--粗体文本--><b>今天天气好</b><br /><!--大号字--><big>今天天气好</big><br /><!--着重文字--><em>今天天气好</em><br /><!--斜体字 物理上把字体倾斜--><i>今天天气好</i><br /><!--小号字--><small>今天天气好</small><br /><!--定义加重语气--><strong>今天天气好</strong><br /><!--下标字-->CO<sub>2</sub><br /><!--上标字-->孙悟空三打张阔<sup>①</sup><br /><!--插入字--><ins>今天天气好</ins><br /><!--删除字--><del>今天天气好</del>
三、基本标签的综合案例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>综合案例</title></head><body><!--头部--><div><table width="100%" align="center"><tr><td align="left">JAVA编程</td><td align="right"><a>面向对象 </a><a>JavaEE分布式 </a><a>JavaSE框架 </a></td></tr><tr><td><img src="img/new_logo.png" /></td><td align="right"><img src="img/nav_r_ico.png" /></td></tr><tr><td colspan="2" align="center"><hr/><span>首页 </span><span>java学习 </span><span>HTML学习 </span><span>css学习 </span><span>javascript学习 </span><span>Strapboot学习 </span><span>ajax学习 </span><span> </span><span> </span><span>其他</span><hr /></td></tr><tr><td colspan="2" align="right">首页>课程>JavaEE列表</td></tr></table></div><!--中间部分--><div><table><tr><td><h3>课程</h3><h4>共108种课程内容</h4></td></tr><tr><td><hr /><img src="img/001.png" /></td></tr></table><table align="center" width="100%"><tr align="center"><td><img src="img/002.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td><td><img src="img/003.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td><td><img src="img/004.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td><td><img src="img/005.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td><td><img src="img/006.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td></tr><tr align="center"><td><img src="img/007.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td><td><img src="img/008.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td><td><img src="img/009.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td><td><img src="img/010.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td><td><img src="img/011.png" /><br /><div align="center">书名：XXX</div><div align="center">售价：180</div></td></tr></table></div><!--底部--><div><table width="90%" align="center"><tr><td><img src="img/012.png" /></td></tr></table> </div></body>
</html>网页设计 1.HTML相关推荐
- 计算机网页设计布局与排版研究,论计算机网页设计的布局与排版
王禹智 摘 要:网页设计是一种直观的视觉语言,需要对其进行布局与排版.虽然网页设计与平而设计之间存在一定的区别,但是其两者依然存在一定的相似之处,网页设计应该充分借鉴利用平而设计的原则与方法.网页设计 ...
- 网页设计和用户界面设计
摘要:这是两个现在网页设计领域使用频率非常高的词.在大多数情况下,它们被相互替代.这个领域内外的很多人都认为这是两个意义基本一样的词.但是它们真的可以互相混淆么? 这是两个现在网页设计领域使用频率非常 ...
- 缩略图在网页设计中应用的35个优秀案例
这篇文章向大家推荐35个缩略图在网页设计中应用的优秀案例,希望下面这些网页设计实例能够帮助大家制作出更加优秀的网页作品. Shropshire Screen Arnaud Beelen Two Fis ...
- 寻找网页设计灵感的200佳网站推荐（系列二）
这个系列将向大家分享寻找网页设计灵感的200佳网站.网页设计师们可通过这些网站收集的优秀网页设计作品来获取灵感,进而设计出更加时尚.更有创意的作品,网页设计师也可以把自己得意的作品提交到这些网站,分享 ...
- html css发展前景,网页设计的发展趋势
原标题:网页设计的发展趋势 1.传感器访问赋予页面对用户环境的感知能力 很多年以来,web 页面掌握的用户情况十分有限,通常只有用户的屏幕尺寸以及浏览器类型等.但现在各种 W3C 标准把环境光.麦克风 ...
- 我的家乡网页设计_Graphic Design|康石石浅谈LOGO设计在作品集中的创作方法
写在前面的话 平面设计范畴极广,其领域不仅限于常见的版式设计.海报设计.LOGO设计.VI设计.书籍装帧.广告设计.网页设计.在艺术留学申请过程中,学习平面设计的同学们需依据目标院校对作品集项目及页数 ...
- 驳“中国的网页设计为什么这么烂？”
原文链接如下: http://developer.51cto.com/art/201101/244158.htm 偶然在51cto上看到一篇译文,是一个外国朋友写的,对中国大陆地区的网站有了一些概括的 ...
- 结束php语句的正确方法是,2011-2012-1-《PHP网页设计》试卷b
中国成教大学 2011-2012学年第一学期 期末试卷(B卷) 课程名称<PHP网页设计>考生姓名_____________ 学号________ 考生须知:本课程为闭卷机试,考试时间为1 ...
- 利用人工智能进行网页设计的10种方法
作者:Harris 如今,网页设计不断发展,最好的网页设计师总是期待着他们工作中的下一件大事.人工智能(AI)正在成为中心舞台,并有可能彻底改变网页设计师的工作方式.通过人工智能,网站可以变得非常敏感 ...
- [网页设计]点睛价值
整理了一下电脑,发现之前我做的网页设计作品,虽然一般般,但我感觉都是自己一码一码的敲的,还是挺有feel的!仿佛就在昨天,那时候的回忆,自己一个人在图书馆,静心的做这个网页设计.时间过的很快,转眼间都 ...
最新文章
- Python 技术篇-通过管道命令获取cmd执行的结果，获取os.system()、subprocess.Popen()执行命令返回的结果
- keil5图标变成白色_keil5菜单栏图标错乱怎么办? keil5菜单栏快捷图标错位的解决办法...
- 最新建账年（over partition by）的研究
- Plsql运行mysql脚本_oracle中PLSQL语句
- mysql error -1_【Mysql】SQLException: Got error -1 from storage engine 问题解决！
- 字节跳动的一面内容记录
- NLP最新趋势，7个主流业务场景！
- 关于MySQL latch争用深入分析与判断
- 音创服务器系统手动加歌,音创ktv点歌系统的教程
- Virtualbox安装Windows7虚拟机
- 三极管和MOS管的区别
- linux top命令 什么意思,Linux下的top命令、%cpu和cps（s）到底是什么意思呢！
- 致敬科比，我们应该这样做......
- 在自建虚拟环境中出现的问题
- 图解卡尔曼滤波(Kalman Filter)
- 手机重力感应控制电脑（一）
- 第三节 树莓派EC20之PPP拨号上网
- 数学实力影响国家实力，世界强国必然是数学强国
- 比尔-盖茨预言：未来家家都有机器人
- 技术人如何打造个人品牌，提高身价？