Web前端开发基础 第一天(Html和CSS)
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
1. <html></html>
称为根标签,所有的网页标签都在<html></html>中。
2. <head>
标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>
、<script>
、 <style>
、<link>
、 <meta>
等标签,头部标签在下一小节中会有详细介绍。
3. 在<body>
和</body>
标签之间的内容是网页的主要内容,如<h1>
、<p>
、<a>
、<img>
等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
<head>
<title>...</title> /*会出现在浏览器的标题栏*/
<meta> <!--代码的用途-->
<link>
<style>...</style>
<script>...</script>
</head>
语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)
讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢?
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
网页上要展示出来的页面内容一定要放在body标签中
网页上要凸显出来的页面内容一定要放在span标签中
<body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
</body>
<em>尼克•卡拉威</em>/*斜体*/
<strong>美国梦</strong>/*突出*/
1. <em>
和<strong>
标签是为了强调一段话中的关键字时使用,它们的语义是强调。
2. <span>
标签是没有语义的,它的作用就是为了设置单独的样式用的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>
<span>梦想家</span>的气质亦为那个奢靡年代的不二注解。
</p>
</body>
</html>
<q>引用文本</q>
浏览器会对q标签自动添加双引号,这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。
<blockquote>引用文本</blockquote>
長文本引用
xhtml1.0写法:
<br />
html4.01写法:
<br>
作用相当于word文档中的回车。
在html代码中输入空格是不起作用的
html4.01版本 <hr>
xhtml1.0版本 <hr />
标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改
<address>联系地址信息</address>
在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用 css 样式来修改它
<code>代码语言</code>
注:如果是多行代码,可以使用<pre>标签。
<pre>语言代码段</pre>
Web前端开发基础 第一天(Html和CSS)的更多相关文章
- Web前端开发基础 第四课(CSS小技巧)
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
- Web前端开发基础 第四课(CSS元素模型)
css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...
- Web前端开发基础 第四课(CSS文字和段落排版)
文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
- Web前端开发基础 第四课(CSS小技巧1)
垂直居中-父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class=&q ...
- Web前端开发基础 第四课(CSS元素分类)
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- Web前端开发基础 第四课(CSS一些性质)
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...
- 网络统计学与web前端开发基础技术
网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...
- 前端基础入门第一阶段-Web前端开发基础环境配置
Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...
- Web前端开发(基础学习+坑)
0.基本说明 0.内容为课堂所学基本知识,加自己踩过的坑 1.web基本框架:html+css+JavaScript,html为网页骨架,css为网页美化,JavaScript负责页面动态交互,脚本等 ...
随机推荐
- DSP using MATLAB 示例Example3.8
代码: x = rand(1,11); n = 0:10; k = 0:500; w = (pi/500)*k; % [0,pi] axis divided into 501 points. X = ...
- express-3 最佳实践
版本控制 版本控制有以下益处: 文档: 能够回溯项目的历史,回顾所做的决策及组件的开发顺序,可形成宝贵的文档.记录项目的历史是十分有价值的. 归属: 团队工作,分工清晰,节省沟通成本. 试验: 你可以 ...
- maven junit 单元测试插件配置
单元测试插件配置 pom.xml中增加 <dependency> <groupId>junit</groupId> <artifactId>junit& ...
- 20145223《Java程序程序设计》第4周学习总结
20145223 <Java程序设计>第4周学习总结 教材学习内容总结 面向对象中,子类继承父类避免重复的行为定义,不过并不是为了避免重复定义行为就使用继承.程序代码重复在以后修改代码的时 ...
- item上下自动循环滚动显示
//li 上下滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; va ...
- UE4在C++中使用OnComponentBeginOverlap之类的时间
首先说明一下,官方文档是错的,在4.10版本下,绑定函数在角色类的构造函数中不起作用.2016.2.12 这里角色类为例 首先在头文件中添加: UFUNCTION() void OnOverlapBe ...
- UVa1486 Transportation(最小费用最大流)
题目大概说有n个城市,m条有向边连着它们,每条边都有两个属性一个是ai一个是ci,ai表示运送x单位货物时花费ai*x*x的价钱,ci表示边最多能运送的货物数量(<=5).问从城市1运送k单位货 ...
- Unity Standard Assets 简介之 Utility
决定写这个系列起因于刚才的偶然所见,我发现当前版本的Unity有一个 Utility 标准资源包,里面有一个 FPSCounter 脚本提供了显示游戏运行帧率的基本功能,而我几周前刚刚写过一个同样功能 ...
- 在windows和linux下如何查看80端口占用情况?是被哪个进程占用?如何终止等
一.在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等 这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&quo ...
- iOS学习36数据处理之SQLite数据库
1. 数据库管理系统 1> SQL语言概述 SQL: SQL是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集, 是一种功能齐全的 ...