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. CSU 1335: 高桥和低桥 （二分查找，树状数组）

    Description 有个脑筋急转弯是这样的:有距离很近的一高一低两座桥,两次洪水之后高桥被淹了两次,低桥却只被淹了一次,为什么?答案是:因为低桥太低了,第一次洪水退去之后水位依然在低桥之上,所以不 ...

  2. 日期在苹果手机上显示NaN的处理方法

    注意两点即可: 1.苹果只认识 yyyy/mmmm/dddd/  这类格式的日期 2.如果输出后还要进行处理日期对比,苹果默认会带中文字,如:年月日,需要转成上面1当中的日期格式在转时间戳进行比较 G ...

  3. 【Selenium】之谷歌、IE、火狐浏览器各个版本的浏览器驱动下载地址

    地址:chromedriver官网下载地址: http://chromedriver.storage.googleapis.com/index.html(失效了) http://npm.taobao. ...

  4. c++ 单例模式 对全局变量的替代

    前段时间要实习一个充值接口,创建了一个类(就叫类A好了),这个类A要和另外3个类进行交互,3个类对类A修改的数据是对其他类可见的.这种情况我想到了3个方法: 1.static 静态成员,静态成员为该类 ...

  5. jQuery DataTables添加自定义多个搜索条件

    效果如下: 一.在前台页面定义输入搜索条件的文本框 <div class="ibox-tools"> <span>年度</span> @Html ...

  6. C#反射Assembly 详细说明，有项目例子

    1.对C#反射机制的理解2.概念理解后,必须找到方法去完成,给出管理的主要语法3.最终给出实用的例子,反射出来dll中的方法 反射是一个程序集发现及运行的过程,通过反射可以得到*.exe或*.dll等 ...

  7. 一个stream!=NULL 的问题 fclose.c 47

    运行一段时间会出现如下错误提示:Debug Assertion Failed!Program:...File:fseek.cline:100Expression: (stream!=NULL) 点Re ...

  8. noip模拟题题解集

    最近做模拟题看到一些好的题及题解. 升格思想: 核电站问题 一个核电站有N个放核物质的坑,坑排列在一条直线上.如果连续M个坑中放入核物质,则会发生爆炸,于是,在某些坑中可能不放核物质. 任务:对于给定 ...

  9. （转）java位运算

    转自:http://aijuans.iteye.com/blog/1850655 Java 位运算(移位.位与.或.异或.非)   public class Test { public static ...

  10. js json 单双引号互换

    var _adrobj = JSON.stringify(address).replace(/\"/g,"'"); var _nstr = _adrdata.replac ...