web入门

web入门

HTML

html介绍

HTML作用：用于描述网页

• HTML是指超文本标记语言：Hyper Text Markup Language
• HTML不是编程语言，是一种标记语言

html文档结构

我们已学习了一些HTML元素的基础知识。单独使用这些元素并没有意义。它们需要结合起来，才能形成完整的网页界面。

• : 它是文档声明。
• **: **元素是整个完整页面的根元素。
• ：元素是一个容器。它包含了所有HTML页面的头部信息。这些信息用户不一定全都看见。这些信息包括搜索关键字，页面描述，CSS样式等。
• :

  这是我的宠物成长日记页面

  元素

  • 完整元素

  一个元素 = 开始标签 + 内容 + 结束标签

  • 空元素

  一些元素只有一个标签，元素的标签内附有一些额外信息。这样的元素叫做“空元素”。

  例如：就是一个空元素。它通常用来插入一张指定的图片。

  ---

  块级元素与内联元素

  块级元素：

  块级元素：其代码如块状显示。块级元素通常用于展示页面上结构化的内容。如：段落、列表、导航菜单、页脚等。一个块级元素不可被嵌套进内联元素中，但可嵌套在其它块级元素中。

  内联元素：

  内联元素：它常出现在块级元素中并包裹着一小部分文档内容。内联元素在形式上通常如行状显示。它通常出现在一堆文字之间。如，超链接元素，强调元素元素和元素都是内联元素。

  常用标签

  标题

  ~

  标题（heading）：

  定义最大的标题。

  定义最小的标题。

  浏览器会自动的在标题前后添加空行

  默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

  ---

  水平线标签

  ---

  标签在 HTML 页面中创建水平线。

  hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

  html注释

  ​ 可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

  ​ HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。

  ​ 注释写法如下:

  段落标签

  ​ HTML 可以将文档分割为若干段落。

  ​ 段落是通过p标签定义的

  注意：浏览器会自动地在段落的前后添加空行。（

  是块级元素）

  
  换行标签

  ​ 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
  标签。

  ​ 在 HTML 语言中，
  标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段：

  ​
  元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

  HTML文本格式化标签

  ​ HTML 中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写样式进行调整。

  与(bold)加粗标签

  与(italic)斜体标签

  • 区别： 与 定义粗体或斜体文本。 或者 意味着你要呈现的文本是重要的，所以要突出显示。

  ^与_标签

  • sup上标字
  • sub下标字

  标签

  • 必需属性
    • src属性：图像文件路径的地址包裹其中, 可在网页内容中嵌入图像。
    • 替换文字属性alt：该属性是图像的描述内容。当图像不能正常显示时，它负责说明

  标签

  超链接标签：对文本植入超链接

  • 空链接：HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。临时加的空链接，主要为了能更好的看到最终的效果。

    基本语法：

    链接文字
    其中“ # ”表示空链接。
    

  • 属性

    • href属性：超链接地址

    • target 属性：使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。

      • 属性值：_blank：打开新窗口

      提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。

    • id 属性：id 属性可用于在一个 HTML 文档中创建书签标记。

  HTML 头部

  元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

  可以添加在头部区域的元素标签为:

  图片库

  试着调整窗口,看看当图片没有足够的空间会发生什么。

  

  清除浮动-clear

  元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

  clear 属性指定元素两侧不能出现浮动元素。

  .text_line 
  { 
      clear:both; 
  }
  clear:both/right/left
  

  css 水平对齐（Horizontal Align）

  块元素对齐

  块元素是一个元素，占用了全宽，前后都是换行符。

  • p标签、标题标签、div标签等
  • 水平居中：文本居中 text-align：center；

  
   
       
       
  dinghuixiang
       
  dinghuixiang
       
  dinghuixiang
  
  

  中心对齐：使用margin属性

  块元素可以把左，右页边距设置为"自动"对齐。

    
  
  
    
    
  dinghuixiang
    
  dinghuixiang
    
  dinghuixiang
  
  

  注意：如果宽度是100％，对齐是没有效果的。

  使用position属性设置左，右对齐

  元素对齐的方法之一是使用绝对定位：

      p{
        position: absolute;
        right: 50%;
        background-color: #eee;
      }
    
  
  
    
    
  dinghuixiang01
    
  dinghuixiang02
    
  dinghuixiang03
  
  

  注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素

  使用float属性设置左，右对齐

  .right 
  { 
  float:right; 
  width:300px; 
  background-color:#b0e0e6; 
  }
  

  使用Padding设置垂直居中对齐

  CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:

  .center {
      padding: 70px 0;
      border: 3px solid green;
  }
  

  如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

  .center {
      padding: 70px 0;
      border: 3px solid green;
      text-align: center;
  }
  

  css 组合选择符

  组合选择符说明了两个选择器直接的关系。

  CSS组合选择符包括各种简单选择符的组合方式。

  在 CSS3 中包含了四种组合方式:

  • 后代选取器(以空格分隔)
  • 子元素选择器(以大于号分隔）
  • 相邻兄弟选择器（以加号分隔）
  • 普通兄弟选择器（以波浪号分隔）

  后代选取器

  后代选取器匹配所有指定元素的后代元素。

  以下实例选取所有

  元素插入到

  元素中:

  div p 
  { 
  background-color:yellow; 
  }
  /*选取所有div里面的p元素*/
  

  子元素选择器

  与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

  以下实例选择了

  元素中所有直接子元素

  ：

  div>p 
  { 
  background-color:yellow; 
  }
  /*选取div所有直接子元素p*/
  

  相邻兄弟选择器

  相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

  如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

  以下实例选取了所有位于

  元素后的第一个

  元素:

  div+p 
  { 
  background-color:yellow; 
  }
  

  普通相邻兄弟选择器

  普通兄弟选择器选取所有指定元素的相邻兄弟元素

  以下实例选取了所有

  元素之后的所有相邻兄弟元素

  :

  div~p 
  { 
  background-color:yellow; 
  }
  

  css 伪类

  CSS 伪类(Pseudo-classes)

  CSS伪类是用来添加一些选择器的特殊效果。

  由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

  语法

  伪类语法

  selector:pseudo-class {property:value;}

  css类使用伪类

  selector.class:pseudo-class {property:value;}

  anchor（链接）伪类

  在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

  a:link {color:#FF0000;} /* 未访问的链接 */ 
  a:visited {color:#00FF00;} /* 已访问的链接 */ 
  a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
  a:active {color:#0000FF;} /* 已选中的链接 */
  

  CSS - :first - child伪类

  您可以使用 :first-child 伪类来选择元素的第一个子元素

  所有CSS伪类/元素

  选择器	示例	示例说明
  :link	a:link	选择所有未访问链接
  :visited	a:visited	选择所有访问过的链接
  :active	a:active	选择正在活动链接
  :hover	a:hover	把鼠标放在链接上的状态
  :focus	input:focus	选择元素输入后具有焦点
  :first-letter	p:first-letter	选择每个 元素的第一个字母
  :first-line	p:first-line	选择每个 元素的第一行
  :first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
  :before	p:before	在每个 元素之前插入内容
  :after	p:after	在每个 元素之后插入内容
  :lang(language)	p:lang(it)	为 元素的lang属性选择一个开始值

  ---

  ---