返回

HTML:超文本标记语言

HTML:超文本标记语言

  • 可描述性语言*(浏览器上运行)*

创建html文件的步骤:

  1. 新建文本文档,更改后缀 .html / .htm
  2. 写基本结构
<html> <!--html标签-->
    <head> <!--头标签 -->
      <title>网页标题</title>
    </head>
  <body> <!--body标签-->
      主体内容
  </body>
</html>

定义标签&写内容

<标签名 属性="属性值">标签内容</标签名>	<!--双标签-->
<标签名 属性="属性值"/> 				<!--单标签-->

标签是否换行?

块级元素:自动换行标签

行内元素:不换行标签

我是<strong>标签 我是<em>标签 我们在同一行

<span> 说,我也是不换行标签

HTML 中的各种标签

文本标签

  • 标题标签:<h1> </h1> ~ <h6> </h6>

  • 段落标签:<p> </p>

  • 换行标签:<br/> —因为我在前面输入了<br/>所以我在这一行

  • 水平线 - <hr/> 效果如下:

  • 加粗:<strong>加粗</strong>

  • 倾斜:<em>倾斜</em>

  • 预格式文本标签:<pre></pre>

    pre标签中的所有内容都会被保存

    比如 空格 空格

    缩进 缩进

    换行

    换行

特殊符号

符号 样式 代码
空格   &nbsp;
大于号 > &gt;
小于号 < &lt;
引号 " &quot;
版权符号 © &copy;

图片标签

<img src="路径" width="宽度" height="高度" title="鼠标悬停文字" alt="显示不出来文字"/>
  • 路径:

    • 绝对路径:真实的物理路径(不推荐使用)

    • 相对路径:相对页面找图片的路径

      / 下一级文件

      ../ 上一级文件

  • 宽度和高度

    默认单位是像素px(可以不写单位)

超链接标签(点击能跳转)

<a href="目标页面路径" target="打开目标页面的方式">点击的内容</a>
  • 效果

    点击的内容

  • 路径:和图片写法一致

  • target:

    target_self 在自己窗口打开 默认值

    target_blank 打开新窗口

    target_top 在顶层窗口

    target_parent 父类窗口

功能性链接

链接邮箱

    <a href="mailto:shenyang@chinasoft.com">联系我们</a>
  • 效果

    联系我们

网址&FTP服务器

   <a href="ftp://ftp.chinasoft.com">FTP服务</a>
  • 效果

    FTP服务

锚链接(能够跳转到指定的位置)

  • 起名字

    <a name="标记"></a>
    
  • 跳转

    <a href="#标记"></a>
    

src和href区别?

href链接

href里的内容是与页面相关联的内容,但不是页面上的一部分,所以是引用。

src链接

src里的内容是要放置在页面上的,是页面的一部分,所以是引入。

列表

无序列表

    <ul  type="disc">
        <li>HTML语言</li>
    </ul>
  • 效果

type属性值:disc(默认)、circle、square

有序列表

    <ol type="a" start="3">
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ol>
  • 效果

type属性值:1(默认),a/A,i/I

start设置从几开始,必须是阿拉伯数字

定义列表

    <dl>
        <dt>数据库</dt>
        <dd>oracle</dd>
    </dl>
  • 效果

dt 定格

dd 缩进

表格

<table > </table>—表格标签

table属性

width 宽度

height 高度

cellspacing 单元格之间的距离

cellpadding 单元格距离文字的距离

border 边框粗细,注意不写没有边框

align 设置水平对齐方式 left/center/right(块级元素的属性)

tr&td属性

align 设置水平对齐方式 left/center/right(块级元素的属性)

valign 设置垂直方向对齐方式 top/middle/bottom

width 宽度(td)

height 高度(tr)

合并单元格:

合并列:发生在一行内
colspan="n"

要在同行内,删除单元格n-1个

合并行:发生在一列内
rowspan="n"

要在一列内,从当前行的下一行开始,到第n-1行,每一行都删除一个单元格

第一行rowspan=“3” — 要在第二行和第三行,都删除一个单元格

内联框架

将多个页面放到一个浏览器窗口里

好处:实现页面的重用

	<iframe name="main" src="wel.html" width="500" height="600" frameborder="0"> </iframe>

在内联框架中实现跳转:

	<a href="路径" target="main">箱包</a>
  • target 在哪个框架中显示该页面

    name=“main” 为起名字 src=“wel.html” 默认引入的网页

    width=“500” 宽度

    height=“600” 高度

    frameborder=“0” 边框 0 无边框

表单

能够让用户操作,进而获取到用户的数据

<form action="路径" method="提交方式">
    表单元素
</form>

method=“get/post”

get:默认值,显示提交,不支持中文,数据量小

post:隐士提交,支持中文,数据量大

表单元素

文本框
<input type="text" name="zh" maxlength="6" value="请输入账号"/>
  • 效果

type 设置表单元素类型 ,默认是text

name 设置表单名字的,提交数据时的前缀

maxlength 输入的最大长度

value 默认值

密码
<input type="password" />
  • 效果

按钮
    <input type="button" value="普通按钮"/>
    <input type="reset" value="重置按钮"/>
    <input type="submit" value="提交按钮"/>  <!--对应提交表单到action路径下-->
    <input type="image" src=" " />          <!--对应提交表单到action路径下-->
  • 效果

单选按钮
<input type="radio" name="sex" value="1"/>
  • 效果

一组单选按钮name必须一致,必须有value

复选框
<input type="checkbox" name="hobby" value="sing"/>
  • 效果

一组复选按钮name必须一致,必须有value

文件
<input type="file" />
隐藏表单域 (传值不被用户看到)
<input type="hidden" value="222" name="level"/>
下拉列表
<select name="city">
    <option value="China">中国</option>
    <option value="Korea">韩国</option>
    <option value="America">美国</option>
    <option value="Japan">日本</option>
    <option value="Britain">英国</option>
</select>
  • 效果

多行文本域
<textarea name="introduce" rows="5" cols="50">文本</textarea>
  • 效果

表单元素属性

checked 按钮默认选中
  • 设置单选按钮和复选按钮默认被选中

    checked=“true”

    checked=“checked”

selected 下拉列表默认选中
  • 下拉列表默认被选中

    selected=“true”

    selected=“selected”

readonly 设置只读
  • 设置只读

    readonly=“true”

    readonly=“readonly”

disabled 设置禁用
  • 设置禁用

    disabled=“true”

    disabled=“disabled”

comments powered by Disqus