web 学习+静态网页设计

HTML、CSS和JavaScript。html是内容,css是表现,javascript是行为。前端开发的门槛其实非常低,与服务器端语言先慢后

WEB前端分:高级,中级,初级。

初级前端掌握的课程:

HTMl5+ CSS3。

前端学习的基础技能需要掌握HTMl+ CSS的基础内容。

学习内容:基础标签div,span,p,ul,li,input等。

CSS:语法、派生选择器、id选择器、类选择器、属性选择器。

CSS基本样式:背景,字体、链接、列表、表格、轮廓。

CSS盒子,CSS选择器,CSS常用操作。

中级前端掌握的课程:

CSS3和动画效果。

HTML5。

新增标签、浏览器适配。

JS——基础。

实现、输出、语法与注释、变量和数据类型、javaScript函数、JavaScript异常处理和事件。

件处理、DOM对象、正则表达式等。

重点掌握:Jquery、angularJS、bootstrap。

高级前端掌握的课程:

移动端:nodejs,vuejs。

CSS:面向对象的CSS、CSS的后处理、Less、SASS。

JavaScript:模块化,数据推送、高级函数、面向切面、多线程、设计模式。


2018.11.30

    今天正式开始了web学习(前两天一直在调试编译器)。

    还是从基础的学起,先通过简书做一些笔记,笔记本没有带。

    HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

    CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

    JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

    1.<h1></h1>就是标题标签 通过向两者之间输入文字作为标题

    2.<p></p>是段落标签

    3.img标签来完成的,它在网页上的代码写成<img src="1.jpg">

    4.<html></html>称为根标签,所有的网页标签都在中。

    5. <head>标签用于定义文档的头部,它是所有头部元素的容器。(通常包含标题信息,元数据,脚本代码等)

    文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者

    下面这些标签可用在 head 部分:

 <head>

    <title>...</title>

    <meta>

    <link>

    <style>...</style>

    <script>...</script>

  </head>

<title>标签:在和标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

    6. 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来

    7.代码注释<!--注释文字 -->


    2018.12.3

昨天在二手书店买到了一本叫做《HTML5+CSS网页设计案例教程》的书。

于是开始了正规的学习

本书基本是用记事本进行网页开发 据说是有利于打下基础

首先建立站点根目录用于存放网页->接下来编写代码->保存记事本是应用.html格式 且将文件类型改为所有类型。

接下来讲的基本就是在慕课上讲到的HTML的基本语法了

HTML基本语法

1.HTML标记

eg:单标记与双标记

单标记:不需要前后对应,单独使用即可完整的表达意思。是用形式<标记/>,如<br/>表示换行,HTML5之前<br>是正确的。

双标记:必须成对出现,包含始标记和尾标记。标记可以成对嵌套但不能交叉嵌套。

2.HTML属性

与标记相关的特性称作属性,它是对标记的必要说明,HTML属性能够赋予元素含义和语境,一般要为属性赋值。

eg:<a href="http://www.baidu.com">百度一下</a>

<a>...</a>是超链接标记,“href”是属性,“http://www.baidu.com”是属性值

<标记名 属性1=“ ” 属性2=“”...>

(1).属性均放在相应标记的尖括号内属性之间用空格分开

(2).不建议属性值包含空白,但允许属性值包含空白


2018.12.4

HTML 头部<head>

a.<title>标题栏中出现的内容</title>

b.定义元数据 <meta>

MATE元数据 用来描述 HTML的信息 使用<mate>元素来提供页面的元信息,如网页的关键字,作者信息,网页过期时间。

<mate>位于文档的头部,它定义的信息不会出现在网页中,仅在源文件中显示。

一个HTML文档的头部可以有多个<mate>标记,

常用元数据:

charset 字符集 定义网页使用的字符集

<mate charset="UTF-8"/>

搜索引擎关键字

将mate元素的name属性的属性值设置为keyworks,就可以想搜索引擎说明网页的关键字

<mate name="keywords" content="关键字,关键字,..."/>

设置网页定时跳转

当<mate>标记的http-equiv属性值设置为refresh时,就可以设置页面在经过一定时间后自动刷新,或者在一定时间后自动跳转到其他页面。页面定时刷新或跳转的基本语法格式:

<mate http-equiv="refresh" content="秒" [url="资源路径"/]>

语法中,"[url="资源路径"]"是可选项,如果有此项对应的网址或者路径,则页面定时跳转;否则定时刷新


2018.12.5

HTML的主体<body>

1.添加文字

可以正常向body中添加文字,而其中控制空格的方式有所不同通过&nbsp来控制空格,几个空格就输入几个&nbsp。

2.添加特殊符号


常用特殊符号

   3.代码注释<!--注释文字 -->。

4.换行控制符<br/>

5.段落是<p></p> 在开始标记和结束标记之间形成一个段落。p元素会自动在其前后创建一些空白,浏览器会自动在段落间添加这些空间。

6.<hr>水平线 

7.标题文字由<h1> -> <h6>(1-6字号由大到小,同样是双标记)

8.强调文本

<b>强调粗体文本</b>

<i>强调斜体文本</i>

9.插入,删除(个人感觉没有任何卵用)

<ins>插入的文本</ins>(就是加一个下划线)

<del>删除的文本</del>(就是这样)

10.小型文本 小角标(标签 商标等)


2018.12.6

1.上下标(如平方)

<sub>下表文本</sub>

<sup>上标文本</sup>

2.注音文本(显示在文字上方 如:拼音)

rp元素定义当浏览器不支持ruby元素时显示的内容

