WEB HTML

一.Web基础作用即如何制作网页介绍

1.HTML(静态页面)

用来勾勒出网页的结构和内容

2.CSS(静态页面)

用来给网页化妆,美化页面

3.JavaScript(重点)

用来让网页呈现出动态的数据和效果

web三要素:HTTP协议,浏览器,服务器

二.XML和HTML的关系

1.XML

a.XML时可扩展标记语言,用来存储或传输数据:

--标签可扩展

--属性可扩展

--元素之间的嵌套关系可扩展

b.标签

双标签:<标签名></标签名>

单标签:<标签名/>

关系:<标签名/>=<标签名></标签名>

c.属性

--属性必须定义在开始标签上

--属性名=“属性值"

--属性名不能重复,且无序

d.元素

<标签名 属性=“属性值”>内容</标签名>

2.HTML

a.HTML是超文本标记语言,用来显示数据

b.实际HTML是语法固定的XML

--标签固定

--属性固定

—元素嵌套关系固定

c.学习HTML就是学习这些固定的标签,属性,嵌套关系

d.HTML基本结构

<!—html是唯一的根-->

<html>

<head>

<!—设置文档标题,编码,引入的资源-->

</head>

<body>

<!—页面上要呈现的内容-->

</body>

</html>

三.HTML解决乱码问题

1.创建HTML时需要将文件编码设置为utf-8

2.需要在<head>元素下,使用<meta>元素设置页面内容编码

四.<!DCOTYPE>定义html版本

五.基本语法:

1.元素介绍:

分区元素用于为元素分组,常用于页面布局:

a.块分区元素:<div></div>:div用来勾勒出页面的布局,便于开发页面

块级元素:默认情况下块级元素会独占一行;占据一个矩形区域,即元素前后都会自动换行:<p>, <div>, <hn>, <ol>, <ul>

b.行内分区元素:<span></span>

行内元素:不会换行,可以和其他行内元素位于同一行即横向布局;不会占据矩形区域,他只用来修饰段落中的几个字:<span>, <a>, <u>, <i>

1)块分区元素

<ol></ol>:有序列表order list

<ul></ul>:无序列表 unorder list

<li></li>:列表项list item,用在ol和ul里面

2)行内分区元素

—<i>:定义斜体字

<em>:定义着重文字

—<b>:定义粗体文字

<strong>:定义加重文字

—<del>:定义带删除线的文字

<u>:定义带下划线的文字

—<br>:手工换行

—实体引用:空格&nbsp;小于&lt;大于&gt

—<img>空标记,必须属性:src,常用属性:width,height

—<a href=“” target=“"></a>:超链接,href属性用来设置链接的目标,target属性用来设置打开目标的方式(_blank:新窗口打开,_self:本页面打开)

—<a name=“anchorname1>锚点一</a>:锚点是文档中某行的一个记号,用于链接到文档中的某个位置

<a href=“#anchorname1”>回到锚点一</a>

2.表格

用来组织结构化的信息,由一些称作单元格的巨型元素按照从左到右从上到下的顺序排列在一起形成,表格的数据保存在单元格中。

—定义表格:<table></table>

—创建行:<tr></tr>

—创建列:<td></td>

a.<table>元素:

border:设置边线

width/weight:设置宽高

align:设置文本是否居中

cellpadding:单元格(即td)边框与内容之间的间距

cellspacing:单元格之间的间距

b.<tr>元素:

align/valign

c.<td>元素:

align/valign/width/height/colspan/rowspan

colspan:跨列属性(<td  colspan=“2”>aaa</td>)

rowspan:跨行属性(<td rowspan=“2”>aaa</td>)

d.行分组

表格可以划分为3个部分:表头,表主体,表尾。分组的目的是为了方便对组内元素设置样式及编程(JS)

表头行分组:<thead></thead>

表主体行分组:<tbody></tbody>

表尾行分组:<tfoot></tfoot>

eg:

3.表单

表单用于显示,收集信息并提交到服务器。即从浏览器向服务器传输数据的手段。

表单二要素:Form元素,表单控件

a.<form></form>:表单,表示要将此元素中所涵盖的控件中的数据传输给服务器。

主要属性:

—action:表单提交的URL

—method:指出表单数据提交的方式

—enctype:表单数据进行编码的方式

b.表单控件:<input></input>:文本框,单选框等;其他元素: 标签,文本域,下拉框

—文本框:<input type=“text”/>

—密码框:<input type=“password”/>

主要属性:

value属性:由访问者自由输入任何属性

maxlength属性:限制输入的字符数

readonly属性:设置文本控件为只读

—单选框:<input type=“radio”/>

—复选框:<input type=“checkbox”/>

主要属性:

value:文本,当提交form时,如果选中了此单选按钮,那么value就被发送到服务器

name:用于实现分组,一组单选框或者复选框的名称必须相同

checked:设置选中(默认值)

—提交按钮:<input type=“submit”/>传送表单数据给服务端或其他程序处理

—重置按钮:<input type=“reset”/>清空表单的内容并把所有表单控件设置为最初的默认值

—普通按钮:<input type=“button”/>用于执行客户端脚本

主要属性:value:按钮的名字

—隐藏域:<input type=“hidden”/>在表单中包含不希望用户看见的信息

