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

前端

什么是前端

前端即网站前台部分,运行在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>

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

时间: 2024-11-05 22:02:31

前端三剑客 页面模板 HTML标签的相关文章

Python 44 前端概述 、三剑客 、常用标签与分类

一:前端概述 前端指的就是页面的设计和给用户带来极高的用户体验 前端开发技术栈分为三大类:HTML .CSS .JavaScript HTML(Hyper Text Markup Language): 1 超文本标记语言 2 负责完成页面的结构 3 文件后缀:start.html v_hint:标注,一些要注意的点("超文本"就 是指页面内可以包含图片,连接,音乐,程序等非文字元素) CSS(Cascading Style Sheet): 1 级联样式表 2 负责页面的风格设计,样式和

前端三剑客之javascript

前端三剑客之javascript 给个小目录  一.JavaScript介绍  二.ECMAScript(核心) 三.BOM对象(浏览器对象) 四.DOM对象(文档对象模型) 总结: JS的组成: a)   ECMAScript 是什么:担当的是一个翻译的角色:是一个解释器:帮助计算机来读懂我们写的程序:实现+-*/, 定义变量:几乎没有兼容性问题: b)   DOM: 文档对象模型:文档指的就是网页:把网页变成一个JS可以操作的对象:给了JS可以操作页面元素的能力:document;有一些兼容

前端基础-HTML常用标签介绍

前端基础-HTML常用标签介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML是什么 1>.超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则: 2>.浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性): 3>.静态网页文件扩展名:".html "或 &qu

前端三剑客之CSS--flexable layout box 经典解读

前端三剑客之CSS--css3 flexbox layout(弹性布局)--完全解析 一.背景--                                                                                                                                            ? Flextbox Layout(弹性盒布局或伸缩盒布局),提供了一种更加有效的方式去布局.对齐和给          

前端之快速创建标签

一.问题 前端经常遇见需要动态生成标签,然后放在页面的某个位置,要创建每一个tag非常的麻烦. 二.利用的字符串格式化,加上多行字符串,追加在元素后面,就很迅速了 以下代码来源于网络 String.prototype.format = function (args) { var result = this; if (arguments.length > 0) { if (arguments.length == 1 && typeof (args) == "object&qu

【前端优化之拆分CSS】前端三剑客的分分合合

几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试</div> 慢慢的,我们发现这样做的很多弊端,单就样式一块,改一个样式会涉及到多处调整,所以慢慢的dom标签中的css全部去了一个独立的css文件 再后来,交互变得异常复杂,onclick也不好使了,所以js也分离开了,经典的html+css+javascript结构分离逐步清晰,三种代码各司其职

前端基础:HTML标签(下)

前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含textarea.select和label标签: 表单的属性:action,将表单数据提交到指定服务器的某个程序,程序收到表单提交过来的数据(即表单数据)做相应处理,比如:https://baidu.com:**method**,表单的提交方式get/post/update等,默认为get: 注意 f

第25课 《给外行讲前端三剑客》

今天是系列课程的第25课,我们今天来给外行介绍一下前端. 前端顾名思义就是比较靠前的那个工种,我们想象一下,我们一直向前.一直向前,最后会到哪里?一直往前就会最后到达用户那里.所以,前端就是最靠近用户的工种.有一个很形象的比喻:用户所能看到的一切都是前端.我们是最靠近用户的软件工程师,我们想让用户看见什么,用户就会看到什么.更进一步说,我们是保障用户体验的最后一道关 ,我们使用户感到:这个页面这么绚丽,这么页面这么舒适.别的方向的同行总会说,前端最轻松了,就写一些页面就可以了.但是我们就算别的不

web前端html实例-optgroup标签的用法介绍

此标签可能使用频率并不是太高,但是对于组织数据还是大有用处的,一般要和select标签配合使用,看一段代码实例一切就都明白了,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>we