前端前端知识Web前端之路

html基础第一天

2017-06-05  本文已影响98人  诗远同学

【网站定义】

什么是网站?

网站就是由多个网页联系在一起构建出来的一个整体;

什么网页?

网页就是由文字,图片和超链接组成的html文档。

制作网页的技术是什么技术?制作网页的技术是web前端标准

【web前端标准】

web前端标准又称之为web前端技术,它是由W3C组织发布以及维护的一套技术规范。

web前端标准的官方定义

它不是一项技术,而是一系列技术,包括如下三项:

1、结构标准--- html;

2、样式标准--- css;

3、行为标准--- javascript;

解释:行为可以理解为功能(动画);样式可以理解为装饰,美观;

【网页基本结构】

《认识html》

什么是html?

html超文本标记语言,(Hyper Text Markup Language),它是写给浏览器看的一项语言,注意:不是编程语言。

html的作用?

html是负责网页的结构搭建,布局排版,对网页中信息进行控制;

《html标签语法》

html标签语言又称之为html标记语言,书写html标签需要遵循相关的语法:

1、html标签成对出现,并且区分首尾,尾标签加上关闭符号:/斜杠;

2、html语言必须写在标签符号里面:<大小于号,俗称为“尖括号”>;

《网页的基本结构》

网页的基本结构由4对标签组成:

html ---表示网页的整体;

head ---表示网页的头部;这里面的内容都是给浏览器去看的;

body ---表示网页的主体,这里面的内容都是给用户去看的;

title ---表示网页的标题,需要写在head里面;

《标签关系》

在html中,所有的标签之间只有两种关系: 一种是并列关系,一种嵌套关系;

【开发工具】

常见的开发工具有:webstorm,sublime,HB  DW.等等,每个工具都有自己的不同特色,我们可以根据自己的喜好选择开发工具。

Webstorm功能比较强大,插件特别的丰富。

Sublime小巧轻便,安装快捷,能够满足日常开发的需要。

DW偏向设计的一款开发工具,可以代码和设计相结合。

【html标签】

h1 ---标题标签; 一共有6级,h1—h6

p ---段落标签; 浏览器会将它内部的信息编译成一个段落;

《语义标签》

语义标签让不同的内容赋予了不同的语义;

《文字控制标签》

在文字控制中,修改需求最大的是:颜色,字号,字体,这三个需求都是通过一个标签进行控制:font标签; 修改哪部分内容就用font标签选中,然后设置它的标签属性;

标签属性的基本结构:

k=”v”例如:color=”red”

注意事项:标签属性采用键值对的基本结构;多个属性之间用空格隔开;

键值对翻译过来就是:什么是什么的意思。

font标签的文字控制三属性:

color ---颜色;(它的值可以是英文名称,也可以是拾色器获取的颜色值)

size ---字号大小;1-7级,最大是7;

face ---字体设置;

《水平分割线标签》

hr表示水平分割线,它是一个单标签;


标签属性:

size ---粗细大小; 没有限制;

color ---颜色

width ---宽度;

align ---水平对齐方式,它的值有三个:left center right左中右 ;

注意事项:在html中,谁的属性给谁写,不能随便加! 标题和段落是接受align属性的;

《body的属性》

bgcolor ---设置背景颜色;

background ---设置背景图片;

注意事项:在web前端标准中,背景颜色永远是在背景图的下面;

《bui标签和空格换行》

b ---给文字加粗标签

u ---下划线;

i ---斜体;


表示换行标签; 快捷键:shift+enter(回车键)

表示空格的特殊字符:快捷键:ctrl+shift+space(空格键)

【图片控制标签】

图片的控制是通过img标签;

标签属性:

src ---指定图片的文件路径; (必备)

width ---图片宽度;

height ---图片高度;

border ---边框;

title ---设置鼠标移上图片显示的提示文本(图片的标题);

alt --设置图片不能正常显示的替换文本;

设置图片等比例缩放的方式:宽度或高度只修改其中一个,另外一个让计算机自动计算;

【列表标签】

《无序列表》

无序列表基本结构: ul>li

ul表示无序列表的整体;li表示列表项;ul的内部可以有无数个li;

修改列表的样式是通过type属性:

disc ---小圆点(默认)

circle ---小圆圈;

square ---小矩形;

《有序列表》

有序列表的基本结构:

ol>li

ol表示列表整体,li表示列表项;

列表样式值: 1,a,A,i,I

上一篇下一篇

猜你喜欢

热点阅读