—文件选择框:<input type=“file”/>选择要上传的文件

—标签:表单中的文本,用于给控件设置显示名称

语法:<label for=“控件ID”>文本</label>

主要属性:for: 设置该文本所关联的控件ID,关联后点击标签等同于点击控件

—文本域:相当于多行文本框(大的文本框)

语法:<textarea>文本</textarea>

主要属性:

cols:指定文本区域的列数

rows:指定文本区域的行数

readonly:只读

—下拉选:下拉选择内容

<select>

<option value=“1”>Java</option>

<option value=“2”>C</option>

<option value=“3”>php</option>

</select>

时间: 2024-10-01 22:14:28

WEB HTML的相关文章

使用 IDEA 创建 Maven Web 项目 (异常)- Disconnected from the target VM, address: &#39;127.0.0.1:59770&#39;, transport: &#39;socket&#39;

运行环境: JDK 版本:1.8 Maven 版本:apache-maven-3.3.3 IDEA 版本:14 maven-jetty-plugin 配置: <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <configuration> <webAppSourceDirectory>${pro

使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

本文标签: WebScraper Chrome浏览器插件 网页数据的爬取 使用Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬虫中的登陆.验证码.异步加载等复杂问题. Web Scraper插件 Web Scraper 官网中的简介: Web Scraper Extension (Free!)Using our extension you can create a plan (sitemap) how a web site

shiro实现APP、web统一登录认证和权限管理

先说下背景,项目包含一个管理系统(web)和门户网站(web),还有一个手机APP(包括Android和IOS),三个系统共用一个后端,在后端使用shiro进行登录认证和权限控制.好的,那么问题来了web和APP都可以用shiro认证吗?两者有什么区别?如果可以,解决方案是什么?看着大家焦急的小眼神,接下来挨个解决上面的问题. web和APP可以用shiro统一登录认证吗? 可以.假如web和APP都使用密码登录的话,那没的说肯定是可以的,因为对于shiro(在此不会介绍shiro详细知识,只介

ASP.NET Web API相关

接收移动端上传的图片,示例代码: [HttpPost] [ApiSecurityFilter] public IHttpActionResult UploadImg() { string imgs = ""; try { System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; foreach (string key in files.AllKeys) { System.Web

WEB页面,WEB环境版本,数据库,整站备份脚本

#!/bin/bash # #WEB页面,WEB环境版本,数据库,整站备份脚本 #当发生某个原因导致整个服务器无法恢复时,利用上面备份的相关数据即可重做一台一样的服务器 date_a=`date +%Y%m%d-%H%M%S` mkdir -p /web_bak/${date_a}/conf &> /dev/null mkdir -p /web_bak/${date_a}/web &> /dev/null mkdir -p /web_bak/${date_a}/mysql &a

web新特性 之 WebSocket

详情参见:你真的了解WebSocket吗?     WebSocket系列教程   HTML5新特性之WebSocket WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实现了浏览器与服务器全双工(full-duplex)通信.其本质是保持TCP连接,在浏览器和服务端通过Socket进行通信. 服务端与客户端的连接不断开,实现全双工的操作.及服务端或是客户端都会给对方发送消息. WebSocke

配置resin web方式部署项目

写在前面,推荐下载resin4.0.47版本.其它版本没有测试 最近打算做一个小项目,然后容器选用了resin.想通过web提交war文件的方式 进行部署,更新代码也方便. 试了resin最新的版本(目前最新版本为4.0.53),提交war文件到webapps下面都是.tmp文件.百度google一通还是没找到解决办法. 看了下公司用的resin版本,选择4.0.47.下载后发现没最新版本的上传问题. 通过web提交war文件方式步骤如下: 步骤一:修改resin.properties.推荐配置

使用ansible快速部署一个主流的Web架构

拓扑: 拓扑说明: 两台服务器配置Keepalived+Nginx做双主模型的Load Balance,主机名为lb1和lb2 两台服务器配置lamp,用于处理动态资源请求,主机名为lamp1和lamp2 两台服务器配置varnish作为静态资源缓存服务器,主机名为varnish1和varnish2 两台服务器配置Nginx用于处理静态资源请求 额外需要一台服务器安装ansible,使用ansible批量管理所有服务器 关键技术点: 1. Keepalived配置了邮件报警脚本,当节点的状态发生

web网站升级备份脚本

#!/bin/bash # 一般web页面升级都是直接替换根目录下的对应文件,因此升级前备份对应的目录或者文件即可 web=/var/www/html #web根目录 dd="/data /admin /ps /css /bbs*" #web根目录下要备份的目录与文件,把要备份的目录或者文件,写入这个变量,可以使用*通配符. mkdir -p /web_bak &> /dev/null #创建备份所在的目录 for dd in $dd;do #列表循环 date_bak=

eclipse 创建maven web项目

前言: 前面那一篇讲解了Maven的作用以及详细的应用,不了解Maven的具体使用,请参读:http://www.cnblogs.com/hongwz/p/5456578.html,下面来说明一下IDE构建Maven项目. 1.新建Maven项目 1.1 File -> New -> Other 1.2 选择Maven Project ,单击Next 1.3 保持默认即可,单击Next 1.4 选择Archetype为 web app,单击Next 1.5 输入一些必要信息,单击Finish