码迷,mamicode.com
首页 > Web开发 > 详细

前端三剑客 页面模板 HTML标签

时间:2018-09-19 22:05:36      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:实体   自身   程序   title   标记语言   initial   部分   其他   特殊   

前端

什么是前端

前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript。

前端开发技术栈

HTML

  • 超文本标记语言
  • 负责完成页面的结构
  • 文件后缀:.html .htm

"超文本"指的是页面内可以包含图片、链接、程序等非文字元素


CSS

  • 级联样式表
  • 负责页面的风格设计,样式、美观
  • 文件后缀:.css

JavaScript

  • 浏览器脚本语言,可以编写运行在浏览器上的程序
  • 负责编写页面特效、调用浏览器的API(BOM)、操作改变页面内容(DOM),从后端获取数据(Ajax),渲染页面等
  • 文件后缀:.js

前端三剑客

HTML

标记语言

? 标记语言为非变成语言,不具备变成语言具备的程序逻辑,遇到重复操作只能全部手写

组成

html为前端页面的主体,由标签、指令、转义字符(实体)组成
标签
标签:由<>包裹,以字母开头可以结合合法字符可以被浏览器解析的标记(纯字母或字母与数字组合)
<zero>html</zero>
<a1>html</a1>
<a_1>html</a_1>
指令
指令:被<>包裹,以!开头的可以被浏览器解析的标记
<!DOCTYPE html> 
<!--html注释-->
转义字符
被&与; 包裹的特殊字母组合或#开头的十进制数
&nbsp; &#60;

CSS

? CSS为前端页面的样式,由选择器、作用域与样式块组成

选择器
选择器:由标签/类/id单独或组合出现
<style>
/*选择器 zero*/
    zero{
        color : red;
        }
</style>
作用域
{}内部区域
<style>
/*作用域{}*/
    zero{
        color : red;
        }
</style>
样式块
满足css链接语法的各种样式
<style>
/*样式块color:red;*/
    zero{
        color : red;
        }
</style>

JS

实实在在的编程语言,完善的语法,可以完成复杂的程序逻辑

BOM:js操作浏览器
DOM:js操作页面文档
ES:js语法(ECAMScript)

<script type="text/javascript">
    // js注释:可以省略; 但不建议
     alter("我真帅");
</script>

页面

模板

<!DOCTYPE html>
<html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>页面</title>
    </head>
    <body>

    </body>
</html>

模板解读

DOCTYPE:指定文档类型,规定html标签语法

html:文档根标签,标注着文档(页面)的开始与结束

head:文档头标签,可以引用脚本文件、指定演示表、书写代码逻辑块、提供元信息

body:文档主体标签,包含文档所有文本与超文本内容

title:文档tag标题标签,设置文档tag的标题内容

其他核心模板标签

meta(元标签)

字符编码
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<meta name="keywords" content="name,key,aa,搜索关键词"/>
<meta name="description" content="网站相关内容">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

link(链接标签)

外联样式表
<link rel="stylesheet" type="text/css" href="style.css">
文档tag图标
<link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico">

style(脚本标签)

<script type="text/javascript"></script>

HTML常用标签

无语义标签

<div></div>
<span></span>

常用语义标签

<hn>标题</hn> 
<p>段落</p>
<pre>原文本</pre>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<!-- br换行 hr分割线 -->
<br>好<br>的<br>
<hr>呵<hr>呵<hr>

文本标签

<!-- i:很常用的标签,一般不作为斜体文本使用,作为字体图片使用,原因写法简单 -->
    <i>斜体,</i>
    <em>以斜体方式强调</em>
    <b>加粗</b>
    <strong>以加粗的方式强调</strong>
    <!-- p:段落标签具有具体区域,成段出现,段落之间存在段落间距 -->
    <p>段落标签</p>
    <p>段落标签</p>
    <p> 123  4242      4232</p>
    <!-- 原样文本标签:会保留所有字符,原样显示 -->
    <pre>大萨达 请问  1232  4 4   </pre>
    <!-- 样式具有下划线 -->
    <ins>插入的文本</ins>
    <!-- 样式具有中划线 -->
    <del>删除的文本</del><br>
    <!-- 应用 -->
    &yen; 998 <del>1999</del><br>

    <!-- 上角标和下角标 -->
    <!-- 10的平方 -->
    <span>10<sup>2</sup></span><br>
    <!-- 水分子 -->
    <span>H<sub>2</sub>O</span><br>
    <!-- 右标:小号字体 -->
    <span>你很帅<small>真的是帅</small></span><br>
    <!-- 拼音 -->
    <ruby>
        牛逼<rt>niǔ bī</rt>
    </ruby>

其他标签

<section></section> 块
<small></small> 小号字体

标签分类

单双标签

<!-- 1.单双标签 -->
    <!-- 标签都需要闭合 -->
    <!-- 单标签:闭合操作在本身的尾部,并且可以省略(自定义标签要自我标注闭合)==》 但标签一般具有特殊功能,但标签主功能 -->
    <!-- 双标签:闭合操作有对应的结束标签完成,也可以省略(强烈不建议)==》双标签一般具有文本(普通文本与超文本),双标签主内容 -->
    <br>
    <div>123<!-- </div> -->
    <div>456</div>
    <!-- </div> -->

行块标签

<!-- 2.行块标签 -->
    <!-- 行:内联,不具备自身宽高,通常同行显示 -->
    <!-- 块:块级,具备自身宽高,通常换行显示 -->
    <!-- 自定义标签均属于内联标签 -->
    <!-- span{我是span$}*2+div{我是div$}*2 -->
    <span>我是span1</span>
    <a href=#> hello </a>
    <div>我是div1</div>
    <p> p标签</p>

组合标签

 <!-- 3.组合标签 -->
    <!-- 组合标签必须组合出现,协同下才能显示产生相应的内容与效果 -->
    <ruby>
        你真棒<rt > <h2>J</h2> &nbsp;&nbsp; <h2>8</h2> </rt>
    </ruby>

前端三剑客 页面模板 HTML标签

标签:实体   自身   程序   title   标记语言   initial   部分   其他   特殊   

原文地址:https://www.cnblogs.com/layerluo/p/9676717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!