HTML入门知识

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.特殊标签
< 	小于 	&lt; 
> 	大于 	&gt; 
& 	and符号 	&amp; 
" 	引号 	&quot; 
£	英镑	&pounds;
注意: 大于小于  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的标签
	如果写在表单 内部 可以提交数据
	如果写在表单外部 不能提交数据 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值