网页设计入门学习

简介: 我从B站黑马程序员pick老师学习了部分前端知识,在这里对已学知识进行归纳总结。本篇主要介绍HTML的相关内容。


Web标准

Web标准是网页设计必须要满足的条件,它包含三个方面:结构,表现和行为,其中结构是用于对网页元素进行整理和分类,在学习过程中,我学的是HTML,即超文本标记语言;表现是设置网页元素的版式,颜色,大小等外部样式,主要学习的是CSS;行为是指网页模式的定义即交互的编写,现阶段学习的是JavaScript。三大要素中唯有行为较难理解,同时也是较为重要的内容,行为简单理解就是网页的功能,比如说某些网页可用于购物,某些网页可以玩游戏等。这个标准提出过最佳体验方案:结构,样式(表现),行为相分离,简单的理解就是体现三个方面的代码存储到三个文件中,如:结构写到HTML文件中,样式写到CSS文件中,行为写到JavaScript文件中。

HTML

概述

HTML是超文本标记语言,超文本指的是一种组织信息的方式,通常来说信息的形式有文字,图片和音频等,超文本这种方式可以通过超级链接将文字,图片和音频联系在一起,比如说,当我们登录了某个网页,点击某个文字或者词组,紧接着又进入了一个新的页面,或者又在原页面播放了音频等,这就体现了信息间的联系。标记语言理解较为复杂,它指的是一种将文本以及文本相关的其他信息结合起来,展现出文档结构和数据处理细节的电脑文字编码,我是直接对整个名词进行理解,HTML就是一种可以联系文字,音频,图片等信息的语言。

内容

HTML的内容很多,需要牢记。作为一种标记语言,它包含了很多标签,可分为行标签和块标签,行标签包括span标签,a标签,br标签,em标签,img标签等,他们的特点是按行排列,即当浏览器宽度足够大时,这些标签的内容会排成一行;块标签包含div标签,h标签,p标签,ol-li标签,ul-li标签等,他们会独占一行,默认宽度占满一行。

语法

常用的标签如下:

<h></h>,标题标签,有6类,对应1~6级标题,数字越小,字体越大

                              28196475-d7df4152753b02ef.png

28196475-47c8f950f792e295.png


<p></p>,段标签,其内容为段落,当我们将文章中的段落部分复制到该标签中后,通过浏览器打开该文件时,文本在浏览器中会议段落的形式展示出来


28196475-6d0923feea3613f9.png

28196475-2760bf46b3d0ae95.png

<img/>,图标签,内容为图片链接,这里有个小建议,当我们需要使用图片时可以在HTML文件的同目录下创建一个装图片的文件夹,这样在书写链接时比较方便。


28196475-013004d656c9518c.png

28196475-afb8cc7277371053.png

<a></a>,链接标签,内容也为链接,不过这里的链接种类较为丰富,可以是图片链接,音频链接,甚至是另外一个网页的链接


28196475-7a8c4dc5e7d9274b.png

28196475-f06016cdbc92aa55.png

<span></span>,这个标签没具体语义,但用途较为广泛,通常时用于装载一行内容

28196475-52c203a0e89635f8 (1).png


28196475-a0588ff9bb5642d0.png

<div></div>,盒子标签,内容独占一行


28196475-6fe400ee09b426b9.png

28196475-b0e9bc5207d4a623.png

<table></table>,表格标签,含有<tr></tr>子标签,其含义为表格中的行,同时它也含有子标签,<td></td>行中的列标签,如果想引起注意,第一行还可以用<thead></thead>标签强调第一行


28196475-f29db93cc4b8db0b.png

28196475-c8bac962b8367d4f.png

<form></form>,表单标签,这一类标签我们比较熟悉了,常用于注册表,表单标签包括<input/>输入标签,根据标签元素type的不同取值可以得到不同的功能的输入,例如单纯的输入,单选或者复选等;<label/>用于绑定内容,<select>标签也可用于选择,<textarea>标签也用于文本输入


