web之HTML超文本标记语言
2024-04-22 01:53:47
1.什么是web web的概念
web概念概述
Javaweb :
*使用Java语言开发基于互联网的项目
*软件架构:1. C/S: Client/Server 客户端/服务器端
*在用户本地有一 个客户端程序，在远程有一 个服务器端程序如:QQ，迅雷...优点:
1.用户体验好
*缺点:
1.开发、安装,部署,维护麻烦I
2. B/S: Browser/Server 浏览器/服务器端
*
只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
*
优点:
1.开发、安装，部署，维护简单
*缺点:
1.如果应用过大，用户的体验可能会受到影响
2.对硬件要求过高
B/S架构详解
*资源分类:
1.静态资源:
*使用静态网页开发技术发布的资源。
*特点:
所有用户访问，得到的结果是一样的。
如:文本，图片，音频、视频，HTML,CSS, JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2.动态资源:
*使用动态网页及时发布的资源。
特点:
*所有用户访问，得到的结果可能不一-样。
*如: jsp/servlet, php,asp...
*如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
我们要学习动态资源，必须先学习静态资源!静态资源:
HTML :用于搭建基础网页，展示页面的内容
CSS :用于美化页面，布局页面
JavaScript :控制页面的元素，让页面有一些动态的效果2.什么是HTML
概念:
Hyper Text Markup Language 超文本标记语言
超文本:
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。标记语言:
由标签构成的语言。<标签名称>如html, xml
*标记语言不是编程语言 没有逻辑性
2.快速入门:
*语法:
- html文档后缀名 .html或者.htm
2.标签分为
1.围堵标签:有开始标签和结束标签。如<html> </html>2.自闭和标签:开始标签和结束标签在一起。如<br/>3.标签可以嵌套:
需要正确嵌套，不能你中有我，我中有你
错误: <a><b></a></b>
正确: <a><b></b></a>4.在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来5。html的标签不区分大小写,但是建议使用小写。
3.标签学习:
1.文件标签:构成html最基本的标签
html:html文档的根标签
head:头标签。用于指定html文档的一些属性。引入外部的资源
title :标题标签。
body :体标签* <!DOCTYPE html> : html5中定义该文档是html文档
2.文本标签:和文本有关的标签
*注释:<!--注释内容-->
* <h1> to <h6> :标题标签
* h1~h6:字体大小逐渐递减
* <p>:段落标签
* <br> :换行标签
* <hr> :展示一条水平线*属性:*color:颜色*width:宽度*size:高度*align:对其方式*center :居中*left :左对齐*right :右对齐<b><i><font>:
属性定义:
color :
1.英文单词: red, green, blue
2. rgb(值1，值2，值3) :值的范围: 0~255如rgb(0,0,255)
3. #值1值2值3 :值的范围: 00~FF之间。如: #FFOOFFwidth :
1.数值: width='20' ,数值的单位，默认是px(像素) I
2.数值%:占比相对于父元素的比例
4. 图片标签
4.列表标签:
有序列表:
ol:
li:
*无序列表:
* ul:
li:
5.链接标签:
- a:定义一个超链接
- 属性:
- href :指定访问资源的URL(统一 资源定位符)|
- target :指定打开资源的方式
self:默认值，在当前页面打开
_blank :在空白页面打开一个新的页面
6. div和span :
div:每一个div占满一整行。 块级标签
span:文本信息在一行展示， 行内标签内联标签
7.语义化标签:
html5中为了提高程序的可读性，提供了一 些标签。
1. <header> 头
2. < footer> 脚
8.表格标签
table: 定义表格
- width :宽度
- border:边框
- cellpadding :定义内容和单元格的距离
- cellspacing:定义单元格之间的距离。如果指定为e,则单元格的线会合为一条、
- bgcolor :背景色
- align:对齐方式.
tr:定义行
- bgcolor :背景色
- align:对齐方式
- td:定义单元格
- colspan:合并列
- rowspan:合并行
th:定义表头单元格
* <caption> :表格标题
* <thead> :表示表格的头部分
* <tbody> :表示表格的体部分
* <tfoot> :表示表格的脚部分
HTML标签： 表单标签
表单:
概念:用于采集用户输入的数据的。用于和服务器进行交互。
form:用于定义表单的。可以定义一一个范围，范围代表采集用户数据的范围
属性:
action:指定提交数据的URL
method:指定提交方式
分类:一共7种，2种比较常用
get :
1.请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2.请求参数大小是有限制的。
3.不太安全。post :
2.请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2.请求参数的大小没有限制。
3.较为安全。
表单项中的数据如果想要提交 必须指定name属性
表单项标签:
- input :可以通过type属性值，改变元素展示的样式
。type属性: - text :文本输入框，默认值
- placeholder :指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password :密码输入框 - radio: 单选框
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. -般会给每-个单选框提供value属性， 指定其被选中后提交的值
3. checked属性， 可以指定默认值
- checkbox: 复选框
*注意:
1.一般会给每一 个单选框提供value属性, 指定其被选中后提交的值
2. checked属性， 可以指定默认值- file:文件选择框
- hidden:隐藏域，用于提交一 些信息。
- 按钮:
submit :提交按钮，可以提交表单
button :普通按钮
image:图片提交按钮：src属性指定图片的路径
label :指定输入项的文字描述信息
*注意:label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
<form action="#" method="get"><label for="username">用户名</label>：<input type="text" id="username" name="username" placeholder="请输入用户名">密码：<input type="password" name="password" placeholder="请输入密码">性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female" checked>女<br>爱好：<input type="checkbox" name="hobby" value="shop">购物<input type="checkbox" name="hobby" value="java">编程<input type="checkbox" name="hobby" value="game">游戏图片：<input type="file" name="file"><br>隐藏域：<input type="hidden" name="id" value="aaa">取色器：<input type="color">生日：<input type="date" name="birthday"><br>生日：<input type="datetime-local" name="birthday">邮箱：<input type="email" name="email">年龄: <input type="number" name="age"><br><input type="submit" value="登录"><input type="button" value="一个按钮"><input type="image" src="First.html"></form>
- select: 下拉列表
子元素: option, 指定列表项<select ><option value ="volvo">Volvo</option><option value ="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select>- textarea :文本域
cols :指定列数，每一行有多少个字符
rows :默认多少行。<textarea name="文本域名称”value="文本域默认值" rows="行教”cols="列数">
</textarea>web之HTML超文本标记语言相关推荐
- Web前端—01HTML超文本标记语言
文章目录 一.Wed前端开发介绍 1.Web概述 2.Web起源 3.Web的特点 4.Web工作原理 5.URL介绍 二.HTML网页结构 1.HTML介绍 2.HTML基本结构 3.文档类型 4. ...
- 040_初识 web 前端 HTML 超文本标记语言
文章目录 1. web前端开发技术 2. HTML 页面结构 3. HTML 标签 3.1 文本标签 3.2 换行标签 3.3 列表标签 3.3 div 和 span 标签 3.4 图片标签 3.5 ...
- python进阶之web前端（01—HTML超文本标记语言）
目录 01.Web前端开发介绍 1.Web前端开发概述 2.Web起源 3.Web特点 4.Web工作原理 5.URL介绍 02.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HT ...
- Web前端之HTML超文本标记语言
文章目录 一.Web前端开发介绍 1.Web前端开发概述 1)什么是Web开发? 2)Web前端开发核心技术 (1)HTML语言(超文本标记语言,相当于一个整体的框架) (2)CSS(层叠样式表,用来 ...
- Web前端（一）HTML超文本标记语言
文章目录 一.Web前端开发介绍 1.Web概述 2.Web起源 3.Web的特点 4.Web工作原理 5.URL介绍 二.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HTML文 ...
- HTML教程，带你轻松掌握html超文本标记语言，web前端学习必备
有些初学web前端的小伙伴会比较迷惑,HTML到底是什么呢? 这里解释一下,HTML称为超文本标记语言,是一种标识性的语言. 它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Inte ...
- 路由器web网页管理界面goahead和Lighttpd、jQuery（JavaScript(js)众多框架中的比较老的一个）、超文本标记语言html
一.路由器web网页管理界面goahead 1.开源的轻量级WEB Server很多,比如GoAhead.Shttpd.Thttpd.Lighttpd.BOA.mathopd.minihttpd.ap ...
- HTML - 超文本标记语言 (Hyper Text Markup Language)
HTML - 超文本标记语言 (Hyper Text Markup Language) HTML是建设网站/网页制作主要语言. HTML是一种易于学习的标记语言. HTML使用像 <p> ...
- python---Web前端HTML(超文本标记语言)
文章目录 Web前端开发介绍 Web概述 Web起源 Web的特点 Web工作原理 URL介绍 HTML网页结构 HTML基本结构 HTML文档规范与注释 HTML标签 文本标签 列表标签 图片标签i ...
最新文章
- SQL SERVER中什么情况会导致索引查找变成索引扫描
- 大数据发展新契机：中国人工智能产业创新联盟在京成立
- 20172319 2018.10.12《Java程序设计教程》第6周课堂实践（补写博客）
- 自行车实现无人驾驶，背后究竟有何“天机”？
- PostgreSQL PL / java简介
- 计算机专业小三门要求,最新小三门选科要求有啥变化？附对比表
- Distinct源码分析
- 简析三星新专利，语音识别技术的新方法
- QTP11 5发布，改名UFT
- smartdeblur(图片模糊处理工具) v2.2
- Qt5下载安装及环境变量配置详解
- 塔设备设计手册_强烈推荐必备资料—化工设备设计手册 (上、下卷全)
- 以半桥驱动芯片FAN73933为例说明自举原理
- P61-指针-指针和数组
- 程序员 -- 当我彻底放弃自私自利后，前途变得一片光明，不能过多的只是关注自己的功夫，生活不能只局限在方寸虚拟世界里
- 软考中项：常考知识点及案例分析要点总结
- JavaScript常用的工具函数，不全面大家补充哦
- 怎么安装打印机驱动？有没有快捷的方法？
- 康乃德生物拟最高募资1.8亿美元：产品尚未上市，累计亏损11亿元
- 建站规划—基于私有化gitlab/node+hexo搭建博客网站