6.21 html简介

网页开发的三种技术

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

html

html是什么？

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

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

标记：标签，分为：单标签和双标签
在html中，不存在编程语言的语法，而是充斥着各式各样的标签。

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

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

sublime插件的安装

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

安装后，打出！后按tab键即可生成html5基本结构。

html5文档结构说明

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="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文件

<link rel="stylesheet" href="style.css">
<style>
    /*css代码*/
</style>
引入外部的js脚本文件

<script src="01.js"></script>
<script>
    // js代码
</script>

seo优化

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

常用基础标签

<hr> 换行分割线

<br> 换行

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

 注释

带有语义的标签

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

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

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

The <abbr title="People's Republic of China">PRC</abbr>was 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.定义锚点实现书签功能

<a href="http://www.baidu.com">百度一下，你就知道</a>
跳转到网页

<a href="03.html">点击跳转到03.html</a>
跳转到本地文件

<a href="#bottom">点击跳转到网页的底部</a>
<div style="height: 2000px;"></div>
<a href="" name="bottom">这里是底部</a>

跳转到文本的某个部分，根据name属性决定
列表

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

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

<style>
    ul,ol {
        list-style: none;
    }
</style>

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

<iframe src="http://www.baidu.com" frameborder="0" width="600" height="600"></iframe>

在当前页面嵌套一个网页，frameborder属性决定有无边框
项目列表描述

<dl>
    <dt>北京</dt>
    <dd>听说早几年北京的八大胡同非常出名</dd>
    <dd>北京的房价很便宜</dd>

    <dt>上海</dt>
    <dd>我在上海呆了四年</dd>

    <dt>湖北</dt>
    <dd>我在湖北呆了3年</dd>
</dl>

常用属性

alt：图像未能成功加载时的代替文本
width，height：图像的宽和高
ismap:定义图像映射的一张图像

通过img实现图像映射

map标签：定义图像映射

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

链接跳转的图像

将图片嵌套在a标签中

<img src="Koala.jpg" alt="考拉" width="300" height="300" usemap="#test-demo">
<br>
<map name="test-demo" id="test-demo">
<!-- shape 形状   coords 坐标  href 链接  -->
    <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" alt="">
    <area shape="circle" coords="200,200,100" href="http://www.baidu.com" alt="">
    <!-- <area shape="poly" coords="200,200,100" href="http://www.baidu.com" alt=""> -->
</map>
<!-- <a href="http://www.baidu.com">
    <img src="Koala.jpg" alt="">
</a> -->

表格

<table>表格

<caption></caption>表格标题

<th></th>表格眉页

<tr></tr>表格的行

<td></td>表格的单元格

<thead></thead>表格的头部

<tbody></tbody>表格的主干

<tfoot></tfoot>表格的尾部

<table border="1" frame="void">
<!-- 行使用tr标签来表示 -->
<!--border属性值为1或""-->   
    <thead>
        <tr>
        <!-- 单元格使用td来表示 -->
        <th>Name:</th>
        <th>Age:</th>
        <th>Sex:</th>
        <th>Hobby:</th>
    </tr>
    </thead>

    <tbody>
        <tr>
        <td>政委同志</td>
        <td>99</td>
        <td>???</td>
        <td>吃喝嫖赌</td>
    </tr>
    <tr>
        <td>政委同志</td>
        <td>99</td>
        <td>???</td>
        <td>吃喝嫖赌</td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
        <td>政委同志</td>
        <td>99</td>
        <td>???</td>
        <td>吃喝嫖赌</td>
    </tr>
    </tfoot>
</table>
</body>

posted @ 2017-06-26 10:55 frozeninferno 阅读(163) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

frozeninferno