美文网首页
HTML5学习笔记

HTML5学习笔记

作者: ClementCJ | 来源:发表于2019-04-24 03:03 被阅读0次

HTML是一种描述网页的超文本标记(不是编程)语言。

学习流程建议:

  • HTML
  • XHTML
  • Css
  • Css3
  • JavaScript
  • JQuery
  • HTML5

HTML5新特性

  • 用于绘画的canvas标签;
  • 用于媒介回放的video和audio元素;
  • 对本地离线存储的更好支持;
  • 新的特殊内容元素:article、footer、header、nav、section等;
  • 新的表单控件: calendar、date、time、email、url、search等;
  • 浏览器支持:Safari、Chrome、Firefox、IE。

HTML5语法

>声明

<!DOCTYPE html>

>基础标签

head、body:这两个标签都被定义在<html> </html>中

>标题

h1...h6:标记内容的大小和粗细

>段落

p:定义段落,定义一段话,不在p标签内的文字都会另起一行显示

>超链接

a:定义超链接

>图像

img:定义图像

>换行

br

<!DOCTYPE html>
<html> 
    <head lang="zh"> <!--lang定义文字的显示形式,en-英文,ch-中文-->
        <meta charset="utf-8"> <!--编码格式-->
        <title>HTML基础标签</title>
    </head>
    <body>
        <h1>h1标题</h1>
        <h2>h2标题</h2>
        <h3>h3标题</h3>
        <h4>h4标题</h4>
        <h5>h5标题</h5>
        <h6>h6标题</h6>
        <p>你好,中国</p>
        <a href="www.search.space.wehack">搜索引擎</a>
        <img src="image path">
        学习HTML5<br/> 需要学习样式和JS脚本
    </body>
</html>

HTML属性

  • 标签可以拥有属性为元素提供更多信息;
  • 属性以键值对出现;
>常用标签属性
  • <h1>: align对其方式,left、right、center
  • <body>: bgcolor背景颜色
  • <a>: target在何处打开链接,_blank,_self,_parent,_top
>通用属性
  • class:声明元素类名
  • id:声明元素唯一ID
  • style:声明元素的样式,使用CSS
  • title:声明元素的额外信息
<!DOCTYPE html>
<html> 
    <head lang="zh"> <!--lang定义文字的显示形式,en-英文,ch-中文-->
        <meta charset="utf-8"> <!--编码格式-->
        <title>HTML属性</title>
    </head>
    <body>
        <h1 align="center">h1标题</h1>
        <h2 class="h2ID">h2</h2>
        <p>你好,中国</p>
        <a href="www.search.space.wehack">搜索引擎</a>
    </body>
</html>

定义字体

  • b:定义加粗文字
  • em:定义斜体文字
  • i:定义斜体文字
  • small:定义小号字
  • strong:定义加重语气
  • sub:定义下标字
  • sup:定义上标字
  • ins:定义插入字
  • del:定义删除字

HTML样式

>标签
  • style:样式定义
  • link:资源引用
>属性
  • rel="sytlesheet":外部样式表
  • type="text/css":引入文档类型
  • margin-left、margin-right:边距
>三种样式表插入方法
  • 外部样式表
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  • 内部样式表
    <style type="text/css">
    body {background-color: res}
    p {margin-left: 20px}
    </style>
  • 内联样式表
    <p style="color: red;"> </p>

HTML链接

>链接数据
  • 文本链接
  • 图片链接
>属性
  • href:指向另一个文档的链接
  • name:创建文本内的链接
>img标签属性
  • alt:替换文本属性
  • waith:宽
  • height:高

HTML表格

  • table:定义表格
  • caption:定义表格标题
  • th:定义表格的表头
  • tr:定义表格的行
  • td:定义表格的单元
  • thead:定义表格的页眉
  • tbody:定义表格主体
  • tfoot:定义表格页脚
  • col:定义表格的页属性

HTML列表

  • ol:有序列表
  • ul:无序列表
  • li:列表向
  • dl:列表
  • dt:列表项
  • dd:描述
<!DOCTYPE html>
<html> 
    <head lang="zh"> <!--lang定义文字的显示形式,en-英文,ch-中文-->
        <meta charset="utf-8"> <!--编码格式-->
        <title>HTML列表</title>
    </head>
    <body>
        <ul type="cycle"> <!-- type:discycle cycle square-->
            <li>html</li>
            <li>css</li>
            <li>javsscript</li>
        </ul>
        <ol type="cycle">  <!-- type: A, a, 1 -->
            <li>html</li>
            <li>css</li>
            <li>javsscript</li>
        </ol>
        <dl>
            <dt>banana</dt>
            <dd>it's food</dd>
            <dt>cat</dt>
            <dd>it's a anmianl</dd>
        </dl>
    </body>
</html>

HTML块

  • 块元素:在显示时通常会以新的行开始,如h1、p、ul
  • 内联元素:通常不会以新行开始,如b、a、img
  • div元素:配合CSS样式使用,通常作为组合成HTML的容器
  • span:内联元素,可作为文本的容器
