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中添加文字,而其中控制空格的方式有所不同通过 来控制空格,几个空格就输入几个 。
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占用的是内容有多宽就占用多宽的空间距离