html简单复习笔记

于 2020-05-15 11:34:38 发布
阅读量721 收藏 9
点赞数 4
分类专栏： JAVA WEB 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41816516/article/details/106134610
版权

web概念概述

  1. JavaWeb：
    * 使用Java语言开发基于互联网的项目

  2. 软件架构：

    • C/S: Client/Server 客户端/服务器端
      • 在用户本地有一个客户端程序，在远程有一个服务器端程序
        • 如：QQ，迅雷…
      • 优点：
        • 用户体验好
      • 缺点：
        • 开发、安装，部署，维护 麻烦
    • B/S: Browser/Server 浏览器/服务器端
      • 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
      • 优点：
        • 开发、安装，部署，维护 简单
      • 缺点：
        • 如果应用过大，用户的体验可能会受到影响
        • 对硬件要求过高

  3. B/S架构详解

    • 资源分类：
      • 静态资源：
        • 使用静态网页开发技术发布的资源。
        • HTML：用于搭建基础网页，展示页面的内容
        • CSS：用于美化页面，布局页面
        • JavaScript：控制页面的元素，让页面有一些动态的效果
        • 特点：
          • 所有用户访问，得到的结果是一样的。
            • 如：文本，图片，音频、视频, HTML,CSS,JavaScript
          • 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
      • 动态资源：
        • 使用动态网页及时发布的资源。
        • 特点：
          • 所有用户访问，得到的结果可能不一样。
            • 如：jsp/servlet,php,asp…
          • 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

HTML

HTML概念

  1. 概念：是最基础的网页开发语言

    • Hyper Text Markup Language 超文本标记语言
    • 超文本:
      • 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
    • 标记语言:
      • 由标签构成的语言。<标签名称> 如 html，xml
      • 标记语言不是编程语言

  2. 快速入门：

    • 语法：
      • html文档后缀名 .html 或者 .htm
      • 标签分为
        • 围堵标签：有开始标签和结束标签。如 <html> </html>
        • 自闭和标签：开始标签和结束标签在一起。如 <br/>
      • 标签可以嵌套：
        • 需要正确嵌套，不能你中有我，我中有你
        • 错误：<a><b></a></b>
        • 正确：<a><b></b></a>
      • 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
      • html的标签不区分大小写，但是建议使用小写。

HTML文件标签

  1. 文件标签：构成html最基本的标签
  2. html:html文档的根标签<html></html>
  3. head：头标签。用于指定html文档的一些属性。引入外部的资源<head></head>
  4. title：标题标签<title></title>
  5. body：体标签<body></body>
  6. <! DOCTYPE html>：html5中定义该文档是html文档

HTML文本标签

  1. 文本标签：和文本有关的标签
  2. 注释：<! – 注释内容 -->
  3. < h1> to < h6>：标题标签
    • h1~h6:字体大小逐渐递减
  4. < p>：段落标签
  5. < br>：换行标签
  6. < hr>：展示一条水平线
    • 属性：
      • color：颜色
      • width：宽度
      • size：高度
      • align：对其方式
        • center：居中
        • left：左对齐
        • right：右对齐
  7. < b>：字体加粗
  8. < i>：字体斜体
  9. < font>:字体标签
  10. < center>:文本居中
    • 属性：
      • color：颜色
      • size：大小
      • face：字体
  11. 属性定义：
    • color：
      • 英文单词：red,green,blue
      • rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
      • #值1值2值3：值的范围：00~FF之间。如： #FF00FF
    • width：
      • 数值：width=‘20’ ,数值的单位，默认是 px(像素)
      • 数值%：占比相对于父元素的比例
<!DOCTYPE html>
<html>
<head>
	<title>文本标签</title>
</head>
<body>
<center>
	<!--换行标签-->
	0<br>
	<!-- 标题标签 -->
	<h1>1</h1>
	<h2>2</h2>
	<h3>3</h3>
	<h4>4</h4>
	<h5>5</h5>
	<h6>6</h6>
	<!--段落标签-->
	<p><b>今天真是一个好天气，阳光明媚</b>
	<p><i>今天真是一个坏天气，樱雨绵绵</i>
	<!-- 展示一条水平线 -->
	<hr color="red">
	<!-- 字体标签 -->
	<font color="red" face="楷体">字体标签</font>
</center>
</body>
</html>

在这里插入图片描述

HTML 图片标签

  1. img：展示图片
  2. 属性：
    • src：指定图片的位置
      • 相对路径
        • 以.开头的路径
        • ./：代表当前目录 ./image/1.jpg
        • ../:代表上一级目录
  3. 代码：
<!--展示一张图片 img-->
<img src="1.jpg" align="center" alt="女生节" width="500" height="300"/>

在这里插入图片描述

HTML列表标签

  1. 有序列表：
    • ol:
      • 属性：
        • type：决定计数的方式
        • start：决定从几开始
      • li:
  2. 无序列表：
    • ul:
      • 属性：
        • type：决定项目列表的方式
      • li:
  3. 代码
	<b>我一天干的事情</b>
	<ol>
		<li>起床</li>
		<li>吃饭</li> 
		<li>睡觉</li>
	</ol>
	<br>
	<b>我一天干的事情</b>
	<ul>
		<li>起床</li>
		<li>吃饭</li> 
		<li>睡觉</li>
	</ul>

在这里插入图片描述

HTML连接标签

  1. a:定义一个超链接<a href="路径"></a>
  2. 属性：
    • href：指定访问资源的URL(统一资源定位符)
    • target：指定打开资源的方式
      • _self：默认值，在当前页面打开
      • _blank：在新的空白页面打开
  3. 代码：
	<a href="http://www.baidu.com" target="_self">百度一下</a>
	<a href="http://www.baidu.com" target="_blank">百度一下2</a>

在这里插入图片描述

HTML块标签

  1. div
    • div:每一个div占满一整行。块级标签
  2. span
    • span：文本信息在一行展示，行内标签 内联标签
  3. 代码
	<div>1</div>
	<div>1</div>
	<hr color="green">
	<span>2</span>
	<span>2</span>

在这里插入图片描述

HTML语义化标签

  1. html5中为了提高程序的可读性，提供了一些标签。
  2. <header>：页眉
  3. <footer>：页脚

HTML表格标签

  1. table：定义表格
    • 属性：
      • width：宽度
      • border：边框
      • cellpadding：定义内容和单元格的距离
      • cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
      • bgcolor：背景色
      • align：对齐方式
  2. tr：定义行
    • 属性：
      • bgcolor：背景色
      • align：对齐方式
  3. td：定义单元格
    • 属性：
      • colspan：合并列
      • rowspan：合并行
  4. th：定义表头单元格
    • 属性：
  5. <caption>：表格标题
  6. <thead>：表示表格的头部分
  7. <tbody>：表示表格的体部分
  8. <tfoot>：表示表格的脚部分
  9. 代码：
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
		<caption>个人信息表</caption>
		<tr bgcolor="feabd7">
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
		<tr >
			<td>zjf</td>
			<td>20</td>
			<td>男</td>
		</tr>
		<tr >
			<td>wrq</td>
			<td>20</td>
			<td>男</td>
		</tr>

	</table>

在这里插入图片描述

HTML表单标签

  1. 表单：

    • 概念：用于采集用户输入的数据的。用于和服务器进行交互。
    • form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
    • 属性：
      • action：指定提交数据的URL
      • method:指定提交方式
        • 分类：一共7种，2种比较常用
          • get：
            • 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
            • 请求参数大小是有限制的。
            • 不太安全。
          • post：
            • 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
            • 请求参数的大小没有限制。
            • 较为安全。
      • 表单项中的数据要想被提交：必须指定其name属性
      • 表单项标签：
        • input：可以通过type属性值，改变元素展示的样式

          • type属性：

            • text：文本输入框，默认值

              • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

            • password：密码输入框

            • radio:单选框

              • 注意：
                1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                3. checked属性，可以指定默认值

            • checkbox：复选框

              • 注意：
                1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                2. checked属性，可以指定默认值

            • file：文件选择框

            • hidden：隐藏域，用于提交一些信息。

            • 按钮：

              • submit：提交按钮。可以提交表单
              • button：普通按钮
              • image：图片提交按钮
                • src属性指定图片的路径

          • label：指定输入项的文字描述信息

            • 注意：
              • label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。

          • select: 下拉列表

            • 子元素：option，指定列表项

          • textarea：文本域

            • cols：指定列数，每一行有多少个字符
            • rows：默认多少行。

  2. 代码：

	<form action="#" method="post">

		<label for="name">用户名：</label><input type="text" name="name" id="name"><br>
		密码：<input type="password" name="password"><br>
		性别：<input type="radio" value="男" name="gender">男
			 <input type="radio" value="女" name="gender">女<br>
		爱好：<input type="checkbox" name="hobby"> 打代码
			 <input type="checkbox" name="hobby"> 打游戏
			 <input type="checkbox" name="hobby"> 打篮球
			 <br>
		图片：<input type="file" name="file"><br>
	    隐藏域：<input type="hidden" name="id" value="aaa"> <br>

	    取色器：<input type="color" name="color"><br>
	    生日：<input type="date" name="birthday"> <br>
	    生日：<input type="datetime-local" name="birthday"> <br>
	    邮箱：<input type="email" name="email"> <br>
	    年龄：<input type="number" name="age"> <br>

	    省份：<select name="province">
	            <option value="">--请选择--</option>
	            <option value="1">北京</option>
	            <option value="2">上海</option>
	            <option value="3" selected>陕西</option>
	         </select><br>

	    自我描述：
	        <textarea cols="20" rows="5" name="des"></textarea><br>

		<input type="submit" value="登录" align="center"><br>
		<input type="button" value="一个按钮" ><br>
    	<input type="image" src="1.jpg" align="center" alt="女生节" width="500" height="300">
	</form>

在这里插入图片描述

程序胖
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值