HTML5-基础篇 ( 一 )-HTML5基础概述

作者: TianTianBaby223 | 来源:发表于2017-07-20 14:22 被阅读586次

一 : 科普一分钟

//其实我有很多奇思妙想的点子,被困在脑海中,往往这就是学习的动力
开发的时候有很多好看绚丽的页面是由HTM5构成,我个人来说看着很激动,脑袋中有着种种奇妙的想法,想去完成它,仿佛进入了魔幻世界一样,但是好的设计师的基础通常也是很不错的,能够熟练掌握基础才能完成你脑海中更完美的画面.下面简单分析一下基本H5的基本组成和简单操作.

二 : HTML代码基础

HTML 有着各种各样的标签, 其中大部分标签都是对应的 ,后一对通常加上 / 表示结束.

我们简单来了解一下

内容标签
类似<p> </p> -表示段落,

 <p> 好玩的东西一点点,快乐的东西一点点 </p>

我们还可以给这个标签添加一些属性方便我们区分

 <p id = "tzlove"> 好玩的东西一点点,快乐的东西一点点 </p>

当然标签之内不可能只有一个属性还会有很多属性

<p id = "tzlove"   class = "yellow"> 好玩的东西一点点,快乐的东西一点点 </p>

非内容标签
不是每个标签都是都对应的 / 不对应的我们叫它 非内容标签 或者 空标签 对于这种标签通常只有起始标签没有结束标签
常见的非内容标签有 <br>, img , hr ,<input> , <link> , <meta> 等等

根元素
整个网页的根元素 : html
我们常常添加的是 lang 和 manifest 属性
a : lang属性是网页的语言声明

<html lang = "en">
<html lang = "zh-CN">

b : manifest离线缓存
一旦设置后浏览器将需要缓存的文件保存至本地,这样下一次访问时,即使是在没有网络连接的情况下也能够正常显示页面内容

文档元数据
head 元素应该是HTML文档中所有元数据metadata 的集合之处
head 包含五部分 : title , link,style,base,meta元素

title --> 为标题,在浏览器标题栏显示.
link --> 定义了文档与外部资源的关系

