web@前端--html,css,javascript简介、第一个页面(常用标签简介)
#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`、`<head>`、`<body>`都是标签,
#2. HTML中标签通常情况下是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个`/`,开始标签和结束标签之间的就是标签的内容。
#3、有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如:<br/> <hr/> <input/> <img/>
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
#1、<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。
#2、<html></html> 称为根标签,所有的网页标签都在<html></html>中。
#3、<head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签,头部标签在下一节中会有详细介绍,<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
#4、在<body>和</body>标签之间的内容是网页的主要内容,最终会在浏览器中显示出来。
<html>
<head>
<meta charset='utf-8'>
<title>first</title>
</head>
<body>
</body>
</html>
1、meta相关
<meta name="Keywords" content="网易,邮箱,游戏,新闻">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="refresh" content="3,url=http://www.baidu.com">
#三秒刷新
<meta http-equiv="refresh" content="3">
<meta http-equiv="x-ua-compatible" content="IE=edge">
2、非meta标签
<title>百度一下,你就知道</title>
<link rel="icon" href="https://www.baidu.com/favicon.ico">
<!-- logo图片 -->
<!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
<link rel="shortcut icon" type="image/x-icon" href="icon.png">
#定义内部样式
<style></style>
#引入外部样式文件
<link rel="stylesheet" href="mystyle.css">
#定义JavaScript代码或引入JavaScript文件
<script src="hello.js"></script>
#1、<br> 换行
#2、<hr> 分割线
#3、<font> 修改文字大小,颜色
<font color="red" size="10px">我是哈哈哈</font>
#4、<b> 加粗 <strong>
#5、<u> 下划线 <ins>
#6、<i> 倾斜 <em>
#7、<s> 删除线 <del>
h系列标签从h1-h6共6个,h1用作主标题(代表最重要的),其实是h2。。。
<p>论颜值,鹤立鸡群</p> <pre></pre>
#1、用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
#2、注意
2.1 src:网络地址/本地地址,本地地址可以用绝对或相对路径,但通常用相对路径,相对路径是以html文件当前所在路径为基准进行的
2.2 图片的格式可以是png、jpg和gif
2.3 默认的宽高显示,只要指定了一个值,系统会根据该值计算另外一个值,并且都是等比拉伸的,图片将不会变形
#1、超链接标签是超文本文件的精髓,可以控制页面与页面之间的跳转,语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
2.1 a标签不仅可以标记文字,也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下,你就知道</a>
2.2 a标签必须有href属性,href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面
<a href="a/b/c/aaa.html">锤你胸口</a>
2.4 target="_blank"代表在新页面中打开,_self。
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
<base target="_blank">
如果a标签自己设置了target,那么就以自己的为准,否则就会参照base的设置
2.5 title="鼠标悬浮显示的内容"
#1、什么是假链接?
就是点击之后不会跳转的链接,我们称之为假链接
#2、假链接存在的意义:
在企业开发前期,其他界面都还没有写出来,
那么我们就不知道应该跳转到什么地方,所以就只能使用假链接来代替
#3、假链接的定义格式
1、href="#" :会自动回到网页的顶部
2、href="javascript:" :不会返回顶部
页面内锚点
#1、要想通过a标签跳转到指定的位置,那么必须告诉a标签一个独一无二的身份证号码,
这样a标签才能在当前界面中找到需要跳转到的目标位置
#2、如何为html中的标签绑定一个独一无二的身份证号码呢?
在html中,每一个标签都有一个名称叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的
#3、所以要想实现通过a标签跳转到指定的位置,分为两步
3.1、给目标位置的标签添加一个id属性,然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
#4、a标签除了可以跳转当前页面,还可以跳转到其他页面的指定位置
web@前端--html,css,javascript简介、第一个页面(常用标签简介)的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 腾讯Web前端开发框架JX(Javascript eXtension tools)
转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...
- 进击的Python【第十四章】:Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 前端html+css+JavaScript 需要掌握的单词
前端html+css+JavaScript 需要掌握的单词 broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
随机推荐
- 【英文文档】 Installing Go from source Go语言官方编译指南 2019.02.27
Introduction Go is an open source project, distributed under a BSD-style license. This document expl ...
- 高性能的代理服务-Envoy
Envoy最初建于Lyft,是一个高性能的代理服务,为服务网格提供了基础. 它与应用程序并行运行,通过以平台无关的方式提供通用功能来抽象网络. 当基础架构中的所有服务流量都通过Envoy网格时,通过一 ...
- Golang入门教程(八)复合数据类型使用案例一
目录 数组 指针 结构体(struct) 一.数组 Go 语言提供了数组类型的数据结构. 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列,这种类型可以是任意的原始类型例如整形.字符串或者自定 ...
- IO流----操作文件的9种方法代码实现
IO流----操作文件的9种方法代码实现: 1:使用字节流读写数据: 四种方式: method1: 每次读写一个字节,边读边写: /* * 复制文本文件. * * 数据源:从哪里来 ...
- Sliverlight常见错误集锦
1. 使用GridSplitter时候(参考),出现如下错误 C# 中的错误Error 2 The type 'sp:GridSplitter' was not found. Verify…… 对程序 ...
- Kettle 和数据建模的几个学习资料
视频课程: 1. 初建军的 [慕课大巴分享]炼数成金——深入BI - Kettle 篇 基础书:1. Kettle 3.0 用户手册, 文件名为: ETL工具Kettle用户手册(上).pdf, ...
- 【bzoj 3779】重组病毒
Description 黑客们通过对已有的病毒反编译,将许多不同的病毒重组,并重新编译出了新型的重组病毒.这种病毒的繁殖和变异能力极强.为了阻止这种病毒传播,某安全机构策划了一次实验,来研究这种病毒. ...
- luogu P2387 [NOI2014]魔法森林
传送门 这题似乎不好直接做,可以考虑按照\(a_i\)升序排序,然后依次加边更新答案 具体实现方法是用lct维护当前的树,这里需要维护链上最大的\(b_i\).每次加一条边,如果加完以后没有环直接加, ...
- ELK平台搭建(上)
一.目的 为指导在Centos6.8系统下搭建标准ELK平台的工作. 二.定义 Elasticsearch Logstash Kibana结合Redis协同工作. 三.适用范围 适用于运营维护组运维工 ...
- Liunx/RHEL6.5 Oracle11 安装记录[缺少依赖包的解决方案]
1.将镜像文件挂,如/mnt # mount -o loop rhel-server-6.1-x86_64-dvd.iso /mnt#这一步其实有很多实现方法,如可以将镜像文件中的Packages文件 ...