ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML学习

2021-09-06 15:33:07  阅读:146  来源: 互联网

标签:浏览器 提交 标签 学习 HTML 超链接 设置


系统结构

B/S架构:(java后端主走方向)

Browser / Server (浏览器/服务器的交互形式。)

Browser支持的语言: HTML 、Css、 JavaScript

S是服务器端server, Server端的语言 很多: C、 C++、 Java、 python.....

优点: 升级方便,只升级服务器端代码即可,维护成本低。

缺点:速度慢、体验不好、界面不炫酷

企业内部的解决方案都是采用B/S架构的系统,因为企业内部办公需要的一些系统 不需要炫酷,不需要特别好的用户体验,只要能做数据的增删改查即可。并且企业 内部更注重维护的成本。

C/S架构 Client / Server (客户端/服务器端的交互形式)

缺点:升级麻烦,维护成本较高。| 优点:速度快,体验好,界面炫酷。(娱乐型的系统多数是C/s架构的。)

HTMl

HTML:Hyper Text Markup Language(超文本标记语言),有大量的标签组成,每一个标签都有开始标签和结束标签。

超文本:流媒体、图片、声音、视频。

HTML开发的时候使用普通的文本编辑器就行,创建的文件扩展名是.html或者.htm

HTML专业的开发工具有:Dreamweaver、HBuilder.....

直接采用浏览器打开HTML文件就可以运行。

HTML是W3C(世界万维网联盟)制定的规范,每个浏览器生产厂家都会遵守规范。HTML规范目前最高的版本是HTML5,简称H5.

HTML制定了很多规范:HTML、XML、http协议、https协议.....

编写HTML时如果第一行加上<!doctype html>就是HTML5,不加就是HTML4.0。HTML不区分大小写。

语法格式

HTML注释格式:<!--注释内容-->

段落分段:<p> 段落内容</p>

标题字:<h1>一级标题</h1>

•   <h2>二级标题</h2>.........一共六级。

换行标记:在需要换行的地方加上<br>,br标签是一个独目标签。
水平线:<hr> 独目标记。
预留格式:<pre></pre> 里面的内容和自己写代码的时候的格式一样,格式不会改变。
删除字:<del></del>
插入字:<ins></ins>
粗体字:<b></b>
斜体字:<i></i>
右上角加字:10<sup>2</sup> 代表着在10的右上方加2,即10的平方。
右下角加字:10<sub>m</sub> m代表所加内容
字体标签:<font color=red size=50></font>
实体符号:因为大于号小于号会和代码冲突,所以用&lt;代表小于号,用&gt;代表大于号。以&开始以;结束
加空格:&nbsp;  
设置内容位置:align="center" 设置内容居中
表格:
<table border="1px" width="60%" height="50%"> 设置表格的边框为1像素宽度,整体宽度占窗口的60%,高度占50%
   <tr align="center"> 让这一行的表格内容居中
       <td></td>
       <td></td>
   </tr>
    <tr>
       <td align ="center"></td> 单单让这一个表格居中
       <td></td>
   </tr>
</table>
以上例子代表一个两行两列的表格

table代表整张表,tr代表一行,td代表一行中的一个格子,格子内容写在td之间。th和td差不多,知识用th的话单元格内的内容加粗并且居中,一般第一行用th

合并单元格:row合并的时候,删除下面的单元格,之后上面的单元格加rowspan=“合并个数”。col合并的时候没有要求colspan=“合并个数”。 也可以在各个表行加,thead,tbody,tfoot关键字,便于后期操作。 ​

设置背景颜色:在<body bgcolor =red> 设置背景色为红色
设置背景图片:在<body background="图片路径"> 设置背景图片
 
 插入图片:<img src="图片路径" width="100px" title="图片" alt="图片找不到"/> 

插入图片,宽度像素为100px,不要设置高度,高度会进行等比例缩放,否则会失帧。img标签为图片标签,src属于图片路径,title设置鼠标悬停时的信息。alt设置图片加载失败时显示的信息。

设置超链接:<a href="链接网站地址">链接名</a>

href:hot references 热引用,href属性后面一定是一个资源的地址,href后面的路径可以使绝对路径,也可以是相对路径,可以是网络中的某个资源的路径,也可以是本地资源的路径,链接名那里也可以加图片地址,变味图片链接。 超链接有一个target属性,可取值: _blank:新窗口 _self:当前窗口(默认的方式) _top:顶级窗口 _parent:父窗口

超链接的作用: 通过超链接可以从浏览器向服务器发送请求。 浏览器向服务器发送数据(请求: request) 服务器向浏览器发送数据(响应:response ) B/S结构的系统:每一个请求都会对应一个响应。 B --请求----- S S --响应---- B 用户点击超链接和用户在浏览器地址栏上直接输入URL的区别: 本质上没有区别,都是向服务器发送请求。从操作上来讲,超链接使用更方便。

无序列表:

 

 

有序列表:

 

 

表单:

 

 

 

 

form表单method属性:method="post"

get :采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。 post:采用post方式提交的时候,用户提交的信息不会显示在浏览器地址栏上。 当用户提交的信息中含有敏感信息,例如:密码,建议采用post方式提交。

系统默认为get方式。

超链接也可以提交数据给服务器,但是提交的数据都是固定不变的。超链接是get请求。不是post请求。

下拉列表:(支持多选)

 

 

form的file控件(用于选择和提交文件)

 

 

form的hidden控件

 

 

readonly和disabled

 

 

reaonly和disabled都是只读不能修改,但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交)

input控件的maxlength属性:设置文本框中的可输入的字符数量

 

 

HTML中元素的id属性:

 

 

HTML中的Div和span:

 

 



标签:浏览器,提交,标签,学习,HTML,超链接,设置
来源: https://www.cnblogs.com/jia-hao/p/15233913.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有