<ruby>

    中文或字符<rt>中文的发音或字符的解释</rt>

</ruby>

3.标注(双标记,与正常文字略有不同)

<cite>

4.定义日期时间(双标记,定义时间文字)<time>

5.列表

a.无序列表<ul>

类似于标记 eg:

<ul>

    <li>无序列表项</li>

    <li>无序列表项</li>

</ul>

b.有序列表<ol>

按照顺序 1,2,3....

格式与无序相似

6定义列表<dl>/<dt>/<dd>

创建定义列表<dl>...</dl>

<dt>标记定义列表项

<dd>描述列表中的项目


2018.12.7

网页图像和多媒体元素

1.在网页中添加图片

图像是无法插入到HTML文档中的,实际上是链接到HTML文档中,因此,在<img>元素中scr属性是必须的。

基本语法:<img src="url">

语法说明:scr属性的属性值是图像的URL,指明网页中要引用图像的位置,也就是指出引用图像文件的相对路径或绝对路径

<img scr ="images/bluef.jpg"/>

指明为images文件夹中的bluef.jpg.

../表示上一级目录      /表示下一级目录


替代图像的文本——alt属性

在图片不能显示时,使用alt属性代替图片显示

<img scr ="images/bluef.jpg" alt="替代文本"/>


图像的宽高——width和height

<img src="url" width="像素(..px)|百分比(..%)" height= "像素(..px)|百分比(..%)"/>


2.在网页中加入视频<video>

视频的资源属性——src属性

<video src="视频路径"/>

您的浏览器不支持video元素

</video>

当视频无法正常显示时将用<video>与</video>之间的文字代替。


视频播放控制属性——controls属性

在<video>元素中controls属性设置是否为视频添加浏览器自带的播放控制条s

<video src="视频路径" controls="controls"/>

您的浏览器不支持video属性

</video>


视频播放准备控件——preload

在<video>元素中,如果设置preload属性,则在页面加载时就加载视频,并且准备播放,该属性有三个可选择的值:auto,meta,none 默认值auto

auto:表示当前页面加载后加入整个视频

meta:表示页面加载后只加载媒体的元数据

none:表示当前页面加载后不载入视频

<video src="视频路径" preload="auto"/>

您的浏览器不支持video属性

</video>


其他属性

<video>与<source>的配合使用

source元素常用的几个属性 src:指出媒体源的URL地址,type指出媒体元的播放类型,通常用到视频格式中,media包含了指定的媒体源所匹配的编解码器信息

<video>元素中科院指定多个source元素,浏览器按source标记的顺序检测指定的视频是否能播放,如果不能换下一个,此方法多用于兼容不同的浏览器

<video controls="controls"/>

<source src="rabit.ogv" type="video/ogg"/>

<source src="rabit.mp4" type="video/mp4"/>

<source src="rabit.webM" type="video/webM"/>

您的浏览器不支持video元素

</video>


3.在网页中加入音频元素<audio>

与<video>元素相似,没有width,height,poster

资源属性src

控制属性controls

准备播放属性preload

循环播放属性loop


4.插入多媒体文件<embed>(文本,图像,声音,动画,视频等的统称)

<embed src="url" width="像素" height="像素" type="类型"></embed>

添加视频音频图片的方式与上面类似,width,height,type 需要时进行添加


5.链入对象<object>

<object>元素可以定义一个嵌入的对象。可以使用<object>元素想web页面中添加文件。

<object>元素支持多种不同的媒介类型,如图片,音频,视频等

使用<object>元素是必须要指定的date属性和type属性。

在页面中嵌入图片

<object type="image/jepg" date="flower.jpg" height....><object>

在页面中嵌入网页

<object type="text.html" date="http://www.baidu.com" ....></object>


6.定义媒介分组和标题<figure>/<figcaption>

<figure>元素是一种元素的组合,可以带有标题。<figure>元素用来规定独立的流内容,表明网站的制作页面上一块的独立内容,将其从页面上移除后不会对页面上的其他内容造成影响。<figcation>可以定义<figure>元素的标题。

<figure>

<figcaption>标题</figcaption>

...

</figure>

一个<figure>元素内仅有一个<figcaption>


2018.12.8

超链接

链接:链接标记<a>文本或图片</a>,将文件或图片标识为链接源点

属性href=...,标记<a>的最基本属性

路径地址(URL)


11.14

至于为什么更新到超链接不更新了,主要是html和css内容比较简单的,但是相对多而杂,如果这样的学习,肯定记得会更牢固,到速率就比较慢了,为了早点完成一个静态网页的设计,还是赶快学完了

前几天主要忙着学高数(考研猛做课后题),倒是把前端的学习拉下了,因此今天我把html css基本学完了,并且准备着手设计我的网页了。

人生路漫漫,道阻且长。



12.17

虽然不知道这两天在干啥,但确实是这个静态网

页的设计,今天一天的时间就完成了,网页设计的也比较简单,当然html和css还是比较好掌握的,虽然知识点比较杂。

首先我的网页是我的一个主页,所以要包含个人介绍,个人博客(我直接链接到简书了 哈哈哈哈),写博客,登录,注册,最近资讯。

因为我想到所有的都用同一个设计 ,于是我将css和html分开写通过link连接到html中。

这是很简单的一个过程 主要的设计在css中


其中container 父div样式(html文件总体上表现为外层使用id为container的div盒子)

begin是导航栏通过区块显示从而写出来水平菜单,其中涉及到div与span的区别

以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍

div与span区别

div占用的位置是一行,

span占用的是内容有多宽就占用多宽的空间距离

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容