/ HTML

HTML之初探

一、HTML概述

【what】Hypertext Markup Language 超文本标记语言
【why】用于制作编写各类网站和B/S应用
【when】各种静态和动态网页中,编写网站、B/S结构应用(行业应用、商城、游戏等)时
【how】

  1. 组成:由成对出现的标签组成
  2. 源码:静态网页后缀为.html或.htm,动态网页后缀有.asp .php .jsp等
  3. 开发工具 - 文本编辑器:记事本,Notpad++,EditPlus….
  • 专业工具:Dreamweaver,Visual Studio…
  1. 解释与执行工具:各种浏览器(IE,goole,火狐,360…)
  2. 特点:简易性、平台无关性
  3. 编写HTML网页步骤 1. 新建网页文件:
    使用记事本或文本编辑器notepad++或者其他专业工具新建网页文件,后缀为.html
  4. 使用记事本方式打开网页,编写网页源代码
  5. 编写HTML基本结构
  6. 在头部(head)中添加网页标题
  7. 在主体部分(body)添加网页内容

设计网页,必须掌握两块,第一,了解网页基本结构,即HTML基本结构;第二了解HTML常用标签。在设计网页时,往往我们会在网页中显示文字、图片等,则需要将对应的标签放置在body中来实现

二、HTML语法

HTML基本结构

【语法】

<br></br>
<br></br>
<title>此处可以放置网页标题</title><br></br>
<br></br>
<br></br>
此处用来放网页的内容<br></br>
<br></br>
<br></br>```
  
 【注意】

1. html网页基本结构包含2个部分,头部(head)和内容部分(body),所有在网页上要显示的东西都需要放在body标签中。
2. 标签书写时要严格遵守语法,属性值赋值时要用半角的””号,标签书写语法如下  

/语法1:成对出现的标签/


<标签名 属性1="" 属性2="">内容</标签名>


/语法2:空标签/


<标签名 属性1="" 属性2="" />

```
3. 大部分标签在编写时成对出现。如,前面()是开始标签,后面()是结束标签,中间是这个标签的内容。
4. 标签必须正确嵌套。如<title></title>。可以看到head标签的开始标签和结束标签将title标签包裹在里面。
5. 书写时按照标签嵌套级别进行缩进
6. HTML不区分大小写,但是规范要求使用小写

文本标签

  1. 标题 <h1> --- <h6>
    【语法】<h1>标题内容</h1>
  2. 字体
    【语法】<font size="" face="" color="">文本内容</font>
    【属性】:
    属性名作用
    color字体颜色,颜色单词:red,blue….,十六进制数字:#ffffff….#000000
    size字体大小
    face字体(黑体、宋体….)
  3. 字体形状
    【语法】
    <b> <i> <u> <sub> <sup>
  4. 段落
    【语法】<p align="" valign="">段落内容</p>
    【属性】:
    属性名作用
    align水平对齐方式:left,center,right
  5. 换行
    【语法】<br />
  6. 水平线
    【语法】<hr width="" size="" color="" />
    【属性】:
    属性名作用
    width宽,像素
    size设置水平线高度
  7. 特殊字符
    【语法】&名称;
    空格
  8. 注释
    【语法】<!-- 注释内容-->

图像标签

  1. 语法
    【语法】<img src="" alt="" border="" width="" height="" />
    【属性】:
    属性名
    src图片源文件URL地址
    width宽,像素
    height高,像素
    alt图片提示文本
    border边框宽度,像素
    align与文本对齐方式[top | middle | buttom]
  2. URL地址路径
    【相对路径】:相对于当前网页文件的路径
    文件位置打开位置
    同级直接用文件名
    上级../文件名
    下级子目录名/文件名
    【绝对路径】:文件所在位置的完整路径
文件位置打开位置
本地盘符/目录/文件名(避免使用)
网络网址[http://xx.xx.xx ]/目录/文件名
3. 滚动 【语法】`` 【属性】
属性名作用
scrolldelay延时
direction滚动方向[up | down | left | right]

超链接

  1. 语法
    【语法】<a href="" targer="">链接内容(文本、图像)</a>
    【属性】
    href 链接地址
    target打开位置
    _blank新窗口打开
    _self当前窗口打开(默认)
    _top顶级窗口打开
    _parent父窗口打开
  2. 链接地址href - 链接到其他网页(href=”URL地址”)
  • 链接到当前网页的锚点
(1)创建锚点标签<br></br>
<a name=""></a><br></br>
(2)创建锚点超链接:<br></br>
<a href="#锚点名">链接文本</a><br></br>```
- 链接到其他网页的锚点  
`<a href="网页地址#锚点名">链接文本</a>`
- 电子邮件链接  
`<a href="mailto:example@example.com%20">链接文本</a>`