实训笔记day02

实习第二天笔记

网页开发的三种技术

  • html：负责网页的结构
  • css：站在美学的角度进行美化
  • javascript：站在用户体验的角度设计网页的交互效果

html

html是什么？

定义：超文本标记语言(HyperText Markup Language)

超文本：文本、图片，链接、音乐、程序等

标记：标签<html>，分为： 单标签<meta>和双标签<html></html>

在html中，不存在编程语言的语法，而是充斥着各式各样的标签。

html运行环境是，在浏览器中我们见到的所有的网页本质上都是一个文本，这个文本称之为html。

html不是一门编程语言，只是一门标记语言，类似于一种工具。

sublime插件的安装

ctrl+shift+p 输入 install 选择 install package，在新的输入框中输入emmet，回车。

html5文档结构说明

  • <!DOCTYPE html>

html5文档声明头，想要完整的使用html5语法，必须要使用文档声明头，声明当前文件是html5文件。

  • <html></html>

双标签，定义html文档内容的结构，所有的html文档的内容都需要写在这对标签内部。

  • <head></head>

头部，通常情况下，里面写的内容是对于当前网页的一些预定义信息设置。

  • <body></body>

身体，网页里面要显示给用户看的内容，全部写在body里面。

网页预定义信息

  • <meta charset="UTF-8">

设定当前网页的编码格式。meta标签是一个单标签，通过charset属性，将其属性值设置为需要的编码，即可为当前的网页设置编码格式。

  • <meta name="author" content="李白">

设置网页的作者名。

  • <meta name="keywords" content="h5培训,html5">

设置网页关键字列表，用","分隔，用于搜索引擎。

  • <meta name="description" content="网页描述">

设置页面的描述。搜索引擎会把这个描述显示在搜索结果中。

  • <meta name="application-name" content="">

规定页面所代表的应用程序的名称。

  • <meta name="generator" content="Frontpage 4.0">

规定用于生成文档的一个软件包（不用于手写页面）。

  • <meta http-equiv="content type" content="text/html";charset="UTF-8">

规定文档的字符编码。

  • <meta http-equiv="default-style" content="the document's preferred stylesheet">

规定要使用的预定义样式表。

注释：上面content属性的值必须匹配同一文档当中的一个link元素上的title属性的值，或者必须匹配同一文档中的一个style元素上的title属性的值。

  • <meta http-equiv="refresh" content="300">

定义文档自动刷新的时间间隔。

  • <title>网页标题</title>

设置网页的标题。通常情况下，title要放在字符集设置的下面，防止出现乱码。

  • 引入外部的css文件

  • 引入外部的js脚本文件


seo优化

百度会对收录的所有的网站有一个评分系统，评分越高，位置越靠前。

常用基础标签

<hr> 换行分割线

<br> 换行

<h1>-<h6></h1>-</h6> 多级标题

<!--注释内容--> 注释

带有语义的标签

<em></em> 表示强调，斜体

<strong></strong> 表示强调，加粗

<abbr></abbr> 定义缩写，与title属性互相搭配使用

The PRCwas founded in 1948.

<address></address>

标签定义文档作者/所有者的联系信息。
如果 <address> 元素位于
<body> 元素内部，则它表示该文档作者/所有者的联系信息。
如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。
<address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。

<blockquote></blockquote> 定义块引用，通常情况下会产生缩进,引用大段内容。

<cite></cite>通常情况下，某段话引于某本书，可以使用cite进行说明，引用小段内容。

<ins></ins>定义被插入文本。

<del></del>定义被删除文本。

带有一定样式的标签[此类标签同时也带有语义]

<b></b> 定义粗体文本

<i></i>定义斜体文本

<big></big>定义大号字体文本

<small></small>定义小号字体文本

<sup></sup>定义上标文本

<sub></sub>定义下标文本

<bdo dir=ltr or rtl></bdo>定义文本显示方向，属性dir，值ltr，rtl

输出类标签

<pre>代码中样式原样输出

<code>定义计算机代码文本

<kbd>定义键盘文本

<var>定义变量

功能类标签

a标签

作用：1.定义超链接实现页面跳转 2.定义锚点实现书签功能

百度一下，你就知道
跳转到网页

点击跳转到03.html
跳转到本地文件

点击跳转到网页的底部


这里是底部
跳转到文本的某个部分，根据name属性决定

列表

<ul><li>...</li></ul>无序列表

<ol><li>...</li></ol>有序列表


此部分在head标签中，可以去掉列表前的序号。

页面嵌套


在当前页面嵌套一个网页，frameborder属性决定有无边框

项目列表描述


北京

听说早几年北京的八大胡同非常出名

北京的房价很便宜

上海

我在上海呆了四年

湖北

我在湖北呆了3年

结果显示：

图片

<img>

常用属性

alt：图像未能成功加载时的代替文本

width，height：图像的宽和高

ismap:定义图像映射的一张图像

通过img实现图像映射

map标签：定义图像映射

<area>:定义图像映射内部的区域

链接跳转的图像

将图片嵌套在a标签中

考拉








表格

<table>

<caption>表格标题

<th>表格眉页

<tr>表格的行

<td>表格的单元格

<thead>表格的头部

<tbody>表格的主干

<tfoot>表格的尾部


































Name: Age: Sex: Hobby:
政委同志 99 ??? 吃喝嫖赌
政委同志 99 ??? 吃喝嫖赌
政委同志 99 ??? 吃喝嫖赌

posted @ 2017-06-25 16:46  疯帽  阅读(179)  评论(0)    收藏  举报