HTML


一.HTML概念

网页,是网站中的一个页面,通常是网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件,俗称 HTML文件。

二.HTML简介

HTML全称:Hyper Text Markup Language(超文本标记语言)

  • 超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素
  • 标记:标签,不同的标签实现不同的功能
  • 语言:人与计算机的交互工具

三、HTML基本标签

3.1 结构标签

<html>:根标签       
    <head>:网页头标签
   		<title></title>:页面的标题      
    </head>      
    <body></body>:网页正文
</html>

3.2 排版标签

  • 可用于实现简单的页面布局

  • 注释标签:

  • 换行标签:< br>

  • 段落标签:< p>文本文字</ p>

    • 特点:段与段之间有空行
    • 属性:align对齐方式(left、center、right)
  • 水平线标签:< hr/>

  • 属性:

    • ​ width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)
    • ​ size: 水平线的粗细 (像素表示,例如:10px)
    • ​ color:水平线的颜色
    • ​ align:水平线的对齐方式

3.3 块标签

标签代码描述
div< div></ div>行级块标签,独占一行,换行
span< span></ span>行内块标签,所有内容都在同一行

3.4 基本文字标签

属性名代码描述
size< font size=“7”></ font>用于设置字体的大小,最小1号,最大7号
color< font color="#f00"></ font>用于设置字体的颜色
face< font face=“宋体”></ font>用于设置字体的样式

3.5 文本格式化标签

标签代码描述
b< b></ b>粗体标签
strong< strong></ strong>加粗
em< em></ em>强调字体
i< i></ i>斜体
small< small></ small>小号字体
big< big></ big>大号字体
sub< sub></ sub>上标标签
sup< sup></ sup>下标标签
del< del></ del>删除线

3.6 文本格式化标签

标签代码描述
h1< h1></ h1>1号标题,最大字号
h2< h2></ h2>2号标题
h3< h3></ h3>3号标题
h4< h4></ h4>4号标题
h5< h5></ h5>5号标题
h6< h6></ h6>6号标题,最小字号

3.7 文本格式化标签

无序列表:使用一组无序的符号定义, < ul>< /ul>

属性值描述用法举例
circle空心圆< ul type=“circle”>< /ul>
disc实心圆< ul type=“disc”>< /ul>
square黑色方块< ul type=“square”>< /ul>

有序列表:使用一组有序的符号定义, < ol>< /ol>

属性值描述用法举例
1数字类型< ul type=“1”>< /ul>
A大写字母类型< ul type=“A” >< /ul>
a小写字母类型< ul type=“a”>< /ul>
I大写古罗马< ul type=“I”>< /ul>
i小写古罗马< ul type=“i”>< /ul>

列表嵌套:无序列表与有序列表相互嵌套使用

代码举例:
	<ol>
		<li></li>
        <li></li>
        <li>
        	<ul>
                <li></li>
            </ul>
        </li>
	</ol>

3.8 图形标签

在页面指定位置处中引入一幅图片, < img />

属性名描述
src引入图片的地址
width图片的宽度
height图片的高度
border图片的边框
align与图片对齐显示方式
alt提示信息
hspace在图片左右设定空白
vspace在图片的上下设定空白

3.9 链接标签

  • 在页面中使用链接标签跳转到另一页面

    • 标签: < a href="">< /a>

    • 属性:href:跳转页面的地址(跳转到外网需要添加协议)

  • 设置跳转页面时的页面打开方式,target属性

    • _blank在新窗口中打开
    • _self在原空口中打开
  • 指向同一页面中指定位置
    • 定义位置: < a name=“名称”>< /a>
    • 指向: < a href="#名称">< /a>

3.10 表格标签

普通表格(table,tr,td)

<table>
	<tr>
		<td></td>
	</tr>
</table>

表格的列标签(th):内容有加粗和居中效果

<table>
	<tr>
		<th></th>
	</tr>
</table>

表格的列合并属性(colspan):在同一行内同时合并多个列

<table>
	<tr>
		<td colspan=""></td>
	</tr>
</table>

表格的行合并属性(rowspan):在同一列跨多行合并

<table>
	<tr rowspan="">
		<td></td>
	</tr>
</table>

四、HTML表单标签

html表单用于收集不同类型的用户输入数据

4.1 form元素常用属性

  • action表示动作,值为服务器的地址,把表单的数据提交到该地址上处理
  • method:请求方式:get 和post
    • get:
      • 地址栏,请求参数都在地址后拼接 path?name=“张三”&password=“123456”
      • 不安全
      • 效率高
      • get请求大小有限制,不同浏览器有不同,但是大约是2KB;一般情况用于查询数据
    • post:
      • 地址栏:请求参数单独处理。
      • 安全可靠些
      • 效率低
      • post请求大小理论上无限;一般用于插入删除修改等操作
  • enctype:表示是表单提交的类型
    • 默认值:application/x-www-form-urlencoded 普通表单
    • multipart/form-data 多部分表单(一般用于文件上传)​

4.2 input元素

属性值描述代码
text单行文体框< input type=“text”/>
password密码框< input type=“password”/>
radio单选按钮< input type=“radio”/>
checkbox复选框< input type=“checkbox”/>
date日期框< input type=“date”/>
time时间框< input type=“time”/>
datetime日期和时间框< input type=“datetime”/>
email电子邮件输入< input type=“email”/>
number数值输入< input type=“number”/>
file文件上传< input type=“file”/>
hidden隐藏域< input type=“hidden”/>
range取值范围< input type=“range”/>
color取色按钮< input type=“color”/>
submit表单提交按钮< input type=“submit”/>
button普通按钮< input type=“button”/>
reset重置按钮< input type=“reset”/>
image图片提交按钮< input type=“image”/>

4.3 select 元素(下拉列表)

  • 单选下拉列表:< select>< /select>
  • 默认选中属性:selected=“selected”
<select>
    <option selected="selected">内容</option>
    ...
    <option></option>
</select>
  • 多选下拉列表属性: < select></ select>
  • 多选列表:multiple=“multiple”
<select multiple="multiple">
    <option></option>
</select>

4.4 textarea元素(文本域)

多行文本框: < textarea cols=“列” rows=“行”>< /textarea>

五.HTML框架标签

  • 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
  • 使用框架的缺点:
    • 开发人员必须同时跟踪更多的HTML文档
    • 很难打印整张页面

5.1 框架结构标签frameset

  • 框架结构标签( < frameset>< /frameset>)用于定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积
    • <frameset rows="">< /frameset>
    • <frameset cols="">< /frameset>

5.2 框架标签frame

每个frame引入一个html页面

<frameset cols="*,*">
    <frame src="info1.html" />
    <frame src="info2.html" />
</frameset>

5.3 基本的注意事项

  • 不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用
  • 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在< frame>标签中加入:noresize=“noresize”。

占位符:空格 - “&nbsp”;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值