web准备总结:

  • 结构标准:相当于人的身体。html就是用来制作网页的。
  • 表现标准: 相当于人的衣服。css就是对网页进行美化的。
  • 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的

1.html介绍:

  1)、概述

  作用:HTML是负责描述文档语义的语言。

  注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行。

  html中,除了语义,其他什么都没有。

  

  比如,面试的时候问你,h1标签有什么作用?

    • 正确答案:给文本增加主标题的语义。
    • 错误答案:给文字加粗、加黑、变大。

  2)、HTML的网络术语

      网页 :由各种标记组成的一个页面就叫网页。

      主页(首页) : 一个网站的起始页面或者导航页面。

      标记: <p>称为开始标记 ,</p>称为结束标记,也叫标签。每个标签都规定好了特殊的含义。

      元素:<p>内容</p>称为元素.

      属性:给每一个标签所做的辅助信息。

2.html编程规范:

  • HTML是一个弱势语言
  • HTML不区分大小写
  • HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
  • HTML的结构:
    • 声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
    • head部分:将页面的一些额外信息告诉服务器。不会显示在页面上。
    • body部分:我们所写的代码必须放在此标签內。

  1)、编写HTML的规范

    (1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:<h1><font></font></h1>

    (2)所有的标记都必须小写。

    (3)所有的标记都必须关闭。

       双边标记:<span></span>

       单边标记:<br> 转成 <br /><hr> 转成 <hr />,还有<img src=“URL” />

    (4)所有的属性值必须加引号。<h1 id="head"></h1>

    (5)所有的属性必须有值。<input type="radio" checked="checked" />

   2)、HTML的基本语法特征

     (1)HTML对换行不敏感,对tab不敏感

      HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。换不换行、tab不tab,都不影响页面的结构。

      也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,我们发现有良好的缩进,代码更易读。要求大家都正确缩进标签。

     (2) 空白折叠现象

      HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

    (3)标签要严格封闭

3.html结构详解:

   1)、文档声明头

   2)、头标签

      #<title>

        主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速        的判断出当前网页的主题。

      #<meta> :提供有关页面的基本信息

        (1) http-equiv属性:向浏览器传达一些有用的信息,帮助浏览器正确的显示网页内容,与之对        应          的属性值为content,content中的内容其实就是各个参数的变量值。

        

<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
        (2)name属性

          

主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到。

<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />

只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO(search engine optimization,搜索引擎优化)。

    #<link>

    #<style>

   3)、body标签

      

    HTML标签中有两类标签:

    1.字体标签

    2.排版标签

    
    字体标签:
        h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
    排版标签
        <div> 、<span> 、 <br>、<hr>、<center>、<pre>
    超链接 <a>
    图片标签  <img>

   (1).字体标签

    # h1-h6

    # font 废弃

      <font face="微软雅黑" color="green" size="8">字体</font>

        # <b>或<strong> 粗体标签

        # 下划线标记 <u> 中划线标记<s>(已废弃)

        # 斜体标记 <i><em>(已废弃)

       # 上标<sup> 下标<sub>
         # 特殊字符
      
  • &nbsp;:空格 (non-breaking spacing,不断打空格)
  • &lt;:小于号(less than)
  • &gt;:大于号(greater than)
  • &amp;:符号&
  • &quot;:双引号
  • &apos;:单引号
  • &copy;:版权©
  • &trade;:商标

      显示<p>标签:这是一个HTML语言的&lt;p&gt;标签

 

   (2).排版标签

      段落标签<p>

               属性:align='属性值':对齐方式。属性值包括:left、center、righ 

      ok,下面这几句话,大家一定牢牢记住。HTML标签是分等级的。HTML将所有的标签分为两种:

        •     文本级标签:p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
        •     容器级标签:div、h系列、li、dt、dd。容器级标签里可以放任何东西。

      从学习p的第一天开始,就要死死记住:p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。

      错误写法:(把h系列的标签放到p里)

    块级标签 <div>和<span>  
  
      

      div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。


      span也是表达“小区域、小跨度”的标签,但是是一个文本级的标签。

      所以,我们亲切的称呼这种模式叫做“div+css”。div标签负责布局,负责结构,负责分块。css负责样式

     换行标签<br> (已废弃)

     水平线标签<hr>(已废弃)

     内容居中标签 <center>

     预定义(预格式化)标签:<pre>

    (3)、超链接

      超链接有三种形式:

      1、外部链接:链接到外部文件

<a href="new.html">点击进入到新网页</a>
<a href="http://www.baidu.com" target="_blank">进入百度</a>
 

      2、锚链接

      

      3、邮件链接:   

      <a href="mailto:zhaoxu@tedu.cn">联系我们</a>

      特殊几个链接:
      

        返回页面顶部的位置


         <a href="#">跳转到顶部</a>

        与js有关:


         <a href="javascript:alert(1)">内容</a>
         <a href="javascript:;">内容</a>

  1. javascript:;表示什么都不执行,这样点击<a>时就没有任何反应 例如:<a href="javascrip:;">内容</2
  2. javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。 例如:<ahref="javascript:alert()">内容</a>
 

超链接的属性


    • href:目标URL
    • title:悬停文本。
    • name:主要用于设置一个锚点的名称。
    • target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值:
      • _self:在同一个网页中显示(默认值)
      • _blank在新的窗口中打开
      • _parent:在父窗口中显示
      • _top:在顶级窗口中显示

blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。
也就是说,如果不写target=”_blank”那么就是在相同的标签页打开,如果写了target=”_blank”,就是在新的空白标签页中打开。

     (4)、图片标签 <img /> 

      img: 代表的就是一张图片。是单边标记。

      img是自封闭标签,也称为单标签。

      能插入的图片类型:

       能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。

        不能往网页中插入的图片格式是:psd、ai

     
      src属性:指图片的路径。  
         width:宽度
         height:高度
         title:提示性文本。公有属性。也就是鼠标悬停时出现的文本。
         align:指图片的水平对齐方式,属性值可以是:left、center、right
         alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。(有的浏览器不支持)

    (5)列表标签 <ul>、<ol>、<dl>

      #  无序列表<ul>,无序列表中的每一项是<li>

      注意:    li不能单独存在,必须包裹在ul里面;反过来说,ul的“儿子”不能是别的东西,只能有li。

          我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的。

      属性:    type="属性值"。属性值可以选: disc(实心原点,默认),square(实心方点),circle(空心圆)。

      # 有序列表<OL>,里面的每一项是<li>

      属性:type="属性值"。属性值可以是:1(阿拉伯数字,默认)、a、A、i、I。结合start属性表示从几开始。
        # 定义列表<dl>
       定义列表的作用非常大。
      <dl>英文单词:definition list,没有属性。dl的子元素只能是dt和dd。
          <dt>:definition title 列表的标题,这个标签是必须的
          <dd>:definition description 列表的列表项,如果不需要它,可以不加
      备注:dt、dd只能在dl里面;dl里面只能有dt、dd。
         dt、dd都是容器级标签,想放什么都可以

    (6)表格标签 <table>

        表格标签用<table>表示。        

        一个表格<table>是由每行<tr>组成的,每行是由<td>组成的。  

        

       <table>的属性:

      • border:边框。像素为单位。
      • style="border-collapse:collapse;":单元格的线和表格的边框线合并
      • width:宽度。像素为单位。
      • height:高度。像素为单位。
      • bordercolor:表格的边框颜色。
      • align表格的水平对齐方式。属性值可以填:left right center。
        注意:这里不是设置表格里内容的对齐方式,如果想设置内容的对齐方式,要对单元格标签<td>进行设置)
      • cellpadding:单元格内容到边的距离,像素为单位。默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0。
        注意不是单元格内容到四条边的距离哈,而是到一条边的距离,默认是与左边那条线的距离。如果设置属性dir="rtl",那就指的是内容到右边那条线的距离。
      • cellspacing:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0
      • bgcolor="#99cc66":表格的背景颜色。
      • background="路径src/...":背景图片。
        背景图片的优先级大于背景颜色。

    (7)表单标签 <fom>

      表单标签用<form>表示,用于与服务器的交互。表单就是收集用户信息的,就是让用户填写的、选择的。
      属性:
        name:表单的名称,用于JS来操作或控制表单时使用;
        id:表单的名称,用于JS来操作或控制表单时使用;
        action:指定表单数据的处理程序,一般是PHP,如:action=“login.php”
        method:表单数据的提交方式,一般取值:get(默认)和post
        form标签里面的action属性和method属性,在后面课程给大家讲解

 
												

