web三要素
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三要素的更多相关文章
- (Frontend Newbie)Web三要素(三)
上一篇简单介绍了Web三要素中的层叠样式表,本篇主要介绍三要素中最后一个,也是最难掌握的一个-----JavaScript. JavaScript 老规矩不能破,先简要交代 JavaScript 的历 ...
- (Frontend Newbie)Web三要素(二)
上一篇简单介绍了HTML的基本知识以及一些在开发学习过程中容易忽视的知识点,本篇介绍Web三要素中另一个重要组成部分----层叠样式表(Cascading Style Sheets). CSS 按照一 ...
- (Frontend Newbie) Web三要素(一)
上一篇简单了解了Web发展的简要历史,本篇简单介绍前端开发的基本三要素:HTML.CSS.JavaScript中的HTML以及一些在开发.学习过程中易被忽视的知识点. HTML HTML全称是超文本标 ...
- 移动web开发之屏幕三要素
× 目录 [1]屏幕尺寸 [2]分辨率 [3]像素密度 前面的话 实际上,并没有人提过屏幕三要素这个词,仅是我关于移动web开发屏幕相关部分总结归纳的术语.屏幕三要素包括屏幕尺寸.屏幕分辨率和屏幕像素 ...
- Web Service基础——规范及三要素
1. Java中的Web Service规范 Java 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC).JAX-RS.JAXM&SAAJ(废弃). 1.1 JAX- ...
- 【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李 ...
- Http协议:彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
转载:http://mp.weixin.qq.com/s/uWPls0qrqJKHkHfNLmaenQ 导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必 ...
- WebService基础学习(二)—三要素
一.Java中WebService规范 JAVA 中共有三种WebService 规范,分别是JAX-WS.JAX-RS.JAXM&SAAJ(废弃). 1.JAX-WS规范 ...
- webService 三要素
WebService(jax-ws)三要素 SOAP: 基于HTTP协议,采用XML格式,用来传递信息的格式. WSDL: 用来描述如何访问具体的服务.(相当于说明书) UDDI: 用户自己可以按UD ...
随机推荐
- mac上的mysql管理工具sequel pro
https://blog.csdn.net/wan_zaiyunduan/article/details/54909389 以前用过Plsql.Navicat.Workbench,现在换到mac上,用 ...
- uni-app学习记录07-生命周期
<template> <view class="content"> 我是首页 </view> </template> <scr ...
- uni-app学习记录05-二级联动及获取DOM对象
<template> <view> <view class="id"> <view class="left"> ...
- Gyn 100989 "1D Cafeteria (B)"(set+lower_bound)
传送门 •题意 某自助餐厅有 n 张桌子,桌子编号为 1~n,其中第 i 张桌子可容纳 ai 个人: 有两种操作: (1)in x : 有 x 个人来这家餐厅吃饭,需要找一个可容纳 x 人的桌子,并满 ...
- 2018-8-10-VisualStudio-合并代码文件
title author date CreateTime categories VisualStudio 合并代码文件 lindexi 2018-08-10 19:16:52 +0800 2018-2 ...
- P1034 台阶问题一
题目描述 有 \(N\) 级的台阶,你一开始在底部,每次可以向上迈最多2级台阶(最少1级),问到达第 \(N\) 级台阶有多少种不同方式. 输入格式 一个正整数 \(N(\le 20)\) . 输出格 ...
- 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...
- 路由器OpenWrt如何脱机(离线)下载BT文件
路由器OpenWrt如何脱机(离线)下载BT文件 1.首先到如下网址下载OpenWrt固件(确保为路由器正确型号). http://downloads.openwrt.org/snapshots/tr ...
- 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 ...
- Mybase desktop7.3破解
1.Mybase Desktop 7.3 安装包 百度云链接: 链接:https://pan.baidu.com/s/1mWZ2_Qmkf6aAX9CYgrN12A 提取码:vjw7 2.破解包 百度 ...