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. Linux基础tree命令

    tree命令以树状图列出文件目录结构.不过某些Linux上(Centos 6.4)没有tree命令,本文将介绍安装方法. 常用参数: tree -d 只显示目录. tree -L 1 只显示第一层目录 ...

  2. KVC之-(id)valueForKey:(NSString *)key的实现原理与验证

    KVC之-(id)valueForKey:(NSString *)key的实现原理与验证 2.-(id)valueForKey:(NSString *)key的实现原理与验证; #功能:使用一个字符串 ...

  3. CRM认识的误区

    众所周知,CRM,就是平时说的“客户关系管理”,指用CRM来管理 企业与客户之间的关系.纵观整个IT圈子,做CRM的厂商比比皆是,每个厂商都有自己的产品宣言,令人眼花缭乱.但是领很多老板们不解的是,我 ...

  4. IT 服务管理工具 iTop

    iTop,作为全面支持ITIL流程的一款ITSM工具,具有强大的ITSM功能,开源免费.简单易用. iTop,即IT运营门户(IT Operation Portal),是一个开源web应用程序,用于I ...

  5. 磁盘 & 文件系统

    1. dumpe2fs –h /dev/sda1 查询整个磁盘情况( 其中后边的设备名可以换 ) 2. df –h , du –h 查询磁盘容量情况 3. 实体链接和符号链接 实体链接: ln mk. ...

  6. 无状态会话Bean、有状态会话Bean、CMP与BMP中，哪一种Bean不需要自己书写连接数据库的代码？

    无状态会话Bean.有状态会话Bean.CMP与BMP中,哪一种Bean不需要自己书写连接数据库的代码? A.无状态会话Bean B.有状态会话Bean C.CMP D.BMP 解答:C

  7. 嵌入式开发之示波器----tektronix tds2024 的使用

    http://jingyan.baidu.com/article/91f5db1bf715c01c7f05e39a.html http://cn.tek.com/learning/oscillosco ...

  8. 【转】HDC，CDC，CWindowDC，CClientDC，CPaintDC等等

     转载出处:http://blog.sina.com.cn/s/blog_447611f20100lirt.html 首先说一下什么是DC(设备描述表) Windows应用程序通过为指定设备(屏幕,打 ...

  9. poj 3249(bfs+dp或者记忆化搜索)

    题目链接:http://poj.org/problem?id=3249 思路:dp[i]表示到点i的最大收益,初始化为-inf,然后从入度为0点开始bfs就可以了,一开始一直TLE,然后优化了好久才4 ...

  10. double类型转化成string

    public static void main(String[] args) { double priceWithFreight = 1200.5698d; System.out.println(pr ...