HTML基础

HTML

B/S和C/S

  • B/S软件结构
    • 客户端<---->服务器端
  • C/S结构
    • 浏览器<---->服务器端

前端的开发流程

  • 美术实现ps-------------> 前端HTML5-------------> jsp
（网页设计师根据        (前端工程师将设计     (Java程序员
需求设计网页）-----------> 做成静态网页)-------->动态网页)

网页的组成

  • 内容（结构）页面中可以看到的数据。
  • 表现 页面中的展现形式。
  • 行为 页面中的元素与输入设备交互的响应。

页面结构分析

  • header 标题头部区域的内容（用于页面或页面中的一块区域）。
  • footer 标记脚部区域的内容（用于整个页面或页面的一块区域）。
  • section Web页面中的一块独立区域。
  • article 独立的文章内容。
  • aside 相关内容或应用（常用于侧边栏）。
  • nav 导航类辅助内容。

HTML5简介

  • 超文本标记语言
  • 标签标记网页，网页是一种文本文件。
  • HTML 5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。
  • 这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

W3C标准

  • World Wide Web Consortium万维网联盟。
  • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构。
  • http://www.w3.org/
  • http://www.chinaw3c.org/
  • W3C标准包括
    • 结构化标准语言（HTML、XML）。
    • 表现标准语言（CSS）。
    • 行为标准（DOM、ECMAScript）。

创建HTML文件

  • 先建一个static web项目，再建一个html文件。

编译

  • Java文件需要先编译，然后Java虚拟机跑起来。
  • HTML文件不需要先编译，由浏览器直接解析执行。

书写规范

  • <!DOCTYPE html><!--约束，声明--><!--ctrl+shift+/-->
<html lang="zh_CN"><!--html标签表示html的开始，中文包含body与head-->
<head><!--头部信息包含title、css、js-->
    <！--meta描述性标签，它用来描述我们网站的一些信息-->
    <！--meta一般用来做SEO-->
    <meta charset="UTF-8"><!--当前页面使用UTF-8编码格式-->
    <title>标题</title><!--标题-->
</head>
<body><!--主体内容-->
Hello World！
</body>
</html>

行内元素与块元素

  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以在排在一行。
    • p h1-h6
  • 块元素
    • 无论内容多少，该元素独占一行。

HTML标签介绍

  • 标签的格式
    <标签名>data<标签名>

  • 标签名大小写不敏感。

  • 标签拥有自己的属性

    • 基本属性 bgcolor="aqua" 修改简单的样式效果。
    • 事件属性 onclick="alert('data')" 设置响应。

  • 单/双标签

    • <div></div>

    • <br/>
<hr/>

HTML标签语法

  • 标签不能交叉嵌套。
  • 标签必须正确关闭。
  • 属性必须有值，属性值必须加引号。
  • 注释不能嵌套。

常用HTML标签

段落标签

  • <p>    </p>

换行标签

  • <br/>

水平线标签

  • <hr/>

font 字体标签

  • color 改变字体颜色。
  • face 改变字体类型。
  • size 改变字体大小。
  • strong 粗体
  • em 斜体

特殊字符

  • <h1>我老婆伊蕾娜&amp;好美！</h1>
&lt;   小于<
&gt;    大于>
&nbsp;  空格
&amp;   与&
www.baidu.com

标题标签

  • <h1>-----<h6>
align="center/right/left"   对齐

超链接

  • <a href="网址" target="_self">旧页面</a><br/>
<a href="" target="_blank">新页面</a>
target="_self" 默认

  • 锚链接

    • <-->标记</-->
<a name="top"></a>
......
<-->1.需要一个锚标记
2.跳转到标记  #</-->
<a href="#top" >回到顶部</a>

  • 邮件标签

    • <a href="mailto:...@qq.com" >点击联系我</a>

  • 图片链接

    • <a href="index.html">
<img src="img/y15.png" alt="鸭子" title="悬停文字" width="200px" height="200px"/>
</a>

列表标签

  • 什么是列表？

    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

  • 有序列表：有序号

  • <ol>
    <li>伊蕾娜1</li>
    <li>伊蕾娜2</li>
</ol>

  • 无序列表：有序号但是可有 type="none"

    • disc 实心圆●（默认值）
    • circle 空心圆○
    • square 正方形■
  • <ul>
   <li>伊蕾娜1</li>
   <li>伊蕾娜2</li>
</ul>

  • 自定义列表

    • d1：标签
    • dt：列表名称
    • dd：列表内容

