1、什么是标签
#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签，
#2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。
#3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>
2、固定的文档结构组织（！Tab）
<!DOCTYPE HTML>
<html>
    <head>...</head>
    <body>...</body>
</html>
3、固定的文档结构组织--各部分解释
#1、<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
#2、<html></html> 称为根标签，所有的网页标签都在<html></html>中。
#3、<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
#4、在<body>和</body>标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。
 
 4、web前端组成(解耦和)
html:标签(<abs></abs>), 指令（<!...>）, 实体(字符实体原生--显示转义)
css:选择器:由标签/类/id单独或组合出现作用域:{}内部区域样式块:满足css链接语法的各种样式
javascript(LiveScript -> JavaScript):BOM:js操作浏览器DOM:js操作页面文档ES:js语法(ECAMScript)
 
<!doctype html>
<html>
<head>
 <meta charset='utf-8'>
 <title>first</title>
</head>
<body>
</body>
</html>
一、 head内常用标签
1、meta相关
<meta name="Description" content="具体描述。。。">
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
#移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
#3秒后跳转
<meta http-equiv="refresh" content="3,url=http://www.baidu.com">
#三秒刷新
<meta http-equiv="refresh" content="3">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="gbk">

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:出于SEO考虑)
h系列标签从h1-h6共6个，h1用作主标题（代表最重要的），其实是h2。。。
 
四、p标签
<p>论颜值，鹤立鸡群</p>  <pre></pre>
 
五、img标签
#1、用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
#2、注意
2.1 src:网络地址/本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
2.2 图片的格式可以是png、jpg和gif
2.3 默认的宽高显示,只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形
 
六、a标签
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
#2、注意：
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简介、第一个页面(常用标签简介)的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. 腾讯Web前端开发框架JX(Javascript eXtension tools)

    转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...

  3. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  4. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  5. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  6. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  7. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  8. 前端html+css+JavaScript 需要掌握的单词

    前端html+css+JavaScript 需要掌握的单词   broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...

  9. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

随机推荐

  1. shop++改造之Filter类

    基于shop++源码进行商城改造.本来想大展手脚,结果一入手.发觉瞬间淹没了我的才华,sql语句也得贼溜没啥用. 不得不说这个商城源码价值很高,封装的很精屁. 下面是我第一天入手的坑. 数据库建好了表 ...

  2. 【坑】zsh和oh-my-zsh卸载后导致无法登陆

    apt-get remove zsh 然后断开终端,就再也连不上了,崩溃啊! 以下登陆为www用户登陆 各种找,到这里 https://www.cnblogs.com/EasonJim/p/78630 ...

  3. LR与SVM的异同

    原文:http://blog.sina.com.cn/s/blog_818f5fde0102vvpy.html 在大大小小的面试过程中,多次被问及这个问题:“请说一下逻辑回归(LR)和支持向量机(SV ...

  4. 网络编程之Socket & ServerSocket

    网络编程之Socket & ServerSocket Socket:网络套接字,网络插座,建立网络通信连接至少要一对端口号(socket).socket本质是编程接口(API),对TCP/IP ...

  5. PCA(主成分分析)的简单理解

    PCA(Principal Components Analysis),它是一种“投影(projection)技巧”,就是把高维空间上的数据映射到低维空间.比如三维空间的一个球,往坐标轴方向投影,变成了 ...

  6. dbms_redefinition在线重定义表结构

    dbms_redefinition在线重定义表结构 (2013-08-29 22:52:58) 转载▼ 标签: dbms_redefinition 非分区表转换成分区表 王显伟 在线重定义表结构 在线 ...

  7. python之接口开发基础知识

    一.开发接口的作用 1.mock 服务:在别的接口没有开发完成的时候可以模拟一些接口以便测试已经开发完成的接口,例如假的支付接口,模拟支付成功.支付失败. 2.了解接口是如何实现的:数据交互.数据返回 ...

  8. React多行文本溢出处理（仅针对纯文本）

    最多显示4行,第四行末尾显示“...”

  9. mysql 查询优化 ~ 优化基础补充

    一 简介:此文章是对于 sql通用基础的补充说明 二 虚拟列: mysql虚拟列是mysql5.7的新特性,对于函数计算形成的结果可作为虚拟列,并可以对虚拟列添加索引,这样就能加速sql的运行,不过有 ...

  10. SQL SERVER 2008 R2安装的时候提示“该实例名称MSSQLSERVER已在使用

    SQL SERVER 2008安装的时候提示“该实例名称已在使用”解决办法._冷雨玫瑰_新浪博客---和这文章描述差不多http://blog.sina.com.cn/s/blog_672b419f0 ...