<!DOCTYPE html>
<html> 
    <head lang="zh"> <!--lang定义文字的显示形式,en-英文,ch-中文-->
        <meta charset="utf-8"> <!--编码格式-->
        <title>HTML块</title>
        <style>
          #dd{
            color:blue;
          }
          span{
            color:red;
          }
        </style>
    </head>
    <body>
        <p>这是一段话</p>
        <b>这是一个加重标签</b><a>这是一个超链接标签</a>
        <div id="dd">
            这是div标签中的内容
            <p><span>这是span标签中的内容</span>这是span标签外的内容</p>
        </div>    
        <span>
        </span>
    </body>
</html>

HTML布局

>div布局
<!DOCTYPE html>
<html> 
    <head lang="zh"> <!--lang定义文字的显示形式,en-英文,ch-中文-->
        <meta charset="utf-8"> <!--编码格式-->
        <title>div布局</title>
        <style type="text/css">
          body{
            margin:0px;
          }
          #container{
            width:100%;
            height:950px;
            background-color:darkgray;
          }
          div#head{
            width:100%;
            height:10%;
            background-color:aqua;          
          }
          #content_menu{
            width:30%;
            height:80%;
            background-color:aquamarine;  
            float:left; /*设置浮动,从左到右*/        
          }
          #content_body{
            width:70%;
            height:80%;
            background-color:blueviolet;          
            float:left;  /*设置浮动,从左到右*/        
          }
          #foot{
            width:100%;
            height:10%;
            background-color:black;          
            clear:both; /*清楚浮动*/        
          }
        </style>
    </head>
    <body>
        <div id="container">
           <div id="head">头部</div>
           <div id="content_menu">内容菜单</div>
           <div id="content_body">内容主体</div>
           <div id="foot">底部</div>
        </div>
    </body>
</html>
>table布局
<!DOCTYPE html>
<html> 
    <head lang="zh"> <!--lang定义文字的显示形式,en-英文,ch-中文-->
        <meta charset="utf-8"> <!--编码格式-->
        <title>table布局</title>
        <style type="text/css">
          
        </style>
    </head>
    <body marginwidth="0px" marginheight="0px">
        <table width="100%" height="950px" style="background-color: darkgray">
            <tr>
                <td colspan="3" width="100%" height="10%" style="background-color: aqua">头部</td>
            </tr>
            <tr>
                <td width="20%" height="80%" style="background-color: blue">左菜单</td>
                <td width="60%" height="80%" style="background-color: blueviolet">内容</td>
                <td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
            </tr>
            <tr>
                <td colspan="3" width="100%" height="10%" style="background-color: darkcyan">底部</td>
            </tr>
        </table>
    </body>
</html>

HTML表单

表单用于获取不同类型的用户输入

>常用表单标签
  • form:表单
  • input:输入域
  • textarea:文本域
  • label:控制标签
  • fieldset:定义域
  • legend:域的标题
  • select:选择列表
  • optgroup:选项组
  • option:下拉列表中的选项
  • button:按钮
<!DOCTYPE html>
<html> 
    <head lang="zh"> <!--lang定义文字的显示形式,en-英文,ch-中文-->
        <meta charset="utf-8"> <!--编码格式-->
        <title>HTML表单</title>
        <style type="text/css">
          
        </style>
    </head>
    <body>
        <form>
          用户名:
          <input type="text">
          <br />
          密码:
          <input type="text">
          <br />
          你去过那里?
          台湾<input type="checkbox">
          新疆<input type="checkbox">
          香港<input type="checkbox">
          <br />
          你是哪里人?
          安徽<input type="radio" name="addr">
          吉林<input type="radio" name="addr">
          北京<input type="radio" name="addr">
          <br />
          你的性别?
          <select>
            <option>man</option>
            <option>woman</option>
          </select>
          <br />
          <input type="button" value="按钮">
          <input type="submit" value="提交">
        </form>
        <textarea cols="30" rows="30">输入个人信息</textarea>
    </body>
</html>

相关文章

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

  • HTML5基本介绍

    HTML5基本介绍 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 ...

  • HTML5存储

    HTML5学习笔记 Web存储 HTML5 web存储,一个比cookie更好的本地存储方式。 什么是html5 ...

  • 2021-12-20

    HTML5学习笔记 input标签 新增placeholder calendar日历类 contenteditab...

  • HTML基础--基础标签

    跟着视频学习了HTML5,简要记录一下学习的笔记。 基础标签学习 H系列标签(Header1~Header6) -...

  • App与HTML的交互

    title: App与HTML的交互tags: 学习笔记,Android,App与HTML5的交互 App操作HT...

  • 常用标签&选择器

    本系列是前端基础的学习笔记,只是方便自己学习记忆的。 html、xhtml、xml、html5 一些历史知识而已啦...

网友评论

      本文标题:HTML5学习笔记

      本文链接:https://www.haomeiwen.com/subject/bbsigqtx.html