HTML+CSS+js搭建简易网页(1)构建网页的骨架
前言
本人正处于JavaScript学习中,并进行网页实战练习进行回顾HTML和CSS,接下来将推出搭建一个网页的必备部分的知识以及实战部分的一个系列文章。本篇文章将带领大家搭建一个网页的骨架。
企业前端开发一般结构样式相分离。
HTML篇
HTML 4部分构成:
<!DOCTYPE html>
<!-- 第一部分 -->
<html lang="en">
<!--第二部分 -->
<head>
<!-- 第三部分 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 第四部分 -->
</body>
</html>
1.<title></title>
网页的标题.
将你想要在浏览器的标签栏显示的标题写在 <title>
标签内,
例如:<title>CSDN-专业IT技术社区</title>
2.<link rel="" href="" type="">
文档与外部资源之间连接的纽带。
(1)<link rel="stylesheet"href="" type="text/css">
链接到外部样式表(CSS文件)
(2)<link rel="shortcut icon" href="" type="image/x-icon">
链接网页的标题栏处的小图标,例如下图:
(注:文件路径写于href内)
3.<script src=""></script>
客户端脚本(JavaScript)
JavaScript 通常用于图像操作、表单验证以及动态内容更改。
(注:文件路径写于src中)
4.<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
meta标签描述了一些基本的元数据。
标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。 META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
以上4点内容均写在<head></head>
标签内
5.<div> </div>
块级元素 可以看做成盒子
常见用途是文档布局
例如:新浪新闻网页可以分成多个div
一个网页可以分成以下三部分:
<!-- 导航栏 --><div class="nav container"></div><!-- 内容区 --><div class="contents container"></div><!-- 底部区域 --><div class="bottom container"></div>
6.<ul><li></li><ul>
列表
每一个ul由下图每一个红方格表示,每一个li可由下图蓝方格表示,每一个ul可以包括多个li
6.<a></a>
标签 超链接
与其他网页进行链接,众所周知,一个网站有多个网页。网页中的文字点击后可以跳转的都是a标签
<a href="" target="_blank"></a>
(目标路径写在href内)
target="_blank"链接将在新窗口打开
7.<p></p>
段落标签,标签的功能跟其名的效果是一样的。
(本次HTML就说到这里,下期继续说,接下来说一下CSS)
CSS篇
1.背景系列:
下方是背景图片的用法(不要忘记写url)
background-image:url()
下方是背景图片位置的一个实例:
background-position: center top;/* 背景图位置--水平居中 垂直顶部对齐 */
2.去除a标签的下划线:
text-decoration: none;
3.字体系列:
4.盒子模型
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
(注:浏览器有8px的margin,所以在开发前一定记得消除)
* {margin: 0;/* 去除浏览器预设外边距 */
}
结语
在实战中成长,不断练习对代码更加熟悉,不断向高手进发,在前端道路上奋斗的人们加油,文章写的不好,还请各位大佬多多指教。
HTML+CSS+js搭建简易网页(1)构建网页的骨架相关推荐
- node.js搭建简易Web服务器
node.js搭建简易Web服务器 node.js简介 Node.js 是一个基于V8引擎的JavaScript 运行环境. V8 是为Google Chrome 提供支持的 JavaScript 引 ...
- HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是 ...
- HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员 ...
- HTML5七夕情人节表白网页(雪花爱心表白) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤雪花爱心❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表 ...
- HTML5七夕情人节表白网页_生日快乐粒子烟花(自定义文字)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤生日快乐粒子烟花(自定义文字)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css ...
- HTML5七夕情人节表白网页(结婚倒计时) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤结婚倒计时❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白 ...
- HTML5七夕情人节表白网页(烂漫的空中散落的花瓣3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤烂漫的空中散落的花瓣3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表 ...
- HTML5七夕情人节表白网页(新年倒计时-红色雪花) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱
HTML5七夕情人节表白网页❤新年倒计时-红色雪花❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 ...
- HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css ...
最新文章
- shell中echo使用单引号时输出单引号
- 将 Shiro 作为一个许可为基础的应用程序 五:password加密/解密Spring应用
- 爬虫篇 --- 分布式爬虫
- mysql binlog sql统计_mysql的binlog详解
- c++中outtextxy_第12章 坚持一百秒(《C和C++游戏趣味编程》配套教学视频)
- 网络操作系统 第七章 管理TCP/IP网络
- Linux mail 命令 不兼容 从 Redhat-release5 迁移到 Redhat-release6以上
- python与excel-Python与Excel(1)
- 脚手架开发(1)-准备阶段
- 22:紧急措施http://noi.openjudge.cn/ch0107/22/
- 网络文件共享服务主流----FTP文件传输协议
- MIT6.824-lab3A-Key/value service without snapshots(基本的KV服务)
- 基于比原链开发Dapp(二)-开发流程
- m4a怎么转换成mp3,m4a转mp3方法
- Bresenham快速画直线算法
- 基于51单片机之数码管设计#扩展三位数码管电路,完成0-999递增或递减计数功能,递减间隔200ms左右
- 当我们谈战略,我们究竟在谈什么?
- EOS智能合约开发系列(14): 关于require_auth函数
- VS Code利用CMake工具编译Cpp文件报错
- BERT实战(1):使用DistilBERT作为词嵌入进行文本情感分类,与其它词向量(FastText,Word2vec,Glove)进行对比