1. 基础模板

       <!DOCTYPE html>

       <html>

           <head>

               <meta charert="utf-8" />

               <title>第一个页面</title>

           </head>

           <body>

               day01

               第一个页面

           </body>

       </html>

2. 模板解读

   - <DOCTYPE>：指定文档类型，是文档声明，必须写在html文档的第一行，位于<html>标签之前，表明该文档是html5标签，规定html标签语法。

   - <html>：文档根标签，标注着文档（页面）的开始与结束。

     html的lang属性可用于网页或部分网页的语言。通常用于搜索引擎和浏览器的统计分析，不定义也没有什么影响。

     根据W3C推荐标准，您应该通过<html>标签中的 lang 属性对每张页面中的主要语言进行声明，比如：

         <html lang="en"></html>

   - <head>：文档的开头，可以引用脚本文件、指定样式表、书写逻辑代码块、提供元素信息。包含了文档的与智能数据（meta），如<meta charert="utf-8" /> 定义网页编码格式为utf-8。

   - body：文档主体标签，包含文档所有文本与从超文本内容

   - title：文档tag标题标签，设置文档tag的标题内容

3. meta(元标签)

       字符编码

       <meta charset="utf-8">

       <meta http-equiv="content-type"

       conntent ="text/html;charset=utf-8"/>

       SEO

       <meta name="keyword" content="8到12个以英文逗号隔开的单词或词语">

       <meta name="descreption" content="80字以内的一段话，与网站内容相关">

       移动适配

       <meta name="viveport" content="width=device,initial-scale=1,minium-scale=1,user-scaleble=no"/>

4. html标签纤细语法与注意点

   - 标签的语法：

     <标签名  属性1=“值1” 属性2=“值2”........>内容部分</标签名>

     <标签名  属性1=“值1” 属性2=“值2”........./>

5. html标签分类及语义

       1. <br> :换行

       2. <hr> :分割线

       3. <font> :修改文字大小,颜色

           <font color="red" size="10px">岂能尽如人意</font>

       4. <u> :下划线

       5. <i> :倾斜

       6. <s> :下划线

       6. <b> :加粗

           <b>论颜值，我秒杀宇宙</b>

6. 字符实体

   html特殊符号对照表

   注意:实体名称对大小写敏感

     内容      代码

     空格      &nbsp;

     >       &gt;

     <       &lt;

     &       &amp;

     ¥       &yen;

     版权      &copy;

     注册      &reg;

7. h系列标签

   语义:标记内容为一个标题，全称headline

   h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题，h1用作主标题（代表最重要的），其实是h2。。。

   虽然h1-h6标签的显示样式是从大到小，但再次强调：记忆HTML标签的显示样式是没有意义的

       <!DOCTYPE HTML>

       <html>

           <head lang='en'>

               <meta charset="utf-8">

               <title>Egon才华无敌</title>

           </head>

           <body>

               <h1>一级标题</h1><h2>二级标题</h2>

               <h3>三级标题</h3>

               <h4>四级标题</h4>

               <h5>五级标题</h5>

               <h6>六级标题</h6>

               <h7>没有七级标题</h7>

               没有七级标题

           </body>

       </html>

8. p标签

   语义:标记内容为一个段落,全程paragraph

       <!DOCTYPE HTML>

       <html>

           <head lang='en'>

               <meta charset="utf-8">

               <title>Egon无敌</title>

           </head>

           <body>

               <h1>Egon</h1>

               <p>论颜值，鹤立鸡群</p>

               <p>论才华，天下无敌</p>

           </body>

       </html>

前端html/css/script基础的更多相关文章

  1. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

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

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

  3. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  4. 前端之CSS基础

    前端之CSS 1. CSS CSS定义如何显示HTML元素. 当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 3.CSS语法 1)CSS实例 每个CSS由两部分组成: 选择器 ...

  5. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

  6. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  7. 第二篇：web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  8. 我的前端之旅--SeaJs基础和spm编译工具运用[图文]

    标签:seajs   nodejs   npm   spm   js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...

  9. [转]前端利器：SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

随机推荐

  1. 删除Win10的自带应用

    显示 Get-AppxPackage | Select Name, PackageFullName 按关键字删除 Get-AppxPackage *camera* | Remove-AppxPacka ...

  2. IDEA2017 导入 SVN上的 Myeclipse或Eclipse 项目

    从SVN上检出项目,不用打开. 关闭IDEA后选择 import project,导入后按F4 (改成eclipse按键模式后 按ctrl alt shift F4)进入 project struct ...

  3. spring的容器（控制反转、依赖注入）

    一.spring的容器 ”容器“是spring的一个重要概念,其主要作用是完成创建成员变量,并完成装配. 而容器的特点”控制反转“和”依赖注入“是两个相辅相成的概念. 控制反转:我们在使用一个类型的实 ...

  4. Linux进程状态转换图

    Linux进程状态 Linux内核中的进程状态 ◆运行状态(TASK_RUNNING) 指正在被CPU运行或者就绪的状态.这样的进程被成为runnning进程.运行态的进程可以分为3种情况:内核运行态 ...

  5. ffmpeg 日志系统av_log()

    一般使用Error, Warning, Debug3个级别即可(见下面的颜色).AV_LOG_QUIET 核心函数只有一个:av_log().使用av_log()在控制台输出日志的效果如下图所示. a ...

  6. 天地币：所用到的 Android Socket 通讯编程技术试验

    1.为了开发"天地币"这个Android手机项目,须要用到Socket编程. 2.天地币是一种类似于比特币的虚拟货币. 3.为了赚取CSDN的C币,须要写篇博客. 4.干脆将调试S ...

  7. 在WPF的DataGrid中对行添加单击事件

    在做的一个c#的项目中发现Datagrid没办法直接对鼠标单击进行响应,调用MouseDown事件也需要点击某一行第二次才能响应.所以借助EventSetter来简单的实现了一个. 界面部分的代码 & ...

  8. .NET程序调试技巧（一）：快速定位异常的一些方法

    作为一个程序员,解BUG是我们工作中常做的工作,甚至可以说解决问题能力是一个人工作能力的重要体现.因为这体现了一个程序员的技术水平.技术深度.经验等等. 那么在我们解决BUG的过程中,定位问题是非常重 ...

  9. JavaScript------字符串中各种方法

    参考“菜鸟教程” http://www.runoob.com/js/js-strings.html 1.search() var s = "Hello World"; alert( ...

  10. C#实现动态编译代码

    /*------------------------------------------------------------------------------ * Copyright (C) 201 ...