关于HTML基础的总结

首先,我们要知道HTML是一种超文本标记语言,不需要编译,直接由浏览器执行。HTML由W3C维护,是通向WEB技术世界的钥匙。

一、HTML文件主体结构标签

1、文档声明 <!doctype html>

2、html标签<html></html>

3、head标签<head></head>里面会包含诸如页面标题,搜索引擎信息等相关的标签

4、body标签<body></body>页面的主体内容包含在里面。属性有background、bgcolor、text、link、vlink、alink

二、head头部标签

1、<title></title>定义标题

2、<meta/>

3、<link href=""></link>

相关的代码:

  • 定义字符集编码<meta charset="utf-8">
  • 刷新或者跳转<meta http-equiv="refresh" content="3;url=http://www.baidu.com" >过3秒跳到百度
  • 设置关键字<meta name="keywords" content="">
  • 设置页面描述<meta name="description" content="">
  • 定义网站标题图标<link rel="shortcut icon" href="图片地址.ico">(各种图标可以到icon网上找)

三、格式排版标签

  • <br/>换行
  • <hr/>分隔线
  • <p>段落
  • <pre>原样输出(按照原格式输出)
  • <h1></h1>标题标签
  • <center></center>居中
  • HTML实体:
  • * &nbsp; 空格
    * &lt;        <
    * &gt;   >
    * &quot;   “ 引号
    * &copy;   © 版权
    * &yen;   ¥
    * &times;  ×
    * &divide;  ÷
    * &reg;    ®

四、列表标签

  • ul 无序列表
  • li
  • ol 有序列表
  • dl 定义列表
  • dt 列表项的标题
  • dd 列表项目的描述

五、文本标签

  • em 强调 表现为斜体
  • strong 强调 表现为加粗
  • blockquote引用

六、链接和锚点

1、URL同一资源定位符,万维网的每一个文件都有一个URL

2、a标签属性:  href的值是URL、target新网页从哪个窗口打开(_self/_blank)、title 提示、download下载(H5新增)

3、锚点<a name="锚点的名字"></a>、使用超链接#跳到指定位置


七、图像

1、img标签的属性:

  • src
  • alt图片无法显示时显示文字
  • title
  • width/height
  • usemap

2、usemap用于图片的映射。一个图像被分成几个区域,当用户点击某一个区域时,将被链接到不同的文档中。

<a name="page1"><a/>

<img src="" usemap="mymap">

<map name="mymap" id="mymap">

<area shape="rect" coords="0,10,20,20" href="#page1">

八、表格

1、table标签 属性:border、width/height、cellspacing(单元格之间的间隙,默认2)、cellpadding(单元格与单元格内容之间的间隙,默认0)、align、bgcolor、background

2、tr标签 属性:

  • align(行内文字的水平对齐方式left/center/right)
  • valign(行内文字的垂直对齐方式top/middle/bottom)
  • height行高度
  • bgcolor


3、td标签属性:align、valign、width、height

4、th标签 表头

九、表单

1、form属性有action、method、target、enctype

  • <form action="http://www.baidu.com/s" method="get">

2、input

  • name
  • type(text默认文本框、password密码框、radio单选框、checkbox复选框、file文件上传、submit提交按钮、reset重置按钮、button普通按钮)
  • value type值不同value的意义不同
  • size 控制输入框宽度 适用于text/password
  • maxlength 最大输入字符个数 适用于text/password
  • checked 默认选中 适用于radio/checkbox
  • readonly 只读
  • disabled 表示不可用

<input type="text" name="wd" placeholder="请输入您的用户" size="50" maxlength="5" disabled>

3、button

  • type属性 submit(默认)、reset、button

4、select属性 name、size

5、option属性 value、diabled、selected(默认选项)

<select name="xueli">
<option value="boshi">博士</option>
<option value="shuoshi">硕士</option>
<option value="ben">本科</option>
<option value="zhuan">专科</option>
</select>

6、textarea属性 rows(高度)、cols(宽度)

<tr>
<td>自我介绍</td>
<td>
<textarea name="text" cols="30" rows="10"></textarea>
</td>
</tr>

7、label

<tr>
<td><label for="pwd" >密码</label></td>
<!-- 点击密码光标移动到后面的文本框 -->
<td><input type="password" id="pwd" name="pwd"></td>
</tr>

十、框架分帧

iframe

十一、HTML全局属性

title、id、class、style


  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值