28196475-11fbafa284ed3817.png

28196475-869d255022785791.png

<ol></ol>和<ul></ul>,列表元素,前者为有序列表,后者为无序列表,同时二者皆含有子标签<li>


28196475-70dba5b9d9ae7250.png

28196475-4993986de9ec7d31.png

28196475-3c226b3400780100.png

28196475-539405414fafb803.png

常见的标签用法已经介绍完毕了,还有些细节需要注意:

1.注意标签的格式,不要漏写或者多写;

2.含有子标签的标签有些可以混用如,表格中有时也可以添加一些列表进去;

3.标签内可以添加元素,用于改变标签纸的展示形式,后面学CSS时可以更深度地研究

总结

HTML较为简单,但不容小觑,熟悉好每个标签的使用方式能让我们的网站设计变得更加轻松省力!


相关文章
|
7月前
|
前端开发 JavaScript 开发者
网页设计与开发:一篇文章带你领略前端世界的魅力
网页设计与开发:一篇文章带你领略前端世界的魅力
249 1
|
前端开发 算法 JavaScript
前端网页设计(笔记内容十)
前端网页设计(笔记内容十)
106 0
前端网页设计(笔记内容十)
|
Web App开发 关系型数据库 Linux
好程序员web前端教程分享网页设计需要学那些东西?
**好程序员**web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老师就来跟大家讲解下这两个方向分别要学什么。
2687 0
|
移动开发 HTML5 前端开发
2013年值得我们学习的网页设计作品【系列二】
  2013年,网页设计领域出现了几个新的流行趋势,最热门的要数响应式设计(Responsive Design)和扁平化设计(Flat Design)了,另外大图片背景、视频背景设计也被越来越多的设计师采用。
821 0
|
前端开发
经典网页设计:30个新鲜出炉的扁平化网站设计《下篇》
  扁平化设计,因其简单性和关注用户,去除了很多网站的不必要的元素,例如沉重的背景图片,渐变,斜面和其他一切使空间杂乱的东西,所有的注意力都集中在良好的排版,高品质的图像,清晰的文本,完全兼容所有主流浏览器和屏幕尺寸。
870 0
|
前端开发
经典网页设计:30个新鲜出炉的扁平化网站设计《上篇》
  最近,你会发现大家都在讨论扁平化网页设计。每个人都想要它,因为它很酷,因为它是目前的趋势。扁平化设计,因其简单性和关注用户,去除了很多网站的不必要的元素,例如沉重的背景图片,渐变,斜面和其他一切使空间杂乱的东西。
903 0
|
移动开发 JavaScript 前端开发
经典网页设计:精美的个人作品集网站设计欣赏【下篇】
  作为一个网页设计师,需要经常去关注优秀的网站作品,获取创作灵感,掌握最新的设计趋势。在这个竞争激烈的就业市场,个人作品集网站是最好的求职工具。因此,设计师们都竭尽所能设计一个有创造性的个人作品展示网站,期望给访客留下深刻的印象。
813 0
|
移动开发 JavaScript 前端开发
经典网页设计:漂亮的个人作品集网站设计欣赏【中篇】
  作为一个网页设计师,需要经常去关注优秀的网站作品,获取创作灵感,掌握最新的设计趋势。在这个竞争激烈的就业市场,个人作品集网站是最好的求职工具。因此,设计师们都竭尽所能设计一个有创造性的个人作品展示网站,期望给访客留下深刻的印象。
843 0
|
移动开发 JavaScript 前端开发
经典网页设计:顶尖的个人作品集网站设计欣赏【上篇】
  作为一个网页设计师,需要经常去关注优秀的网站作品,获取创作灵感,掌握最新的设计趋势。在这个竞争激烈的就业市场,个人作品集网站是最好的求职工具。因此,设计师们都竭尽所能设计一个有创造性的个人作品展示网站,期望给访客留下深刻的印象。
1052 0