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

一 : 科普一分钟

//其实我有很多奇思妙想的点子,被困在脑海中,往往这就是学习的动力
开发的时候有很多好看绚丽的页面是由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 href = "www.zzzzz.com">

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

    <base target = "_bank">

    `<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;
      
    }
  • 常用效果
  1. 文字阴影
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并不难,把它当成一个艺术品去完成,会有更好的收获.

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,117评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,328评论 1赞 293
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,839评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,007评论 0赞 206
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,384评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,629评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,880评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,593评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,313评论 1赞 243
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,392评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,052评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2赞 270

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1赞 92
  • html5新增标签
    HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 3,929评论 1赞 25
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,100评论 18赞 139
  • 关于HTML/HTML5（一）
    学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 1,948评论 0赞 16
  • 【原创】美术专业必学书籍
    【原创】美术专业必学书籍 文/我心我愿秀 美术专业必学的书籍有《外国美术纲要》，《外国美术简史》、《小写意花鸟教程...
    我心我愿秀阅读 1,299评论 2赞 3