HTML5

HTML 是用来描述网页的一种语言。  用来显示信息。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

----------------------------------------------------------------------------------------------------------------------------------

<br/>      用于换行

<hr/>      定义水平线
<head>标签里面可以加属性,<head lang="en">   </head>英文格式;里面可以改成zh,是中文格式。
              大多数的标签都可以嵌套,
      例如:<p><a>this is test</a></p>
 
常用标签属性:
    <h1>:  align对齐方式,如果不设置align="right",则默认是居左的。
    <body>:  bgcolor背景颜色,background背景图片
    <a>:   target规定在何处打开链接元素的额外信息,如target="_blank"是在新的页面打开。还有其他几个类似的属性。
        例如:<a href="loginPage.html"  target="_blank">登录页面</a>  
通用属性:
    class: 规定元素的类名
    id: 规定元素唯一ID
    style: 规定元素的样式
    title: 规定,设置当前页面的标题信息
 
文本的格式化(有10种):
   <b>欢迎来到我的测试页面!</b>    会加粗字体
   <big>定义大号字体。要带有结束标签。
   <em>定义着重文字
   <i>定义斜体字,字体斜体
   <samll>定义小号字,字体变小
   <strong>定义加强语气
   <sub>定义下标字,
   <sup>定义上标字,
   <ins>定义插入字,相当于是在那行文字下加了一条线
   <del>定义删除字,就是在那行文字中画一条横线,相当于删除掉
 
HTML样式:
1、标签:
     <style>:样式定义
     <link>:资源引用
 
3种样式表插入方式:
 外部样式表:
          <link rel="stylesheet" type="text/css" href="mystyle.css">
           详细见例子。使用外部的样式表操作。
 
内部样式表:
        <style type="text/css">
              body{ font-size: 15px;">               p{margin-left:20px}
        </style>
 
内联样式表:
        <p style="color:red>
     例子:<a href="http://www.baidu.com" style="color:red">再次测试页面哈</a>
 
2、属性:
          rel="stylesheet":外部样式表
          type="text/css":引入文档的类型
          margin-left:边距
 
1、链接:
      文字链接
      图片链接
       <a href="http://www.baidu.com">点击我,百度首页</a>
       <a href="http://www.baidu.com"><img src="Images/login-page2.jpg"  width="200px" height="200px"  alt="我的图片"></a>  
2、属性:
       href属性:指向另一个文档的链接
       name属性:创建文档内的链接,本文档内部跳转
       <a name="tips">hello</a>  
       <a href="#tips">跳转到hello</a>  
3、img标签属性:设置页面中出现的图片的大小。
       alt替换文本属性。如果图片没有显示出来,通过它设置的内容会显示出来。
       width:宽,px是单位,是像素。
       height:高
 
 
表格:<table>
表格没有边框,则是border不写,或则等于0
<table boder="1" cellpadding="10">   设置表格的大小,cellpadding 合并单元格
<th>:表头。就是一列的最上方。
 
Html列表:
1、无序列表
     使用标签:<ul>,<li>,       如type=“disc”
     属性:disc(实体圆)、circle、square
2、有序列表
      使用标签:<ol>、<li>      也是用type属性。也有 start属性,就是说从哪个开始
      属性:A、a 、l、i、start----->就是说用下面的这些排序。
3、嵌套列表
      使用标签:<ul>  、<ol>、<li>
4、自定义列表
      使用标签:<dl>、<dt>、<dd>
 
 HTML块:
1.HTML块元素
      块元素在显示时,通常会以新行开始,如:<h1>、<p>、<ul>
2.HTML内联元素
      内联元素通常不会以新行开
       如:<b>、<a>、<img>
3.HTML<div>元素
      <div>元素也被称为块元素,其主要是组合HTML元素的容器
   注意:#divid p{
                     color:red;}    
           这个的使用,它的效果是只改变div中的p的颜色。
4.HTML<span>元素
       <span>元素是内联元素,可作为文本的容器
 
HTML布局:
1.使用<div>元素布局
      body{margin:0px;}  去掉页面四周的白边
 div#content_menu{
width:30%;
height:80%;
background-color:green;
float:left;
    
 float:left  ----->这个是用来让布局从左到右的,
div#footing{
width:100%;
height:10%;
background-color:blue;
clear:both;
}  
clear:both     -->是清除上面的浮动的效果。
 
2.使用<table>元素布局
 
Html表单:
1.表单用于获取不同类型的用户输入
2.常用表单标签:
  <form> 表单          <input> 输入域      <textarea> 文本框     <label>控制标签
   <filedset> 定义域   <legend>域的标签     <select>选择标签   
  <optgroup> 选项组     <option> 下拉列表中的选项     <button>按钮
常用的:
     1.复选框   如:苹果<input type="checkbox">
      2.单选按钮    如:请选择你的性别:
              男<input type="radio" name="sex">
              女<input type="radio" name="sex">
              其中sex如果不是一样,则不会实现单选按钮的作用
3.下拉列表:  如:
        请选择你常用的网站:
        <select> 
             <option>www.baidu.com</option>
              <option>www.sina.com</option>
             <option>www.google.com</option>
         </select>  
4.文本域: 
           如: <textarea cols="30" rows="30">请在此填写个人息</textarea>
5.按钮:   
         如:  <input type="button" value="按钮">
                   <input type="submit" value="提交">
 
HTML框架、背景和实体:
HTML框架:
1.框架标签(frame) 
        框架对于页面的设计有着很大的作用。
2.框架集标签(<frameset>)
        框架集标签定义如何将窗口分割为框架
        每一个frameset定义一些列行或列
        rows/cols的值规定了每行或每列占据屏幕的面积
3.常用标签
      noresize:固定框架的大小
      cols:列
       rows:行
4.内联框架:(重要)
         iframe
       <a href="www.baidu.com" target="_self">baidu</a> 
        属性target注意,target的值,_self 是在本页面内打开链接的内容 ,还有别的值
 
HTML背景:
1.背景标签:
        background
2.背景颜色
        bgcolor
3.颜色:
        颜色是由一个十六进制符号来定义,这个符号由红色,绿色,和蓝色的值组成(RGB)
        颜色值最小值:0(#00)
        颜色值最大值:255(#FF)
        红色:#FF0000
        绿色:#00FF00
        蓝色:#0000FF
 
HTML实体:
HTML中预留字符串必须被替换成字符实体
如:<、>、&
abcd&lt;htmlgt;       输出的结果是:abcd<html>
 
text-decoration:在HTML语言中表示属性规定添加到文本的修饰,如添加下划线
     可能的值:none   默认。定义标准的文本。
 
<marquee>滚动标签
<meta>  是关于数据的信息,位于head中。
 
 
 
 
 
原文地址:https://www.cnblogs.com/FocusIN/p/7995164.html