个人总结—— HTML 篇

阅读更多
===============================html概述==============================
web是什么?

app是什么?

html是什么?

html5是什么?

web的工作原理是什么?
b/s
c/s
b:brower 浏览器
c:client 客户端
s:server 服务器

web相关技术?
服务器
php java asp

客户端
html css js


===============================html入门==============================
1、HTML

Hyper Text Markup Language
超级  文本  标记   语言

web 页面 是由 haml组成的,并且 以.html或.htm作为后缀的文档文件,各个页面

间,是通过超链接组织到一起的。

学习web的常用工具:
PS   记事本    浏览器(IE、Google Chrome、Firefox、Safari、Opera(欧朋)


代码编辑器(dw   HBuilder  webstorm)...



2、html基础语法

1.标记又称元素
语法:

① 封闭标记
<元素>
举例:
   

   ...

② 非封闭标记
<元素/>
举例:    
  
...

2.标记的嵌套、缩进

形成更复杂的语法,或者让功能进行叠加
缩进使得阅读效果更加理想


3.属性和属性值
打个比方 :
农夫山泉矿泉水  它的高度为20cm      则“高度”为它的:属性   “20cm”为它

的:属性值

语法:
①属性的声明必须放在开始的标记中
②一个元素可以有多个属性,属性之间用 空格 区分
属性值:
①属性和属性值之间 通过 = 连接 属性=值
②属性值 尽量用 引号 引起来

举例(citing):

文字


         


这是一个红色块


标准属性:
简单来说就是通用属性,基本上每个标签都会具有的属性。
id:标签在页面中的唯一标识
title:鼠标移入到标签上时所显示的的文字
class:定义(引用)样式表中的类样式
style:定义当前标签的  行内样式

citing:



字体



4.注释的作用、语法
①对代码进行说明
②整理思路

语法:



3、HTML文档结构

1.html页面组成

文档根标记:
根标记里的结构:

网页的头部:

网页的主体内容:

①head元素
包含的都是全局信息
title:网页的标题
meta:单标记,编码格式、关键字、描述...相关的全局信息
script:定义或引入javascript文件
link:单标记,引入外部样式表
style:定义内部样式表

②body元素
主体内容 ,包含很多显示给用户去看的信息。
1.特殊字符:
空格: 
>:>
<:&it
?:©
2.文本标记合集:
:加粗
:倾斜
:删除线
:下划线
:下标
:上标

~
:标题元素,通常用于文章的标题

:段落元素


:换行元素
:块级元素 通过css 实现布局
:行内元素

:水平线
:预格式化  保留文档中的格式  即保留文档中的 换行 和 空格 
 

整理:
div主要通过css实现布局   span主要用于包含普通文本并且定义样式

行内元素:s、b、u、i、span...
块级元素:div、p、h1~h6...

行内元素的作用:多数用于包裹文本,去实现文本的样式
块级元素:可以嵌套行内元素,但行内元素不允许嵌套块级元素。

citing:







作为一个刚进入it的小白还在学习js等语言   由于时间问题   今天HTML就总结这么多   供其它新人参考    明天我会具体贴出一些小事例和HTML进阶   希望更多的小白与我一起进步!




由于旅游了几天没更新   望海涵...


===============================html进阶==============================


1、图像和链接
URL: Uniform Resource Locator
      统一     资源     定位器
资源:一个网页中用到的不同类型文件: 图片  文档等
定位器: 查找资源的一种方式

↑基本为废话

URL:就是俗称的----路径
路径的种类:
1.绝对路径
2.相对路径
3.根相对路径

1.绝对路径:从文件所在最高路径往下的完整路径
citing:
D:\程序\aqy\vip\logo.png
如果访问网络资源:
http://www.baidu.com/vip_logo.jpg

2.相对路径:资源文件相对于【当前文件】的位置查找路径
①同级目录:直接用
②子级目录:先进入,在引用
③父级目录:先返回(../),在引用

3.根相对路径:
/:表示 当前 web站点在服务器上的根路径
/images/vip_logo.jpg

1.图像
语法:
属性:
src:引用上述讲到的路径
width:宽度
height:高度
title: ①鼠标移入的时候显示的文本   ②图片不显示的时候所代替的文本
尽量不要去修改width 和 height 会导致图片的失真  在只设置一个属性的情况下 图片会等比缩放

2.链接
用户通过鼠标移入 或 点击 完成页面跳转或改变当前状态 的就是链接
语法:
这是一个链接
属性:
href:链接URL(路径)
target:在新网页打开的方式  _self为默认值  如果想在当前页面打开,设置为_blank
name:定义锚点
①链接到普通页面
百度
②下载文档资源
txt、图片 ...
③电子邮件链接
内容
④链接到js
内容
⑤返回页面顶部的空连接
内容

锚点:
在网页上标记一个位置,从而随时跳转到这个位置上
①定义锚点
    其他标记需要用id定义
②链接到锚点




2、表格
表格也就是我们通常所说的单元格  可以有效的分类各种信息

1.创建表格
语法:
①表格

②行
③列

2.表格属性
width:宽度
height:高度
align:对齐方式    取值 :left,center,right
valign:设置行高
border:边框 设置宽度px
cellpadding:设置内边距
cellspacing:设置外边距
bgcolor:设置表格的背景颜色
colspan:跨列
rowspan:跨行
3.表格标题
语法:标题

4.表格的划分
表头:
表主体:
表尾:
5.表格的嵌套
允许在td中嵌套另一个表格


3、列表
1.列表类型:
有序:

    无序:

      列表项:


    • 属性:type
      有序取值:1,默认值,数字
      a,小写
      A,大写
      I,大写罗马数字
      start:起始编号

      无序取值:disc:默认,实心圆
      cirle:空心圆
      square:实现矩形
      none:无

      标签的嵌套:


      •  

            

        1.  




      2.自定义列表:
      语法:dl:声明自定义列表
      dt:定义标题
      dd:定义内容或者对标题的解释。
      这种方式我们在淘宝上回经常看到。也叫做图文并茂













      ===============================html收尾==============================



      1、结构标记
         1、作用
            为了提升代码的语义性
         2、结构标记
               1、header 元素
           语法:

      作用:表示信息部分的头部内容,页眉
             等同于
        
         ....
            

        2、nav 元素
           navigation : 导航
      语法:
      作用:表示或定义页面中的导航链接部分
             等同于
        3、section 元素
           语法:

      作用:定义文档中的节(主体内容中的某一部分)
             等同于

        4、article 元素
           article :文章
      语法:

      作用:定义与文字性相关比较强的内容,如:帖子,报纸文章、博客条目、微博信息
        5、footer 元素
           foot :脚
      语法:

      作用:定义页面中靠下的部分内容,页脚内容,多数会将 版权信息、友情链接 等相关内容放在此标签中。
      等同于:
        6、aside 元素
           语法:
      作用:定义页面的一些额外组成部分。
             一般情况下,边栏可以使用 该标记
      等同于:


      2、表单
         1、表单的作用
            收集用户信息,并将用户信息提交给服务器

            1、表单元素
            2、表单控件
         2、表单元素
            语法:

            属性:
                 1、action
            作用:定义表单被提交时所发生的动作。主要用于定义表单提交的地址
            默认 为 提交给本页
         2、method
            方式、方法
            作用:表单数据提交的方式
            取值:get 和  post
              get:获取,取得,获取
      post:邮寄,发送
            1、get :表单将以【明文】的方式将数据发送给服务器。安全性较低。有大小限制,大小限制为 2KB。
            常用场合:与搜索相关、无安全性要求的。
            2、post :表单将以 【隐式】的方式将数据发送给服务器。安全性较高。大小没有限制。
            常用场合:登陆操作、注册操作

            method 如果不写,默认值为 get
         3、enctype
                    作用:表单数据进行编码的方式
            取值:
              1、application/x-www-form-urlencoded
      默认的
      2、multipart/form-data
         适用场合:如果表单中有【文件】需要提交的话,那必须将enctype设置为此值
         4、name
            定义表单的名称
         5、id
            定义表单在页面中的唯一标识
           3、表单控件
              用不同的外观形式展现出来的用于接受用户数据的内容。
      常用表单控件:
        1、input 元素
        2、多行文本域(textarea)
        3、选项框 (select , option)

        1、input 元素
           语法:
           通用属性:
      1、type :根据 type 值 , 来创建不同的input 元素
      2、value :值,当前控件的值(默认值)
      3、name : 控件的名称
         使用场合:服务器
      4、id : 控件的唯一标识
         使用场合:当前页面
      5、disabled : 禁用

                   input 中的具体元素
           1、文本框与密码框
             文本框:type="text"
            
             密码框:type="password"
                    
             属性:
                   name:
           value:
           maxlength : 限制输入的字符数
           readonly : 设置元素为只读
           2、单选按钮 、复选框
              单选按钮:
      属性:
           name :除了定义名称为,还能够为单选按钮分组
           checked : 设置 默认被选中
      复选框:
      属性:
           name:定义名称 和 分组
           checked:设置默认被选中
           3、按钮
              1、提交按钮
         具备 提交 的功能,将表单中的数据提交给服务器
        
      2、重置按钮
         具备 默认值功能 ,将表单中的所有表单元素全部恢复成初始化状态
        
      3、普通按钮
         作用:无任何功能,可以由用户定义功能(js)
        
           4、隐藏域 、文件选择框
              1、隐藏域
         对服务器 来讲非常重要,单又不想给用户去看的东西,可以放在隐藏域里

         隐藏域是页面上看不到,但是能随着表单提交给服务器的控件

        
         name : 定义名称
         value : 定义值
      2、文件选择框
         打开本机 的 ”打开“对话窗口,并且选择文件,上传到服务器
        
         属性:
            name :定义名称
         注意:
           1、method 必须 为 post
           2、enctype 必须更改为 multipart/form-data

                    2、label 元素
               作用:关联 文本 与 控件的。点击文本就等同于点击它所关联的那个控件。
      语法:
      属性:
           for : 与当前文本相关联的控件的【ID】值
            3、选项框
               分类:
          1、下拉选项框
          2、滚动列表
      1、下拉选项框
         
          属性:
             name :名称
             id :唯一标识
             size : 大于1,则为滚动列表
             multiple:设置多选,(针对滚动列表有效)
         
                  属性:
             value :选项的值
             selected :预选中

            4、多行文本域 textarea
               多行的文本框
      语法:
      属性:
            readonly : 设置为只读
            cols : 设置文本域的 列数,一行能显示多少个字符,变相设置宽度
            rows : 设置文本域的 行数,整个文本域默认显示几行,变相设置高度。
            5、为控件分组
               语法:
        
      : 分组
         : 为分组指定标题
      3、其他标记
         1、浮动框架 iframe
            语法:
            属性:
                 src : 引入的网页URL
         width:宽度
         height:高度
         frameborder:引入的网页的边框宽度
         2、摘要与细节
            可以对网页上的某部分信息进行展开和收缩
            语法:
            
      : 定义细节内容
      : 定义细节内容的标题
         3、度量元素
            按照一定比例的方式去显示数值
            语法:
            
            属性:
               min :度量范围的最小值,默认为0
      max :度量范围的最大值,默认为1
      value:当前的度量值,默认值为0
         4、时间元素
            语法:
             
            属性:
              datetime:规定当前元素的日期和时间 用T进行分割
            eg:
               今年,我跟你过!

      控件取名:适用于 name  和  id
        name 属性值 , 可以 与 id属性值取值相同
        1、命名规范
           匈牙利命名法
           控件的缩写作为前缀
           文本框:type="text"  ==>  txt
           密码框:type="password" ==> txt
           单选按钮: type="radio" ==> rdo
           复选框: type="checkbox" ==> chk
           按钮(提交、重置、普通) : ==> btn

           隐藏域、文件选择框: ==> txt

           前缀后,跟着当前控件的 【作用名称】
           作用名称:每个单词的首字符 大写,其余小写。

          
          
          
        2、尽量保证见名知意
           txtLoginName
        3、尽量避免重复














      你可能感兴趣的:(web,html,chrome)