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. 通过camera + gallery android上传文件到html

    今天做项目的时候遇到一个问题:当html通过js调用input of type file时候,希望android手机的选择器可以同时出现“相机”和“图片”等,但通过下面代码 Intent i = ne ...

  2. android.util.DisplayMetrics-获取当前屏幕尺寸信息

    方法有两种一: DisplayMetrics metrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMet ...

  3. 380. Intersection of Two Linked Lists【medium】

    Write a program to find the node at which the intersection of two singly linked lists begins. Notice ...

  4. [转]Ubuntu 12.04.3 LTS 安装 Qt5.1.1

    参考文档如下: http://blog.csdn.net/astonqa/article/details/9767043 http://www.qtcn.org/bbs/apps.php?q=diar ...

  5. poj 1806 Frequent values（RMQ 统计次数） 详细讲解

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1806 题目大意:给你一个非降序排列的整数数组,你的任务是对于一系列的询问,(i,j),回答序列中出现次 ...

  6. Linux之手动设置IP地址

    一.引言 有时候我们装好了机器却发现网络没有设置,而服务器的机器一般都是没有界面的,那么该如何设置IP呢? 二.步骤 root用户,#vi /etc/sysconfig/network-scripts ...

  7. ECMall 中URL体系的改造思路

    EC系列的产品都已停止更新很久了,但其对中国中小电商企业的影响无疑是巨大的.很多公司,都是直接拿来即改,改了即用. 但他们都有个问题,代码是比较传统的开发模式过来的,尤其ecshop.ECMall系统 ...

  8. Spring Boot+Drools规则引擎整合

    目的 官方的Drools范例大都是基于纯Java项目或Maven项目,而基于Spring Boot项目的很少. 本文介绍如何在Spring Boot项目上加上Drools规则引擎. POM依赖 POM ...

  9. Android 编程下字库的使用

    在安卓操作系统下对于 TextView 字体的支持很有限,默认情况下 TextView 的 typeface 属性支持 "Sans","serif"," ...

  10. ActiveMQ 无法启动 提示端口被占用 解决方案

    http://bob-zhangyong.blog.163.com/blog/static/17610982012729113326153/ ————————————————————————————— ...