<link   href="TZjoin.css" rel="stylesheet">  </link>
 ```
`base`用于标记文档的基础URL 地址

 `base` 还可以被用于设置全局的浏览器打方式,页面中所有的连接均在新窗口中打开

`<meta>` 元素是head中种类最为丰富的一类元素.
`<meta>` 元素虽然包含了多种多样的元数据,但它也被规定了必须包含 `name` ,  `http-equiv` 和 `charset` 其中一种

`内核渲染` --> `renderer` 这一属性 
急速内核

<meta name = "renderer"  content = "webkit">

引擎渲染

<meta http-equiv = "X-UA-compatible" content = "IE = edge,chrome = 1">

搜索引擎优化

<meta name = "keywords"  content = "H5">
<meta name = "description content = "教程页面">

当我们不希望页面被抓取公开时用robots 的 meta 标记

<meta name = `robots` content = "none">

如果希望文件和连接都能够被检索和查询

<meta name = "robots" conten = "all">

不希望显示拨号超链接

<meta name = "format-detection" content = "telephone = no">

避免自动识别邮箱

<meta name = "format-detection" content = "email = no">

对老式的手持设备优化

<meta name = "HandheldFriendly" content = "true">

刷新页面

<meta http - equiv = "refresh"  content = "300">

在页面0 秒以后调到百度主页

<meta http - equiv = "refresh" content = "0" URL = "https://www.baidu.com/">

设置超过缓存时间,用户访问页面时再次向服务器发送更新请求

<meta http-equiv = "expires" content = "wed,12 Aug 2017 10:10:23 GMT">

不需要转码优化

<meta http-equiv = "Cache-control" content = "no -siteapp">

区块元素

HTML5的主题是body 元素有不同的区块构成,html5 之前有多个div 标签组成很难清晰看出结构,下面我们现在看看新的区块何如把内容页面排布的.

a : 我们创建header元素对应头部区域以 h1 的形式放置了整个页面的标题

<body>
    <header>
        <h1>我是标题大人</h1>
     </header>
</body>

b : 导航 nav 元素来对应导航信息,页面的主菜单代码

<body>
   <header>
      <h1>页面标题</h1>
      <na>
           <u1>
               <li>栏目1</li>
               <li>栏目2</li>
               <li>栏目3</li>
               <li>栏目4</li>
           </u1>
      </na>
   </header>
</body>

c : section元素

在HTML5中,我们可以用新的section 元素对应不同的内容板块,section 还可以是某一章或者某一部分.

<section>
   <h2>社会内容</h2>
</section>

<section>
   <h2>体育新闻</h2>
</section>

为每个section板块元素添加文章 artcle元素

<section>
   <h2>社会内容</h2>
       <artcle>
          <h3> 沈阳小吃又添新菜</h3>
           <p>沈阳小吃又添新菜,让我们一起看看....</p>
        </artcle>

      <artcle>
          <h3> 环保问题</h3>
           <p>环保问题越来越被重视....</p>
      </artcle>
</section>

<section>
   <h2>体育新闻</h2>
      <artcle>
          <h3> 勇士夺得总冠军</h3>
           <p>杜兰特终于捧起奖杯.....</p>
      </artcle>
</section>

每篇文章 article 也可以有自己的header footer 或者section 元素

<article>
     <header>
        <h3>今天是我们工作室的第一天</h3>
     </header>
      <p>今天很开心,我们工作室成立的第一天,我们是一个快乐,向上的集体,追逐淡淡的阳光,还要淡淡的自己</p>
      <footer>
         <p>其实没有工作室,是我自己瞎编的了</p>
      <footer/>
</article>

d : aside 侧边栏

<aside>
  <h2>相关连接</h2>
   <p>包小姐,参加中国好女孩</p>
</aside>

f : aside 元素也可以加入一些相关文章推荐

<article>
     <header>
        <h3>今天是我们工作室的第一天</h3>
     </header>
      <p>今天很开心,我们工作室成立的第一天,我们是一个快乐,向上的集体,追逐淡淡的阳光,还要淡淡的自己</p>

     <aside>
        <p>工作室相关连接</p>
      </aside>
      <footer>
         <p>其实没有工作室,是我自己瞎编的了</p>
      <footer/>
</article>

分组内容元素

a : p

b : div 使用元素是比较高的,可以看做是一种容器,本身不代表任何意义
在HTML5 语义化大背景下,div看看做是一种最后的解决方案.

<div lang = "zh-CN">
   <p>第一段文字</p>
    <p>第二段文字</p>
</div>
<div lang = "en">
   <p>first sentense</p>
    <p>second sentense</p>
</div>

c : 列表元素常用的分组元素(无序)

  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
   </ul>

d : 如果想让上述有序展示 ol标签

  <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
   </ol>

设置为小写字母展示

  <ol type = "a">
    <li>one</li>
    <li>two</li>
    <li>three</li>
   </ol>

e : dl dt dd

dl是最外围元素 ,代表了一项内容的集合,存在多种类型的内容,每一项内容标题是用 dt来加以指定具体内容则以 dd 指定

<dl>
<dt>一班</dt>
   <dd>小红</dd>
<dt>二班</dt>
   <dd>小绿</dd>
<dt>三班</dt>
   <dd>小刚</dd>
</dl>

f : figure 元素展示于插图,图表,照片,代码等

<figure>
 <img scr = "tz.png" alt = "帅哥">
<figcaption>一个阳光帅气的男孩</figcaption>
</figure>

g : main 元素内容分组元素,每一张页面最多只能有一个main 元素.

<main>
   <article>
        <h1>这是一篇文章</h1>
         <p>这篇文章是关于....一个男孩的故事</p>
    </article>
</main>

<article>
        <h1>这是第二篇篇文章</h1>
         <p>这篇文章是关于....一个女孩的故事</p>
    </article>

文本元素

a : 连接

<a href = "home.html">my home</a>

在窗口中打开上述连接

<a> href = "home.html" target = "_bank">my home</a>

a 标签的嵌套

<a href = "home.html" target = "_blank">
   <section>
     <h1> 大家好 </h1>
     <p> 我是TZ </p>
   </section>
</a>

b : span 元素常常被用来组合文本, 结合了class 和 id 属性

<p>
我很<span class = "red"> 帅 </span> 也很<span class = "blue" >酷</span>
</p>

c : em 和 strong 元素语气加强,强调

<p><em>今天</em>是个好日子</p>

<p><strong>今天</strong>是个好日子</p>

d : big small 放大缩小元素

<p><big>也许生活有挫折</big></p>
<p><small>也不要忘记微笑</small></p>

f : q cite 元素 q 默认在头和尾加上双引号 cite 默认为斜体

g : br元素

<p>
你像一座孤傲的岛,有自己的城堡<br>
我是上不了岸的潮水,也只能将你围绕<br>
</p>

表单 form

method属性 ->方式
action属性 - >动作

<form method = "post"  action = "sever.php">
</form>

a : input

<form method = "post" action = "sever.php">
 <p><label>姓名 : <input name = "username" type = "text"  placeholder = "请输入您的姓名"></label></p>
</form>

电话

 <p><label>电话 : <input name = "tel" type = "tel"  placeholder = "请输入电话"></label></p>

邮箱

 <p><label>邮箱 : <input name = "email" type = "email"  placeholder = "请输入电话"></label></p>

日期

 <p><label>时间 : <input name = "date"  type = "date"  placeholder = "请输入电话"></label></p>

单选

<input  type = "radio" name = "sex"   value = "male  checked">男 </input>
<input  type = "radio" name = "sex"   value = "female ">女 </input>

勾选

<p>
 <label><input   type = "checkbox"  name = "rule"> 规章制度 </input></label>
</p>

下拉菜单项

<p>
 <label  for = "loveGirl"> 请选择帅哥 </label>
 <select>
   <option value = "1">大宝</option>
   <option value = "2">二宝</option>
   <option value = "3">三宝</option>
 </select>
</p>

提交按钮

<p><button>提交表单</button></p>

表格学生成绩表

<table>
<tr>
  <td>小红</td>
  <td>100</td>
</tr>
<tr>
  <td>小王</td>
  <td>60</td>
</tr>
</table>

当我们要横跨整行合并单元格用 clospan 属性

<table>

<tr>
<td cospan = "2" > 成绩单 </td>
</tr>
<tr>
  <td>小红</td>
  <td>100</td>
</tr>
<tr>
  <td>小王</td>
  <td>60</td>
</tr>
</table>

caption元素添加标题

<table>
<caption>成绩单</caption>
<tr>
  <td>小红</td>
  <td>100</td>
</tr>
<tr>
  <td>小王</td>
  <td>60</td>
</tr>
</table>

th 强调表头

<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
  <td>小红</td>
  <td>100</td>
</tr>
<tr>
  <td>小王</td>
  <td>60</td>
</tr>
</table>

表格颜色

<table>
<colgroup>
<col class = "deep-green" span = "2">
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
  <td>小红</td>
  <td>100</td>
</tr>
<tr>
  <td>小王</td>
  <td>60</td>
</tr>
</table>

三 : CSS基础

css声明

<body>
 background : #FFF000;
color : #445;
</body>

多个属性可以用空格分开

article{
  border : 1px solid : #000;
}

.block{
border-width : 5px;

}

我们要按照上右下左的顺序

.block{
border-with: 5px 50px 1px 20px;
}

继承性

每个diV或其他的标签都可能继承上一个的父级的标签属性,子级别没有定义同款属性,则使用父级属性

选择器

a : 标签选择器
```
h1{
 font-size : 30px;
}
```

b : 类选择器

.red{

color : #F00;
}

组合

h1.red{
color : #F00;
}

c : id 选择器

#label {
font-size : 30px;
}

d : 附加选择器

经过连接时候背景为红色

a : hover{
background : #FF0;
}

使得已经访问过的链接文字显示为红色

a : visited{
color : #FF0;
}

常用属性

a : 文字颜色

h1{
 color : #F00;
}

b : 文本缩进

p{
text-indent :2em 
}

c : 行高属性

h1{

color : #F00;
background : #ECF0F1;
height : 60px;
line - height : 60px;
}

d : 字体属性

h1{
font-family : "Courier New";
}

e: 设置原角属性

h1{
  border : 10px solid #FF;
  border - radius :50%;
}

f : 左边框

p{
 border-left : 5px splid #27AE60;
 background : #ECF0F1;
 padding : 5px 10px;
}

g : 块元素和行内元素

分块

h1,p{
display : inline
}

行内

h1,p{
display : block
}

浮动

h1,p{
float : left
}

相对定位 relative

默认情况下区块元素采用 relative 的定位方式

绝对定位 absolute

盒子模型
a : 内间距 padding 外间距 margin
b : box - sizing 属性
当我们设置 box - sizing属性值为border-box时候则设置的宽高包含内间距和外间距
当我们设置的属性值为 content-box时候则设置的宽高不包含内间距和外间距.
列表

<body>

<u1>
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
  <li>Link 4</li>
</u1>

</body>

设置列表颜色和图片

li{
      background:#c0392b;/*red*/
      color:#fff;
      list-style:none;
      
      padding:15px;
      margin:5px 0;
      
      text-indent:35px;
      background:#C0392B url(check.png) no-repeat 10px  10%;
      box-sizing:border-box;
      width:200px;
      float:left;
      margin-right:10px;
       
      /*用比例来写*/
      margin-right:4%;
      width:22%;
      min-width:120px;
      
    }

常用效果

文字阴影

h1{
    
    text-shadow: 0 8px 5px rgba(0,0,0,.5);
    
    text-shadow: 1px 1px 0 rgba(255,255,255,.7);
    
    text-shadow: -1px -1px 0 rgba(0,0,0,.7);

  }

在 X Y 上的阴影位移,阴影的模糊程度,阴影的颜色.

优先级
id 选择器 优先于 类选择器 优先于 标签选择器

四 : JS基础

非常简单,简单介绍一下语法

a : 创建变量

var  i = 3;

b : 运算符

console.log(1+1);
console.log(2*3);
console.log("1"+2) ; //12
console.log(1 > 2) ; //false
console.log(1 === 2) ; //false 全等运算符 要求数值和类型都相同才返回true

c : 条件语句

var answer = "a";
if (answer == "A"){
console.log("回答正确");//输出回答正确
}

switch (answer){
case  "A" :
    console.log("1");
    break;
case  "b" :
     console.log("2");
    break;
case  "c" :
     console.log("3");
     break;
}

d : 循环语句

for( var i = o; i < 4; i++ ){
console.log(i);
}

e : 数组

var arr = new Array(); 
arr = ["a","b","c"];

在末尾插入元素
arr.push("d");

//在开头插入元素
arr.unshift("e");

//删除开头数组
arr.shift();

//删除最后一个元素
arr.pop();

//删除某个位置函数

arr.splice(1,1);
从第一个数组元素之后开始删除一个数组元素

//插入元素到某个位置
arr.splice(1,0,"b");//在第一个元素后面插入元素 `b`

//将两个数组内容相连创建新的数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);

//数组元素倒叙
var  arr1 = [1,2,3];
arr1.reverse();


//数组中数据类型可以为不同
var arr = ["a" , 123, false];

//存储对象

var arr = [{name : "A" ,age:25},
                    {name : "B",age:26   }];

f : 日期和时间

//包含时分秒,年月日,时区
var now = new Date();
console.log(now);

//只要时分秒,年月日
console.log(now.toDateString());

//获得部分信息,获得小时信息
console.log(now.getHours());

//获得 月份 0-11 0代表 一月份
console.log(now.getMonth());

//获得天数 星期日输出 0
console.log(now.getDay);

//获取世界时间
console.log(now.getUICHours);


//参数创建时间
var date = new Date(2017,7,19,20,10);

//对日期进行修改
date.setHours(10);


//日期转化为毫秒
var date = "Fri Sep 19 2016";
Date.parse(date);

函数

 function TZFunction(){

console.log("hellow world");
}
TZFunction();

//加参数
 function TZFunction(id){

console.log(id);
}
TZFunction(3);


//赋值表达式定义函数 感觉像是OC 里的block

var testID = function(id){
console.log(id);
}
testID(111);

对象

var student{
  name : `xiaoming`,
 age : 22,
job : `student`

}

var faculty = new object();//Obeject 构造函数
faculty.name = "小明";
faculty.age = 20;
faculty.job = "student";

DOM操作

a : dom事件处理

<button id = "submit"> sunbmit</button>

 <script type="text/javascript">
   var submit = document.getElementById("submit");
   submit.onclick = function(){
       
       console.log("tzZZZZ");
       
       }
   
   </script>>

鼠标滑过button 上方时候输出"TZzzz"

function domove(){
               console.log("TZzzz");

           
           };
           submit.onmouseover = domove;

页面加载完毕输出 TianTianbaby

 function loadOver(){
                   
       console.log("TianTianbaby");

       }
       this.onload = loadOver;

this 相当于 OC 中的self

拖动效果

<body>

     <div id="logo"></div>
     <div id="box"></div>
     
     
     <script type="text/javascript">
     
     var logo = document.getElementById("logo");
     logo.draggable = true;
     
     /*去除事件的默认行为*/
     var box = document.getElementById("box");
     box.ondragover = function(event){
         event.preventDefault();
         
         };
         
/*把logo放入box 中*/
      box.ondrop = function(event){
          
          box.appendChild(logo);
          };
     </script>
     
</body>

body{
    poisition:relative;

    }
    
    #logo{
        width : 300px;
        height:200px;
        background:url(corn.png) center 50% no-repeat;
        position:absolute;
        left:0;
        
        }
        
     #box{
         width : 300px;
         height : 200px;
         background:#d4efdf;
         border-radius:10px;
         border:5px dashed #27ae60;
         position:absolute;
         right:0;
         
         
         }

五 : 总结

为了能得到更唯美的画面,为了更好能实现更好看的构想,那么请牢记语法和css 样式,那样才能把我们的idea更完美的展示出来,其实HTML5并不难,把它当成一个艺术品去完成,会有更好的收获.

HTML5-基础篇 ( 一 )-HTML5基础概述

一 : 科普一分钟

二 : HTML代码基础

区块元素

分组内容元素

文本元素

表单 `form`

三 : CSS基础

四 : JS基础

五 : 总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

网页前端后台技巧（CSS+HTML）

IT技术篇

html5开发知识

HTML5-基础篇 ( 一 )-HTML5基础概述

一 : 科普一分钟

二 : HTML代码基础

区块元素

分组内容元素

文本元素

表单 form

三 : CSS基础

四 : JS基础

五 : 总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

网页前端后台技巧（CSS+HTML）

IT技术篇

html5开发知识

表单 `form`