HTML
HTML概述: 标记语言 (有好多标记(这个标记只能用作浏览器中) 浏览器解析的时候 有特殊的含义)
一. HTML的结构:
1.头部(Head)
头部描述浏览器所需的信息
2.主体(Body)
主体则包含所要说明的 具体内容(文字 图片 等)
二. HTML的简单学习:
1.语法
<html>
<head></head>
<body>
内容
</body>
</html>
注意:1.内容要写到body中
2.标签要有开始 和结束 ,如果有 < 都要是英文符号
3.可以忽略大小写 (建议都是用小写)
4.文件名为 .html结尾
2.html的规范
1.html标签是由尖括号包围的关键词,比如 <html>
2.HTML 标签一般是成对出现的,比如 <b> 和 </b>
3.标签对中的第一个标签是开始标签,第二个标签是结束标签
4.某些 HTML 元素没有结束标签,比如 <br />
html的属性:
属性属于标签元素,属性之间使用空格隔开!
属性值可以使用双引号、单引号、或不使用引号。
color 是属性 red 是属性值 用双引号包裹
<p color="red">hello</p>
三. 标签
1.head标签
概述:HTML文档一些要素,告诉浏览器如何解析。 还有搜索引擎的一些内容
2.body标签
概述:设置文档的可见部分
3.标题标记
x代表(1到6)1 是最大 6是最小 有开始有结束(这个标签 占一行)
4.文本标记
<pre></pre> 创建预格式化文本
<b></b> 黑体
<i></i> 斜体字
<strong></strong> 加重一个单词(通常是斜体加黑体)
<u></u> 下划线显示
<del></del>del> 中划线显示(删除效果)
5.格式标签
<sub></sub> 下标
例:c + o<sub>2</sub> = co<sub>2</sub>
结果:C + O₂ = CO₂
<sup></sup> 上标
例:x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
结果:x² + y² = z²
<pre></pre> 标签的一个常见应用就是用来表示计算机的源代码
public class TestDemo {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
6.字体标签 (重点)
概述: 规定文本的字体、字体尺寸、字体颜色
size 属性 文本大小 默认有7个字 字体最大7 最小为 1
color 属性 字体颜色
face 属性 字体的样式
7.换行标签
<br> 标签是空标签 单个使用
在 XHTML 中,把结束标签放在开始标签中,也就是 <br />
8.分隔符的标签
<hr> 标签在 HTML 页面中创建一条水平线
属性 color 颜色 width 宽度
width 属性可以使用pixels像素值,也可以使用百分比
9.特殊标签
< 小于 <
> 大于 >
& and符号 &
" 引号 "
£ 英镑 £s;
注意: 大于小于 jsp中el表达式有这个运算
jquery 选择器中有这个运算
10.图片标签 (重点)
img 属性 src 图片的资源路径 路径只能是 网络地址或者 img下的图片
width 图片的 宽 height 图片的高
alt 图片的文本替代
title 鼠标悬停文字提示
11.超链接(重点)
1. 网址链接
属性 href 给链接地址 网址链接
target属性 (窗口打开的模式 )
blank 新打开一个网页
self 当前的网页打开
2.锚链接 : 从 a点 跳到 锚点
锚点的定义: <a name="Bottom">
跳转到锚点: <a href="#Bottom">回到底部</a>
<a name="Top"></a>
<a href="#Top">回到顶部</a>
12.列表标签
<ul> 标签定义无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol> 标签定义有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
13.表格标签
<table> 标签定义 HTML 表格
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元
div 块元素: 特点: 1 独占一行 2. 支持高宽 (设置高宽 高宽的值)
span 行内元素:
1. 行内元素 都是 一个接着一个后面 不支持 换行
2. 不支持高宽 默认高宽 内容撑开
14.表单标签(重点)
概述:HTML 表单用于搜集不同类型的用户输入
input 输入框
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
注意:输入框如果没有给name属性 是不能提交数据的
给了类属性后: name 提交数据的格式: ?name=scott&pwd=1234
提交如果是get 通过? 拼接在 url的 后面
输入框的name的值 就是提交的键(name) 输入框输入的内容就是 提交的值(scott)
如果是多个输入框 键值对通过 & 进行连接
value属性 输入框设置的值
type的值:
text 文本输入框
password 密码框
hidden 隐藏 可以正常提交数据
file 文件类型 可以选择文件
radio 单选框
1.一定要设置 name属性 要分组
2.需要设置 value属性 (单选框提交的 数值) 如果没有设置 提交的数据值是 on
3.设置 默认值 checked = "checked"
checkbox 多选框
1.需要设置 value属性 (单选框提交的 数值) 如果没有设置 提交的数据值是 on
2.设置 默认值 checked = "checked"
readonly 只读
placeholder 文本框提示
select 下拉框
select 下拉框定义:
下拉框 内 会有option 下拉选项
提交数据需要设置 name属性
option 属性: text 文本显示 value 提交的值
设置默认选择: selected="selected"
textarea 多行文本域
定义:给 name属性 提交数据
rows 设置行数
cols 设置 列
button按钮
1.input 设置 button属性
submit 提交按钮 默认有提交的文本
reset 表单重置 回到表单之前的状态
button 按钮 都可以使用value设置 显示文本 (就是一个普通按钮 不能提交数据)
2.button的标签
如果写在表单 内部 可以提交数据
如果写在表单外部 不能提交数据