1.带动web的三驾马车

html5,css,javascript(js)就是带动web的三架马车,html是web的结构,css是web的样式,而js则是web的行为(即与用户的交互)

如果把html比作一棵树的树干的话,那么css就是树上开的花结的果,js就相当于一阵风,只要一吹过,树就会作出相应的反应,就像风小的时候树叶动,风大树干就断了。

2.制作网页需要注意什么?

那么我们在制作一个网页的时候具体需要注意些什么呢?首先,我们要明白上文所提到的html,css和js的作用,在这个前提下,我们要做到让结构(html),样式(css),行为(js)互相分离,所谓分离,就是在写结构时,用一个单独的.html文件来写,写样式时,用一个单独的.css文件来写,写行为时,用一个单独的.js文件来写,这样做的目的是为了让我们的代码容易阅读,并且能够实现重用,不会造成代码冗余,并且为日后的更新网页或者维护提供便利。

3.HTML语义化

提到语义化不得不提一下旧版本的html,html5增加了很多语义化的标签,在没有这些标签以前,举个例子,如果一个网站我们把它分为上中下三个部分,那么以前的标签就要分三个<div></div>来划分内容。html5新增词汇就很好的解决了这些问题,比如头部的某个区域,我们可以用<header></header>来表示,页面的脚注可以用<footer></footer>来表示,这样不仅方便了开发者的阅读,而且使得机器可以理解,对于引擎和爬虫来说非常有利,他们可以获取更多的信息,从而提高了网站的权重。

4.Css的特点

之前有提到,css即是网页的样式,就好比你在结构中插入了一张图片,要把它往左往右或者往你想让它待的地方固定,那么就要用css来给他规定样式了。

在写.css文件时我们要注意选择合适的样式表和选择器,切忌胡乱选择,每个样式表和选择器都有他各自适用的场景,举个例子,css行内样式表适合在js里使用,通配选择器适合在重置宽高的时候使用。还需要注意的是,在写声明时,有可能会发生声明冲突,这个时候计算机会先比较优先级,再比较特殊性,最后比较源次序。有时候我们规定一个元素的样式后,会发现其子元素也拥有了其中的一部分属性,这就是css的继承,子元素会自动拥有父元素的某些css属性,文本类的属性会被继承。

5.超链接

相信大家对百度都不陌生,当我们在搜索框输入内容后,用鼠标点击的“百度一下”的按钮,就是一个超链接,超链接可以实现从一个页面跳转到另一个页面的功能,我们在写超链接时,要尽量每次都写上跳转到一个新的页面打开,这对于用户来说往往是很友好的,可以提高用户的使用体验。

Ps:实现跳转到一个新页面的代码:<a href="目标" target=_blank>内容</a>

6.路径

提到路径,又要提到两个概念,一个是绝对路径,一个是相对路径。

当我们要访问站外资源的时候,就只能使用绝对路径。如果我们要访问站内资源,当我们搭建的网站已经部署到服务器,可以使用绝对路径,并且此时可以省去协议和域名。

当我们要访问站内资源,并且我们搭建的网站没有部署到服务器的时候,就只能使用相对路径。

Ps:绝对路径书写格式:协议://域名/目录

相对路径书写格式:./路径  ./可以省略,../表示返回上一级,../../表示返回两级

web三要素的更多相关文章

  1. (Frontend Newbie)Web三要素(三)

    上一篇简单介绍了Web三要素中的层叠样式表,本篇主要介绍三要素中最后一个,也是最难掌握的一个-----JavaScript. JavaScript 老规矩不能破,先简要交代 JavaScript 的历 ...

  2. (Frontend Newbie)Web三要素(二)

    上一篇简单介绍了HTML的基本知识以及一些在开发学习过程中容易忽视的知识点,本篇介绍Web三要素中另一个重要组成部分----层叠样式表(Cascading Style Sheets). CSS 按照一 ...

  3. (Frontend Newbie) Web三要素(一)

    上一篇简单了解了Web发展的简要历史,本篇简单介绍前端开发的基本三要素:HTML.CSS.JavaScript中的HTML以及一些在开发.学习过程中易被忽视的知识点. HTML HTML全称是超文本标 ...

  4. 移动web开发之屏幕三要素

    × 目录 [1]屏幕尺寸 [2]分辨率 [3]像素密度 前面的话 实际上,并没有人提过屏幕三要素这个词,仅是我关于移动web开发屏幕相关部分总结归纳的术语.屏幕三要素包括屏幕尺寸.屏幕分辨率和屏幕像素 ...

  5. Web Service基础——规范及三要素

    1. Java中的Web Service规范 Java 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC).JAX-RS.JAXM&SAAJ(废弃). 1.1 JAX- ...

  6. 【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李 ...

  7. Http协议:彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

    转载:http://mp.weixin.qq.com/s/uWPls0qrqJKHkHfNLmaenQ 导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必 ...

  8. WebService基础学习(二)—三要素

    一.Java中WebService规范      JAVA 中共有三种WebService 规范,分别是JAX-WS.JAX-RS.JAXM&SAAJ(废弃).   1.JAX-WS规范    ...

  9. webService 三要素

    WebService(jax-ws)三要素 SOAP: 基于HTTP协议,采用XML格式,用来传递信息的格式. WSDL: 用来描述如何访问具体的服务.(相当于说明书) UDDI: 用户自己可以按UD ...

随机推荐

  1. mac上的mysql管理工具sequel pro

    https://blog.csdn.net/wan_zaiyunduan/article/details/54909389 以前用过Plsql.Navicat.Workbench,现在换到mac上,用 ...

  2. uni-app学习记录07-生命周期

    <template> <view class="content"> 我是首页 </view> </template> <scr ...

  3. uni-app学习记录05-二级联动及获取DOM对象

    <template> <view> <view class="id"> <view class="left"> ...

  4. Gyn 100989 "1D Cafeteria (B)"(set+lower_bound)

    传送门 •题意 某自助餐厅有 n 张桌子,桌子编号为 1~n,其中第 i 张桌子可容纳 ai 个人: 有两种操作: (1)in x : 有 x 个人来这家餐厅吃饭,需要找一个可容纳 x 人的桌子,并满 ...

  5. 2018-8-10-VisualStudio-合并代码文件

    title author date CreateTime categories VisualStudio 合并代码文件 lindexi 2018-08-10 19:16:52 +0800 2018-2 ...

  6. P1034 台阶问题一

    题目描述 有 \(N\) 级的台阶,你一开始在底部,每次可以向上迈最多2级台阶(最少1级),问到达第 \(N\) 级台阶有多少种不同方式. 输入格式 一个正整数 \(N(\le 20)\) . 输出格 ...

  7. 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件

    问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...

  8. 路由器OpenWrt如何脱机(离线)下载BT文件

    路由器OpenWrt如何脱机(离线)下载BT文件 1.首先到如下网址下载OpenWrt固件(确保为路由器正确型号). http://downloads.openwrt.org/snapshots/tr ...

  9. CAS5.3 单点登录/登出/springboot/springmvc

    环境: jdk:1.8 cas server:5.3.14 + tomcat 8.5 cas client:3.5.1 客户端1:springmvc 传统web项目(使用web.xml) 客户端2:s ...

  10. Mybase desktop7.3破解

    1.Mybase Desktop 7.3 安装包 百度云链接: 链接:https://pan.baidu.com/s/1mWZ2_Qmkf6aAX9CYgrN12A 提取码:vjw7 2.破解包 百度 ...