HTML基础

HTML

Hyper Text Markup Language(超文本标记语言)
超文本:文字、图片、音频、视频、动画等(不需要Flash)
标签
等成对的标签,分别叫开发标签和闭合标签。
单独呈现的标签(空元素),如
,用 / 来关闭空元素,叫自闭合标签
其他内容
DOCTYPE:告诉浏览器,我们需要使用什么规范,默认也是html
head标签:代表网页头部
body标签:代表网页主体
title:网页标题
meta:描述性标签,它用来描述我们网站的一些信息,一般用来做SEO(搜索引擎优化)
网页基本标签
标题标签

<h1>一级标签h1>
<h2>二级标签h2>
<h3>三级标签h3>

段落标签(分段)

<p>p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签
粗体

<strong>strong>

斜体

<em>em>

特殊符号记忆方式 & ;
空格

 

版权

©

图像标签

<img src="图像地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>
必填项
src:图像地址
	相对地址/绝对地址
	../      上一级目录
alt:图片名字(加载失败时的文字)

链接标签

<a href="链接路径" target="目标窗口位置">链接文本或图像a>
href:表示要跳转到哪个页面,必填
target:表示窗口在哪里打开
	常用值:
		_self  在自己的网页中打开(默认)
		_blank  在新标签中打开

锚链接

  1. 需要一个锚标记
  2. 跳转到标记
    top

锚链接还可以实现不同界面的跳转

功能性链接
邮件链接:mailto

<a href="mailto:[email protected]">点击联系我a>

QQ链接:百度QQ推广–>登录–>自动生成a链接–>复制到html界面即可使用

列表

  1. 有序列表 order list
<ol>
	<li>Javali>
	<li>Pythonli>
	<li>运维li>
	<li>前端li>
	<li>c/c++li>
ol>
  1. 无序列表
<ul>
	<li>Javali>
	....
ul>
  1. 自定义列表
    dl:标签
    dt:列表名称
    dd:列表内容
<dl>
	<dt>....dt>
	<dd>....dd>
	<dd>....dd>
	....
dl>

表格 table
行 tr
列 td

<table>
	<tr>
		<td>....td>
	tr>
table>

边框宽度设置


跨列

跨行

视频和音频
视频
src:资源路径
controls:控制条
autoplay:自动播放
音频


页面结构分析

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

iframe内联框架

src:地址
w-h:宽度高度
name:使用标签中target可填写这里的name

表单语法

<form method="规定如何发送表单数据,常用值get|post" action="表示向何处发送表单数据">
	<p>名字:<input name="username" type="text">p>
	<p>密码:<input name="password" type="password">p>
	<p>
		<input type="submit" name="Button" value="提交"/>
		<input type="reset" name="Reset" value="充填"/>
	p>
form>

action:表单提交的位置,可以是网站,也可以是一个请求处理的地址
method:post | get 提交方式
get:可以在url中看到提交的信息,不安全,但是高效
post:比较安全,传输大文件
文本输入框:input type="text"
密码框:input type="password"

表单元素格式

属性 说明
type 指定元素类型,text,password,checkbox,radio,submit,reset,file,hidden,image和button,默认为text
name 指定表单元素的名称
value 元素的初始值,type为radio时必须指定一个值
size 指定表单元素的初始宽度,当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlength type为text或password时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否被选中
  • 文本输入框
input type="text"
value="qtf" 默认初始值
maxlength="8" 最长能写8个字符
size="30" 文本框的长度
  • 单选框标签
    checked 默认选中
input type="radio"  checked 默认选中
value=单选框的值
name=表示组  同一个组内只能选择一个值
  • 多选框(类似于单选框)
    checked 默认选中
<input type="checkbox" value="sleep" name="hobby" checked/>睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
....
  • 按钮
<input type="button" name="btn1" value="点击"/>
<input type="image" src="...."/>图片按钮
  • 下拉框
    selected 默认选择
<p>下拉框
	<select name="列表名称">
		<option value="china">中国option>
		<option value="us">美国option>
		<option value="eth" selected>瑞士option>
		<option value="yindu">印度option>
	select>
p>
  • 文本域
    cols 列
    rows 行
<p>反馈
	<textarea name="textarea" cols="10" rows="50">文本内容textarea>
p>
  • 文件域 上传文件时使用
<p>
	<input type="file" name="files"/>
	<input type="button" value="上传" name="upload"/>
p>
  • 邮件验证
<p>
	<input type="email" name="email"/>
p>
url验证 type="url"
数字验证 type="number"
<input type="number" name="num" max="100" min="0" step="10"/>
max:最大
min:最小
step:步长
  • 滑块
<p>音量滑块
	<input type="range" name="voice" min="0" max="100" step="2"/>
p>
  • 搜索框
<p>搜索
	<input type="search" name="search"/>
p>

表单特殊属性
readonly 只读,不可修改
disabled 禁用
hidden 隐藏

增强鼠标可用性
点击文字即可跳转到对应的输入框进行输入

<p>
	<label for="mark">点击一下试试label>
	<input type="text" id="mark"/>
	
p>

表单初级验证
为了减轻压力,增强数据安全性

  1. placeholder 提示域,提示文本需要输入的内容
  2. required 非空判断,必须输入信息
  3. pattern="正则表达式"(无需自己写正则表达式,百度搜索即可)

你可能感兴趣的:(JavaWeb,html,前端)