HTML基础—插曲

简介: HTML基础—插曲

HTML基础学习



1:我们在网上添加图片的时候最好是缩略图,而不是直接在代码中限制图片的大小。可以为了用户减少流量。Alt=""属性是为了让图片在现实不出来时显示的文字,Title=""是我们鼠标放在图片上面显示的。

2:边框是标签style="border:1px solid red;";


这里如果是我们直接写个边框,只是会默认的把边框的颜色设置为白色,但是后面的那个solid red就是将颜色设置为红色的。


3:我们在标签中设置的标签,一个作用是让用户可以在浏览器中搜索到网页,另一个是设置编码格式。告诉浏览器应该使用那个编码格式来解析网页内容。


<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />



4:有序列表

<ol>
<li>你好</li>
<li>我好</li>
<li>他好</li>
<li>世界好</li>
</ol> 

这里的格式默认的是:1234,我们可以通过属性type来修改前面的顺序。

679140-20160117141250788-1734351516.png679140-20160117141252038-1081243181.png

679140-20160117141253382-538246271.png679140-20160117141254132-1223824941.png

若是将其换位type='I"这里前面就是大写的.



5:关于表格


一些常规的知识点我们应该知道,表示行,表示列。这里面有两个属性需要我们知道,cellspacing:表示表格之间的间距,而cellpadding表示每个表格内部的空间大小。

    <table border="1"width="350"height="300">
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
     </tr>
     <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
     </tr>
    </table>

679140-20160117141255335-88347132.png

这是刚开始的样式,是这样子的。我们加上属性cellspacing和cellpadding之后再看。


先添加cellspacing="20截图如下,我们发现每个小表格之间的间距变化了,"

679140-20160117141256366-785411741.png

这个效果我们知道了cellspacing属性的作用,而cellpadding属性是调节表格内容的距离的。

679140-20160117141257100-637643610.png


我们可以发现它内部的数字变化了,每个数字对于内部的距离是一定的。还有border="1"是表示边框的粗细线的。


合并单元格的做法:


是通过colspan="数字"和rowspan="数字"来实现的最终的效果。这里的数字是我们需要和并的单元格之间的相对的位置,位置是几,数字就写几就行。


水平对齐方式:align:left.right.center.


垂直对齐方式:valign:top.middle.bottom


表格的居中有个algin属性,这个写在里面的,指示将表格全部居中显示。



6:表单form


 <form>标签为表单标签,如果需要数据提交服务器,则需要将<input><textarea><select>等表单元素放到form中。


Type的可选值:submit(提交按钮)file(文件选择框),image(图片按钮),password(密码框),radio(单选按钮),reset(重置按钮),text(文本框),关于表单,我们知道只有表单元素才可以有name,并且name可以重复的。Name的属性是为了提交数据而我们的id属性的目的主要为了在客户端,可以通过js语言来操作某个元素。  



7:html不存在数据类型,所以不存在ture,false的说法。我们可以设置某个属性为只读属性,就是添加属性readonly="readonly",就是让其不能输入值,也可以将其设置为禁用属性,disabled="disabled";这里禁用的标签是不会提交到服务器的,只读的可以提交。  


8:get方法提交是把数据封装成了通过&连接键值对的方式,通过浏览器的地址栏,提交到服务器的,因为它请求的地址长度是有限的,所以不能通过get方式来提交文件,而且其在url中,是非常不安全的,对于post提交是封装到了数据报文中,一般是看不到数据的,是以报文的格式往服务器发送东西的。


格式也是通过&的方式以键值对的形式连接起来的,不再浏览器的URL中,相比较而言是安全的。


但是人家通过一般的工具也是可以截获数据的,我们要想安全,必须使用https协议来提交,这个是安全的,因为他对报文封装前进行了加密,即使获取到数据,也是加密的数据。  


9:图片滚动效果。<marquee></marquee>



可以通过这个标签来让图片进行滚动。里面的属性有direction="方向"设置其滚动的方向。Behavior是设置其单次还是来回滚动。Scrolldelay:滚动的速度,单位为毫秒数,默认为85.



679140-20160117141258428-461276606.png


10:<div>,<span>都是框,是块,层的东西,可以进行设计。把元素放到div中就是为了进行统一的设置,我们可以通过<div>来进行简单的局部的设计。来使用css来很是方便。

目录
相关文章
|
前端开发
前端基础 - HTML框架集之FrameSet
前端基础 - HTML框架集之FrameSet
84 0
|
前端开发
前端基础 - HTML常用标签
前端基础 - HTML常用标签
47 0
|
9天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
4月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
53 1
前端基础(十七)_HTML5新特性
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
29 2
|
3月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
38 1
|
4月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
228 1
|
5月前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
48 9
|
5月前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
27 4
|
7月前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
38 0
前端基础学习(一)HTML入门