img标签

  • jpg gif png bmp

  • 显示图片 src设置路径

  • height width border alt

    • alt:找不到图片路径时，显示文本内容。
    • title: 悬停文字。

  • 相对路径：

    • . 当前文件所在目录。
    • .. 当前文件所在的上一级目录。

  • 文件名 表示当前文件所在目录的文件 ./

  • 绝对路径：http://ip:port/工程名/文件名。

  • JavaSE中的相对路径：从工程名开始算。

  • JavaSE中的绝对路径：盘符:/目录/文件名。

表格标签

  • 为什么使用表格

    • 简单通用。

    • 结构稳定。

    • <table> 表格标签
<tr>    行标签
<td>    单元格标签
<th>    表头标签
<b>     加粗
cellspacing="0"   单元格间距
align="center/right/left"   对齐
<td align="center"><b>伊蕾娜1</b></td>等于<th>伊蕾娜2</th>

  • 跨行跨列表格

    • 单元格标签添加。
    • 跨行 rowspan 跨列 colspan

iframe框架标签

  • 内嵌窗口

  • iframe可以在html页面上，打开一个小窗口加载一个独立页面。

    • 单独页面<br/>
<iframe src=""  name="hello"></iframe>
<br/>
<ul>
    <li><a href="" target="hello">图片</a></li>
    <li><a href="" target="hello">表格</a></li>
</ul>

  • frameborder 规定是否显示框架周围的边框。

  • name 规定 iframe 的名称。

  • scrolling 规定是否在 iframe 中显示滚动条。

视频与音频

  • 视频元素

    • video

    •  <video src="恋.mp4" width="500px" height="400px" controls="controls" autoplay="autoplay"></video>
<!--src：资源路径
controls：控制条
autoplay：自动播放-->
  • 音频元素

    • audio

    •  <audio src="花.flac" controls="controls" autoplay="autoplay"></audio>

表单form标签

  • 表单 收集html页面的元素集合，发送给服务器。

  • action 表单提交的位置，可以是网站，也可以是一个请求处理地址。

  • method post，get 提交方式。

    • get方式提交：我们可以在url中看到我们提交的信息，不安全，高效。
    • post：比较安全，传输大文件。

  • type 指定元素的类型。默认为text。

  • name 指定表单元素的名称。

  • value 元素的初始值。type为radio时必须指定一个值。

  • size 指定表单元素的初始宽度。当type为text或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。

  • maxlength type为text或 password时，输入的最大字符数。

  • checked radio或checkbox时，指定按钮是否是被选中。

  • input  type=text      文本
input  type=password    密码
input  type=radio    单选按钮
input  type=checkbox  复选框
input  type=reset    重置
input  type=submit    提交
input  type=button    按钮
input  type=image     图像
input  type=file    文件上传域
input  type=hiddle   隐藏域
select  标签的下拉列表
option  选项   selected默认被选中
textarea   多行文本输入框
rows     行
cols     列
<-->额外type</-->	
<input type="color" name="" id="" value="" />
<input type="tel" name="" id="" value="" />
<input type="url" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="month" />	
<input type="week" name="" id="" value="" />		
<input type="time" name="" id="" value="" />		
<input type="datetime" name="" id="" value="" />		
<input type="datetime-local" name="" id="" value="" />             

  • <form action="" method="post">
		 <p>名字： <input name="name" type="text"  placeholder="admin"/></p>
		 <p>密码： <input name="password" type="password"/></p>
		 <p>
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
		</p>
	 </form>

  • 下拉框，列表框

    •             <select name="listname">
  				<option value="uk">英国</option>
  				<option value="china" selected="selected">中国</option>
  				<option value="usa">美国</option>
  				<option value="russia">俄罗斯</option>
  			</select>

  • 文本域

    • <textarea name="textarea" cols="40" rows="10"></textarea>

  • 文件上传域

    • <input type="file" name="files"  />
<input type="button" value="上传" name="upload"/>

  • 邮件验证

    • <input type="email" name="email" id="" value="" />

  • 数字验证

    • <input type="number" name="num" max="100" min="0" step="5" />

  • 滑块

    • <input type="range" name="range" min="10" max="100" step="10"/>

  • 搜索框

    • 搜索框:<input type="search" name="search" />

表单的应用

  • 只读 checked

  • 禁用 disabled

  • 隐藏 hidden

  • 增强鼠标点可用性。

    • <label for="mark">伊蕾娜</label>
<input type="text" id="mark" placeholder="喜欢"/>

表单的初级验证

  • placeholder 提示
  • require 非空
  • pattern 正则表达式
posted @ 2021-11-18 20:56  JCooling  阅读(44)  评论(0)    收藏  举报