分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

HTML概述

发布时间:2023-09-06 01:45责任编辑:沈小雨关键词:HTML
一:HTML概述
HTML:Hyper Text Markup Language超文本标记语言,是一种专门用于创建Web超文本文档的编程语言,它能告诉Web浏览程序如何显示Web文档(即网页)的信息,如何链接各种信息。
1.html基本结构

<html>

<head>

<title>我的第一个网页</title>

</head>

<body>

我的第一个网页

</body>

</html>

<head></head>中主要包括网页的基本信息

网页标题

元数据标签
<body></body>中主要包括网页内容

2.网页基本信息
a.DOCTYPE声明

<!DOCTYPE html">

<html>

 ?<head> ??<meta charset=“utf-8" /> ??<title>无标题文档</title>

</head>
<body>

 ??网页主体 ?</body></html>

<meta ?charset="gb2312”>

<meta name=“搜索关键字” content=“内容描述" />

二:HTML标签
1.标题标签

 <h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>2.段落标签 <p>…</p>3.换行标签

<br/>

4.水平线标签

<hr/>

5.注释<!-- 注释内容 --> 特殊符号特殊符号 ???字符实体 ???示例空格 ?????&nbsp; ?????<a href="#">百度</a>&nbsp;|&nbsp;<a href="#">新浪</a>大于号(>) ?&gt; ???????如果时间&gt;晚上6点,就坐车回家小于号(<) ?&lt; ???????如果时间&lt;早上7点,就走路去上学引号(") ??????&quot; ?????W3C规范中,HTML的属性值必须用成对的&quot;引起来版权符号 ???&copy; ?????&copy; 6.图像标签 常见的图像格式

JPG
,GIF,
PNG,
BMP
<img src="path" alt="text" ??width="x" ?height="y" />

 <img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>7.链接标签 <a href="path" target="目标窗口位置">链接文本或图像</a> <a ?href="hetao.html" ?target="_blank">无漂白薄皮核桃</a>

<a ?href="hetao.html" ?target="_blank"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a>

 超链接使用场合 ?1.页面间链接:

从一个页面链接到另外一个页面
2.功能性链接

三:HTML列表
1.无序列表

 <ul> ?<li>桔子</li> ?<li>香蕉</li> ?<li>苹果</li> </ul> ul标签的type属性取值 ?disc ???项目符号显示为实体圆心,默认值 ?square ?项目符号显示为实体方心 ?circle ?项目符号显示为空心圆2.有序列表 ?<ol> ??????<li>桔子</li> ??????<li>香蕉</li> ??????<li>苹果</li> ?????</ol> ol标签的type取值 ?1 使用数字作为项目符号 ?A/a ??使用大写/小写字母作为项目符号 ?I/i ??使用大写/小写罗马数字作为项目符号3.定义列表 <dl> ?<dt>所属学院</dt> ???<dd>计算机应用</dd> ?<dt>所属专业</dt> ???<dd>计算机软件工程</dd>

</dl>

4.列表小结类型 ?????说明 ?????????????项目符号无序列表 ???1.以<ul>标签来实现 ???通过type属性设置项目符号

disc(默认)、square和circle
2.以<li>标签表示列表项
有序列表 ???1.以<ol>标签来实现 ???????通过type属性设置项目顺序
1(数字,默认)、A(大写字母)、a(小写字母)、I(大写罗马数字)和i(小写罗马数字)
2.
以<li>标签表示列表项
定义类表 ???1.以<dl>标签是实现
无项目符号和显示顺序
2.以<dt>标签定义列表项

 ???????3.以<dd>标签定义内容5.表格语法<table> ?<tr> ??<td>第1个单元格的内容</td> ??<td>第2个单元格的内容</td> ?????????…… ?</tr> ?<tr> ??<td>第1个单元格的内容</td> ??<td>第2个单元格的内容</td> ???????…… ?</tr></table>6.对齐方式表格对齐方式

默认对齐、居中对齐(align=center
)、左对齐、右对齐

单元格对齐方式
水平对齐方式、垂直对齐方式

属性 ?????????值 ??说明align

水平对齐方式 ?left ???左对齐
center ?居中对齐
right ??右对齐
valign
垂直对齐方式 ?top 顶端对齐
middle ?居中对齐
bottom ?底端对齐
baseline ???基线对齐

7.表格的跨列<table> <tr> ?<td colspan="n">单元格内容</td>

//n表示所跨的列数
</tr>

<tr> ?<td>单元格内容</td> ??????……</tr> ????......</table>表格的跨行<table ><tr> ?<td rowspan="n">&nbsp;</td>//n表示所跨的行数 ?<td>&nbsp;</td></tr><tr> ?<td>&nbsp;</td></tr></table>

四:表单标签

表单(form)

是用来接收用户信息的标签

表单语法:<form ?method=“post” action=“请求服务器端路径"> ?????<p> ?名字:<input name=“username" type="text" > ?</p> ?????<p> ?密码:<input name=“pwd" type="password" > ?</p> ?????<p> ???????<input type="submit" ??value="提交"> ???????<input type=“reset” ?value=“重置"> ??????</p> ?????</form>表单元素格式:<input ?type="text" ?name="fname" value="text"> ???属性 ?????说明 ???type ???????指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text ???name ?????指定表单元素的名称。 ???value ?????元素的初始值。type 为 radio时必须指定一个值 ???size ????????指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位maxlength ??type为text 或 password 时,输入的最大字符数 ???checked type为radio或checkbox时,指定按钮是否是被选中表单元素 ?文本框:<input ?type="text" ?name="userName" value="用户名" maxlength="20" > ?密码框:<input ?type="password " ?name="pass" ?size="20" > ?单选按钮:<input name="gen" type="radio" value=“boy" ?checked="checked" >男 ???????<input name="gen" type="radio" value=“girl" >女 ?复选框:<input type="checkbox" name="interest" value="sports">运动 ?????<input type="checkbox" name="interest" value="talk" checked="checked" >聊天 ?????<input type="checkbox" name="interest" value="play">玩游戏 ?下拉列表框:<select name="列表名称"> ???????<option value="选项的值" selected="selected">…</option > ???????<option value="选项的值">…</option > ?????????</select> ?按钮:<input ?type="reset" name="butReset" value="reset按钮"> ???<input ?type="submit" name="butSubmit" value="submit按钮"> ???<input ?type="button" name="butButton" value="button按钮"/> ???图片按钮:<input ?type="image" ?src="images/login.gif" /> ?多行文本域: ???<textarea ?name="showText" ?cols="x" ?rows="y"> ???????????文本内容 ?????????</textarea ?> ?文件域: ?????<form action="" method="post" enctype="multipart/form-data"> ?????<p><input type="file" name="files" /> ?????<input type="submit" name="upload" value="上传" /> ?????</p> ?????</form> ?表单元素高级属性:只读 readonly="true" ???????????????????????????????????????????????????????????????????禁用 disabled="true"

HTML概述

原文地址:http://blog.51cto.com/13507330/2085759

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved