搜索
简帛阁>技术文章>HTML笔记整理

HTML笔记整理

看到前面笔记比较混乱这里再做整理

  • 1.html简介
      • 1.1.什么是html?
      • 1.2.第一个html程序。
      • 1.3.html的规范(遵循)
      • 1.4.html的操作思想(*****理解)
  • 2.文字标签和注释标签
      • 2.1.文字标签:修改文字的样式
      • 2.2.注释标签
  • 3.标题标签、水平线标签和特殊字符
      • 3.1.标题标签
      • 3.2.水平标签
      • 3.3特殊字符
  • 4.列表标签
      • 4.1.比如现在显示这样的效果
      • 4.2.想要在页面上显示这样的效果
      • 4.3.想要在页面上显示这样的效果
  • 5.图像标签(*******)
  • 6.路径介绍
      • 6.1.绝对路径
      • 6.2.相对路径
  • 7.超链接标签(******)
  • 8.表格标签(****重要的标签****)
  • 9.表单标签(*****最重要的标签*****)
  • 10.案例:使用表单标签实现注册页面
  • 11.html中的其他的常用标签的使用
  • 12.html的头标签的使用
  • 13.框架标签的使用

1.html简介

1.1.什么是html?

HyperText Markup Language:超文本标记语言,网页语言

  • 超文本:超出文本范畴,使用html可以轻松实现这样操作
  • 标记:html所有的操作都是通过标记实现的,标记就是标签,<标签名称>
  • 网页语言;

1.2.第一个html程序。

  • 创建Java文件.Java
    先编译,然后再运行(jvm)
  • html后缀是.html .htm
    直接通过浏览器就可以运行
  • 代码:
<font size="10" color="red">这是我的第一个HTML程序1!</font>

1.3.html的规范(遵循)

  1. 一个html文件开始标签和结束的标签 <html> </html>定义一个Java方法{}
  2. html包含两部分内容
    (1)<head>设置相关信息</head>
    (2)<body>显示在页面上的内容都写在body里面</body>
  3. html的标签有开始标签,也要有结束标签
    <head></head>
  4. html的代码不区分大小写
  5. 有些标签,没有结束标签,在标签内结束
    比如 换行 <br/>换行 <hr/>直线

1.4.html的操作思想(*****理解)

网页中有很多数据,不同数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来(封装起来),通过修改标签的属性值实现标签内数据样式的变化。

一个标签相当于一个容器,想要修改容器内数据样式,只需要改变容器的属性值,就可以实现容器内数据样式的变化。

2.文字标签和注释标签

2.1.文字标签:修改文字的样式

<font></font>

属性:

  • size:文字的大小 取值范围 1-7,超出了7,默认还是7
  • color:文字颜色(两种表达方式)
    ①英文单词:red green blue black white yellow gray…
    ②使用十六进制数表示#ffffff :RGB
    通过工具实现不同颜色 #66cc66

2.2.注释标签

Java注释几种? 三种
html的注释:<!-- 这是一个注释 -->

3.标题标签、水平线标签和特殊字符

3.1.标题标签

  • <h1></h1> <h2></h2> <h3></h3> ......<h6></h6>
  • 从h1到h6,大小依次变小,相同时会自动换行

3.2.水平标签

  • <hr/>

属性

  • size:水平线的粗细 取值范围 1-7
  • color:颜色

代码

<hr size="5" color="blue"/>

3.3特殊字符

  • 想要在页面上显示这样的内容
<html>:是网页的开始!
  • 需要对特殊字符进行转义

     	 <		&lt;
     	 >		&gt;
     	 空格:&nbsp;
     	 &   :	&amp;
    

4.列表标签

4.1.比如现在显示这样的效果

		工贸建模
			建模部
			软件部
			论文部
<dl></dl> :表示列表的范围
			在dl里面	<dt></dt>:上层内容
			在dl里面	<dd></dd>:下层内容

代码

			<dl>
				<dt>工贸建模</dt>
				<dd>建模部</dd>
				<dd>软件部</dd>
				<dd>论文部</dd>
			</dl>

4.2.想要在页面上显示这样的效果

			1.建模部
			2.软件部
			3.论文部
			
			a.建模部
			b.软件部
			c.论文部

			i.建模部
			ii.软件部
			iii.论文部
		<ol></ol>:有序列表范围
			属性 type:设置排序方式 1(默认)a	i
			在ol标签里面 <li></li>

代码

		    <ol type="a">
				<li>建模部</li>
				<li>软件部</li>
				<li>论文部</li>
			</ol>

4.3.想要在页面上显示这样的效果

			特殊符号(方框)建模部
			特殊符号(方框)软件部
			<ul></ul>:表示无序列表的范围
				属性:
				type:空心圆
				circle、实心圆
				disc、实心方块
				square,默认disc
				在ul里面 <li></li>

代码

			    <ul type="circle">
					<li>建模部</li>
					<li>软件部</li>
					<li>论文部</li>
				</ul>

5.图像标签(*******)

		* <img src="图片路径"/>
			- src:图片的路径
			- width:图片的宽度
			- height:图片的高度
			- alt:图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容
				** 有些浏览器下不显示(没有效果)

6.路径介绍

分类:两类

6.1.绝对路径

D:\Desktop\Html Css\day01-20200419
https://www.baidu.com/?tn=48021271_8_hao_pg

6.2.相对路径

一个文件相对于另外一个文件的位置

三种:

  1. html文件和图片在一个路径下,可以直接写文件名称
  2. 在html文件中,使用img文件夹下面的a.jpg
	-4.html
	-img\a.jpg
	*** 在html中使用图片 4.html和img在一个路径下
						img\a.jpg
  1. 图片在html文件的上层目录
	code\4.html
	c.png
	*** html文件所在的目录和图片是一个目录
		** 图片和html文件是什么关系?
			- 图片在html的所在目录的上层目录 day01-20200419
		** 怎么表示上层路径 ../
			- ../:day01-20200419
				-- ../c.png
		** 想要表示上层的上层 ../../	

7.超链接标签(******)

		* 链接资源(******)
			- <a href="链接到资源路径"> 显示在页面上的内容 </a>
				** href:链接的资源的地址
				** target:设置打开的方式,默认是在当前页打开
					-- _blank:在一个新窗口打开
					-- _self:在当前页打开 默认
			- 当超链接不需要到任何的地址 在href里面加#
				- <a href="#">这是一个超链接2</a>
				
		* 定位资源
			** 如果想要定位资源:定义一个位置
				<a name="top">顶部</a>
			** 回到这个位置
				<a href="#top">回到顶部</a>
				
			** 引入一个标签 pre:原样输出

8.表格标签(重要的标签

		* 可以对数据进行格式化,使数据显示更加清晰
		
		* <table></table>:表示表格的范围
			- border:表格线
			- bordercolor:表格线的颜色
			- cellspacing:单元格直接的距离
			- width:表格的宽度
			- height:表格的高度
			
		** 在table里面 <tr></tr>
			- 设置对齐方式 aligm: left center right
			
			*** 在tr里面 <td></td>
			- 设置显示方式 aligm: left center right

			*** 使用th也可以表示单元格
			- 表示可以实现居中和加粗
		* 代码
			<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
			
		* 画图分析表格的写法
			- 首先定义一个表格的范围使用table
				- 定义一个行使用 tr
				- 定义一个单元格使用 td
		** 操作技巧:
			- 首先数有多少行,数每行里面有多少个单元格
		
		** 表格的标题
			<caption></caption>
			
		** 合并单元格
			- rowspan:跨行
				** <td rowspan="3">人员信息</td>
			- colspan:跨列
				** <td colspan="3">人员信息</td>

9.表单标签(最重要的标签

		* 可以提交数据到网络服务器,这个过程可以使用表单标签实现
		
		* <form></form>:定义一个表单范围
			- 属性
				** action:提交到地址,默认提交到当前的页面
				** method:表单提交方式
					- 常用有两种 get和post,默认是get请求
					
				** 面试题目:get和post区别
					1、get请求地址会携带提交的数据,post不会携带(在请求体里面)
					2、get请求安全级别较低,post较高
					3、get请求数据大小限制,post没有限制
					
				** enctype:一般请求下不需要这个属性,做文件上传时候需要设置这个属性

		** 输入项:可以输入内容或者选择内容的部分
			- 大部分的输入项 使用 <input type="输入类型"/>
			
			*** 普通输入项:<input type="text"/>
			*** 密码输入项:<input type="password"/>
			
			*** 单选输入项:<input type="radio"/>
				- 在里面需要属性name
				- name的属性值必须要相同
				- 必须要有一个value值
				
				**** 实现默认选中属性
					-- checked="checked"
				
			*** 复选输入项:<input type="checkbox"/>
				- 在里面需要属性name
				- name的属性值必须要相同
				- 必须要有一个value值
				
				**** 实现默认选中属性
					-- checked="checked"
				
			*** 文件输入项(在后面上传时用到)
				- <input type="file"/>
				
			*** 下拉输入项(不是在input标签里面的)
				<select name="birth" id="">
					<option value="0">请选择</option>
					<option value="1991" selected="selected">1991</option>
					<option value="1992">1992</option>
					<option value="1993">1993</option>
				</select>
			
			*** 文本域
				<textarea name="tex" id="" cols="30" rows="10"></textarea>
			
			*** 隐藏项(不会显示在页面上,但是存在于html代码里面)
				<input type="hidden" name="hid"/>
				
			*** 提交按钮
				<input type="submit"/>
				<input type="submit" value="注册"/>
			
			*** 使用图片提交
				<input type="image" src="图片路径"/>
				
			*** 重置按钮
				<input type="reset" value="重置注册"/>
				
			*** 普通按钮
				<input type="button" value="普通按钮"/>

10.案例:使用表单标签实现注册页面

- 使用表格实现页面效果
- 超链接不想要他有效果 href="#"
- 如果表格里面的单元格没有内容,使用空格作为占位符 &nbsp;
- 使用图片提交表单 <input type="image" src="图片路径"/>

11.html中的其他的常用标签的使用

标签效果
b加粗
s删除线
u下划线
i斜体
pre原样输出
sub下标
sup上标
p段落标签 比br标签多一行
div自动换行
span在一行显示

12.html的头标签的使用

	* html两部分组成 head和body
	** 在head里面的标签就是头标签

	** title标签:表示在标签上显示的内容
	** <meta>标签:设置页面的一些相关内容
		- <meta name="keywords" content="哈哈哈,熊出没">
		  <meta http-equiv="refresh" content="3;url=01-hello.html">
	** base标签设置:设置超链接的基本设置
		- 可以统一设置超链接的打开方式
		<base target="_blank"/>
	
	** link标签:引入外部文件

13.框架标签的使用

	*<frameset>
		- rows:按照行进行划分
			** <frameset rows="80,*">

		- cols:
			** <frameset cols="80,*">
	*<freme>
		- 具体显示的页面
			- <freme name="lower_left" src="b.html">
	
	*** 使用框架标签时候,不能写在body里面,使用了框架标签,需要把body去掉

	* <frameset rows="80,*">  //把页面划分成上下两部分
	      <frame name="top" src="a.html"/>   //上面页面

	      <frameset cols="150,*">			//把下面部分划分成左右两个部分
		  <frame name="lower_left" src="b.html"/>	//左边的页面
		  <frame name="lower_right" src="b.html"/>	//右边的页面
	      </frameset>
	 </frameset>

	* 如果在左边的页面超链接,想让内容显示在右边的页面中
		- 设置超链接里面属性target值设置成名称
看到前面笔记比较混乱这里再做整理1html简介11什么是html?12第一个html程序。13html的规范(遵循)14html的操作思想(*****理解)2文字标签和注释标签21文字标签:修改文字的
周终于学完了所有的HTML知识,但也不是很全,如果是非前端用于平时需要的话,还是足够了。此外,如果需要上面思维导图文件,可以微信公众号关注哔哗回复关键字HTML获取。接下来不多说,上干货。HTML1
1、前端:不同设备的适配显示》性能优化某些计算任务html52、xml:传输数据保存配置文件3、乱码是因为编码方式与解码方式不同4、html具体标签(属性)具体使用可参考帮助手册排版标签<p&
HTML面试题整理01说一下对语义化的理解?✅对开发者友好,让人更容易读懂,利于代码可读性对机器友好,让搜索引擎更容易读懂,利于seo02说一下HTML5有哪些更新/新增?✅新增语义化标签,音频视频标
标签html双标签表示整个网页属性:manifest定义一个URL,在这个URL上描述了文档的缓存信息(html5)新增xmlns只有XHTML支持。规定XML的namespace属性在HTML5规
标题标签:<h1></h1>段落标签:<p></p><u></u>添加下划线<br/>插入单个换行字体标签:<
html(hypertextmarkuplanguage)知识点html文档结构<!文档注释><!DOCTYPEhtml><htmllangen><head&
<div>块,末尾会换行。一个div可以包含标题、段落、链接等。div属于容器<p>段落,末尾会换行。<a>链接<ahrefindexhtml>首页&l
1提交按钮<inputtypesubmitvaluelogin>2超链接<br><ahreflogin>返回重新登录</a>3文本框<inputt
HTMLcss笔记:一css引入方式1行内式(不推荐使用):直接在标签里面加stylecss样式,这样是可以添加,但是会出现很同样标签,所以一般不推荐和使用这样的方式去添加css样式使用方法:<