python全栈开发day37-html的更多相关文章

  1. Python全栈开发【面向对象进阶】

    Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...

  2. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

  3. Python全栈开发【模块】

    Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...

  4. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

  5. Python全栈开发【基础三】

    Python全栈开发[基础三]  本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...

  6. Python全栈开发【基础二】

    Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...

  7. Python全栈开发【基础一】

    Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...

  8. python 全栈开发之路 day1

    python 全栈开发之路 day1   本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...

  9. Python全栈开发

    Python全栈开发 一文让你彻底明白Python装饰器原理,从此面试工作再也不怕了. 一.装饰器 装饰器可以使函数执行前和执行后分别执行其他的附加功能,这种在代码运行期间动态增加功能的方式,称之为“ ...

  10. 老男孩最新Python全栈开发视频教程(92天全)重点内容梳理笔记 看完就是全栈开发工程师

    为什么要写这个系列博客呢? 说来讽刺,91年生人的我,同龄人大多有一份事业,或者有一个家庭了.而我,念了次985大学,年少轻狂,在大学期间迷信创业,觉得大学里的许多课程如同吃翔一样学了几乎一辈子都用不 ...

随机推荐

  1. 求FIRST集和FOLLOW集

    花了点时间弄了个大概,希望对和我一样的人有所帮助.   文法如下: E -> TE'E' -> +TE'|εT -> FT'T' -> *FT'|εF -> (E)|id ...

  2. java操作Hbase

    public class Test { public Connection connection; // 用HBaseconfiguration初始化配置信息是会自动加载当前应用的classpath下 ...

  3. android 简单文件操作

    1.布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:too ...

  4. luogu P1070 道路游戏

    传送门 这里设\(f_i\)表示时刻\(i\)的答案 转移的话在\([i-p+1,i-1]\)之间枚举j,然后考虑从哪个点走过来 复杂度为\(O(n^3)\) // luogu-judger-enab ...

  5. python基础知识~配置文件模块

    一 配置文件模块   import ConfigParser ->导入模块  conf = ConfigParser.ConfigParser() ->初始化类二 系统函数  conf.r ...

  6. CSS :invalid 选择器

    如果 input 元素中的值是非法的,实时提醒 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  7. linux笔记_day06

    1.用户:表示符,凭证 2.用户组:表示符 进程也是有属主和属组的 安全上下文(secure context): 用户:UID,/etc/pawwd 组:GID ,/etc/group 影子口令: 用 ...

  8. centOS6.4 extundelete工具恢复rm -rf 删除的目录[转]

    原文:http://www.cnblogs.com/patf/p/3368765.html PS:补充下,我在fedora 19上运行的时候遇到的一个问题: 1 [root@localhost ext ...

  9. python 错误: UnicodeDecodeError: 'ascii' codec can't decode byte 0xe4 in position 0: ordinal not in range(128)

    参照:http://www.runoob.com/django/django-form.html 做了个表单提交和回显,但是报了以上错误 查资料发现是 python从request取值的是unicod ...

  10. 【Mysql sql inject】【入门篇】SQLi-Labs使用 part 2【12-14】

    这几关主要是考察POST形式的SQLi注入闭合 ## Less-12 - POST - Error Based- Double quotes- String ### 1)知识点 主要考察报错注入中的双 ...