Web前端基础第一天
Web标准的构成
- 结构：结构对于网页元素进行整理和分类，现阶段主要学的是html
- 表现：表现用于设置元素的板式、颜色、大小等外观样式，主要指的是CSS
- 行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript
HTML标签导读
- HTML语法规范：
- HTML标签是由尖括号包围的关键词，例如
<html。 - HTML标签通常是成对出现的，例如
<html>和</html>,我们成为创标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。 - 有些特殊的标签是单个标签，例如
<br/>，我们成为单标签。
- HTML标签是由尖括号包围的关键词，例如
- 标签关系
- 双标签关系可以分为两类：
包含关系和并列关系
- 双标签关系可以分为两类：
- HTML语法规范：
HTML基本结构标签
<html>
<head>
<title><title>
</head>
<body>
</body>
</html>
HTML常用标签
- 标题标签
<h1> - <h6>重要- 加了标题的文字会加粗，字号也会依次变大
- 每个标题独占一行
- 标题标签
DOCTYPE和lang标签以及字符集的作用
<!DOCTYPE html><html lang="en"> 用来定义当前文档的显示语言- en:定义语言为英语
- zh-cn:定义语言为中文
<meta charset="utf-8" /> 用来定义字符集
标签语义
- 段落标签和换行标签
- 段落标签:
<p></p><把HTML文档分成若干段落> - 换行标签：
<br /><强制换行>
- 段落标签:
- 文本格式化标签
- 加粗标签：
<strong></strong>和<b></b> - 文字倾斜：
<em><em>和<i><i> - 删除线：
<del></del>和` - 下划线：
<ins></ins>和` - 注意：优先使用strong、em、del、ins标签，这些语义笔记强烈
- 加粗标签：
- div和span标签：没有语义，他们是普通盒子，用来装内容
- 图像标签和路径
- img:
<img src="图像URL" />属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换本，图像不能显示的文字 title 文本 提示文本，师表放到图像上，显示的文字 border 像素 设置图像边框粗细
- img:
- 超链接标签
- 链接的语法格式
<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
属性 作用 href 用于指定连接目标的URL地址，（必须属性）当标签应用href属性时，他就具有了超链接的功能 target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
- 链接的语法格式
- 链接分类
- 外部链接：连接到其它网站，如百度
- 内部链接：连接到本站点内的网页
- 空连接：
# - 下载链接：href中内容为文件，浏览器则会下载此文件
- 网页元素链接：
<a href="http://www.baidu.com" ><img src="baidu.jpg" /></a> - 锚点链接：点击链接，可以快速定位到页面中的摸个位置
1.在链接文本href属性中国，设置属性值为 `#名字` 的形式，如<a href="#two">第二集</a>
2.找到目标标签，在里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>
- 段落标签和换行标签
Web前端基础第一天的更多相关文章
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- 进击的Python【第十五章】：Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
- 进击的Python【第十四章】：Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 进击的Python【第十三章】：Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- web前端基础知识学习网站推介
内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...
- Web前端基础怎么学？ JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
随机推荐
- AJ学IOS（35）UI之Quartz2D仿真支付宝手势解锁_代理获得密码。
AJ分享,必须精品 效果: 实现步骤 其实这个实现起来不难 第一步先放好主要的UI,一张背景图和一个View 第二部就是把9个button放到view中,设置好按钮的默认和选中图片. 注意:创建时候的 ...
- E - Max Sum Plus Plus Plus HDU - 1244 （线性区间DP）
题目大意: 值得注意的一点是题目要求的是这些子段之间的最大整数和.注意和Max Sum Plus Plus这个题目的区别. 题解: 线性区间DP,对每一段考虑取或者不取.定义状态dp[i][j]指的 ...
- C - League of Leesins
乱搞一发,,竟然过了!!! 题目大意:输入一个整数n,然后n-2行,每一行3个数字,表示一个数组中连续的3个数字,然后将这3个数字的顺序打乱,然后再将这个n-2行打乱,要求还原数组. 题解:先找到前3 ...
- Jmeter接口测试、性能测试详细介绍
下面主要就是讲一下Jmeter工具的用法,用法非常简单,比起loadrunner不知道简单多少,并且开源免费~~ 1.接口简介 接口定义 接口: 就是数据交互的入口和出口,是一套标准规范. 接口(硬件 ...
- 实现一个简单的基于动态代理的 AOP
实现一个简单的基于动态代理的 AOP Intro 上次看基于动态代理的 AOP 框架实现,立了一个 Flag, 自己写一个简单的 AOP 实现示例,今天过来填坑了 目前的实现是基于 Emit 来做的, ...
- 高级数据结构---红黑树及其插入左旋右旋代码java实现
前面我们说到的二叉查找树,可以看到根结点是初始化之后就是固定了的,后续插入的数如果都比它大,或者都比它小,那么这个时候它就退化成了链表了,查询的时间复杂度就变成了O(n),而不是理想中O(logn), ...
- XSS语义分析的阶段性总结（一）
本文作者:Kale 前言 由于X3Scan的研发已经有些进展了,所以对这一阶段的工作做一下总结!对于X3Scan的定位,我更加倾向于主动+被动的结合.主动的方面主要体现在可以主动抓取页面链接并发起请求 ...
- MySQL笔记总结-其他
数据库相关概念 一.数据库的好处 1.可以持久化数据到本地 2.结构化查询 二.数据库的常见概念 ★ 1.DB:数据库,存储数据的容器 2.DBMS:数据库管理系统,又称为数据库软件或数据库产品,用于 ...
- mybatis源码学习：基于动态代理实现查询全过程
前文传送门: mybatis源码学习:从SqlSessionFactory到代理对象的生成 mybatis源码学习:一级缓存和二级缓存分析 下面这条语句,将会调用代理对象的方法,并执行查询过程,我们一 ...
- Calendar日历类
package com.yhqtv.demo02.ThreadPool; import java.util.Calendar; import java.util.Date; /* * java.uti ...