码迷,mamicode.com
首页 > Web开发 > 详细

网页设计与制作第一章

时间:2017-10-22 23:40:04      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:功能性   空格   meta   跳转   第一章   copy   提示   设置   文本编辑   

(一)编写HTML步骤

第一步:新建一个记事本(以.HTML为后缀)

第二步:右击选择打开方式为文本文档

<html>

  <head></head>

  <body>

    hello.html

  </body>

</html>

第三步:编写内容

第四步:用浏览器打开查看内容

(二)html的基本结构

<html>

  <head></head><!--网页头部-->

  <body></body><!--网页的主体-->

</html>

(三)HTML的打开方式

第一种:用浏览器打开(浏览方式)

第二种:用文本编辑器打开(编辑方式)

补充:HTML全称hyper text markup language (超文本标记语言)

(四)标题标签

<title></title>

(五)meta标签

<meta name="keywords" content="内容">  keywords:关键词

<meta name="description" content="内容">  description:网页描述

 

<head lang="en"><meta charset="utf-8"/>设置网页的字符编码

(六)h标签

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

注意:h标签只要h1到h6,并且h1最大依次减小

(七)段落标签(会空一排)

<p></p>

(八)换行标签

<br/>换行写在要换的中间

(九)水平线标签

加粗:<strong></strong>

斜体:<em></em>

(十一)注释与特殊符号

空格  &nbsp;

大于号  &gt;

小于号  &lt;

引号  &quot;

版本符号  &copy;

注释:<!--被注释的内容-->    

用途:第一种:解释代码(在它之前)

第二种:当前代码现在用不到,可能以后用的到(把用不到的包括在里面)

(十三)a标签(超链接)

<a  href="跳转的路径"  target="目标窗口"></a>

注意:target的常用值:_self(表示当前窗口)  _blank(表示新窗口)

(十二)图片标签

<img  src ="图片地址"  alt="当图片找不到时提示的文字"  title="当鼠标放在图片上面时显示的文字"  wight="图片宽度"  height="图片的高度"/>

(十四)跳到顶部(在本部网部)

<body>

  <a   name="head">顶部</a>

  <a  href="#head">返回顶部</a>

</body>

(十五)

1.锚链接的使用步骤

第一步:定义锚点

<a  name="名字">锚点</a>

第二步:定义链接

<a  href="#锚点名">链接</a>

注意:#可以看出当前页面    锚点名:表示要跳转到指定的锚定的位置(就是定义锚点时,name属性的值)

2.功能性链接

例如:<a  href="mailtp:邮箱地址"></a>

块元素:无论内容多少,该元素独占一行(p、h1)

行内元素:内容撑开宽度左右都是行内元素可以排在一行(strong)

网页设计与制作第一章

标签:功能性   空格   meta   跳转   第一章   copy   提示   设置   文本编辑   

原文地址:http://www.cnblogs.com/hh9421/p/7712348.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!