Web基础 ( 一 ) HTML_web段落可以用-程序员宅基地

技术标签： css  前端  html  web基础  

1.HTML

		<input />
		<input  type='button' value='按钮' />

1.1.概念

1.1.1.HTML文件是什么

HTML表示超文本标记语言（Hyper Text Markup Language）, HTML文件是一个包含标记的文本文件, 必须有htm标记或者html扩展名。

在这里插入图片描述

可以通过浏览器(Browser)直接解析并显示效果, 也叫作"静态页面"

HTML标签是大小写无关的，<b>跟<B>表示的含义相同。

1.1.2.HTML基本语法

  1. 标签 在< >之间 ,在 < 与 标签名 之间 不能有空格
  2. 标签tag 元素 element 结点 node
  3. 有的标签 有开始标签 与 结束标签 <标签> 内容 </标签>
  4. 标签之间可以嵌套 存在父子关系
  5. 标签是大小写无关的，<b>跟<B>表示的含义相同。
  6. 标签内可以编写属性 attribute 属性名 =“属性值”

1.1.3.HTML文件的基本结构

​ <html></html> 标签定义HTML文档( document )的开始和终止。

​ <head></head> 用于页面的基本信息设置.

​ <title></title> 标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

​ <meta>信息设置, 如 : 字符编码

​ <body></body> 标签之间的文本是正文，会被显示在浏览器中。

HTML5的基本结构

<!DOCTYPE html>
<html >
	<head>
		<meta charset="UTF-8">
		<title>标题</title>
	</head>
	<body>
		<input />
		<input  type='button' value='按钮' />
	</body>
</html>

HTML4的基本结构

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
	</head>
	<body>

	</body>
</html>

1.1.4.元素分类

1.1.4.1.按结构

  1. 单标签 : 独立使用

  2. 嵌套标签 : 组合使用

    有<标签>开始 </标签>结束, 也可以单独使用

1.1.4.2.按样式

HTML 标签可分为以下几类：

  1. 块级标签（Block-level elements）：

    ​ 这些标签用于在 HTML 页面中创建块元素，通常用于在页面中创建段落、标题、列表、表格、DIV 区块等等。

    ​ 它们是由一个块级元素开始，一个块级元素结束，中间可以包含其他块级元素或内嵌行级元素。

    ​ 通常占用页面的一行, 支持样式盒子

    ​ 常见的块级元素有 <div>, <h1>, <p>, <ul>, <ol>, <li> 和 <table> 等。

  2. 行内标签（Inline elements）：

    ​ 这些标签用于在 HTML 页面中创建行内元素，通常用于标记文本内容、超链接、加粗、斜体等等。

    ​ 它们只影响它包含的文本，并不会影响文本周围的排版。

    ​ 常见的行内元素有 <a>, <b>, <i>, <em>, <strong> 和 <span> 等。

  3. 行内块级标签（inline-block elements）：这些标签具有行内元素的特点，但是可以设定宽高，可以和其他行内元素或块级元素在同一行上显示。

    ​ 常见的行内块元素有 <img>, <input>, <button>, <textarea> 等。

注意：以上分类并不是完全准确的，有一些标签的表现即不是块级元素也不是行内元素，例如：<head>、<body> 和 <html> 等标签。

1.2.文本标签

类似 word 的功能

1.2.1.(**)段落标签<p></p>

​ 通过段落标签，可以将文本内容分为多个段落。

​ 段落内容会根据浏览器显示区域的宽度自动编排。

		Spring 是一个开源的 Java 开发框架，
		它提供了一种全新的编程思想和体系结构，通过依赖注入和面向切面编程等特性，
		帮助开发者更加高效地进行企业级应用的开发。
		
		Spring 的核心思想是 IoC（Inversion of Control）
		和 AOP（Aspect-Oriented Programming）。
		<p>
			Spring 是一个开源的 Java 开发框架，
			它提供了一种全新的编程思想和体系结构，通过依赖注入和面向切面编程等特性，
			帮助开发者更加高效地进行企业级应用的开发。
		</p>
		<p>
			Spring 的核心思想是 IoC（Inversion of Control）
			和 AOP（Aspect-Oriented Programming）。
		</p>

在这里插入图片描述

1.2.2.(**)标题标签<h1></h1>到<h6></h6>

​ 标题元素由标签<h1>到<h6>定义。

​ <h1>定义了最大的标题元素，<h6>定义了最小的标题元素。

		<h1>h1标题</h1>
		<h2>h2标题</h2>
		<h3>h3标题</h3>
		<h4>h4标题</h4>
		<h5>h5标题</h5>
		<h6>h6标题</h6>

在这里插入图片描述

1.2.3.(**)换行标签<br/>

​ 当需要结束一行文本，并且不想开始新段落时，使用<br>标签。<br> 标签不管放在什么位置，都能够强制换行。

在这里插入图片描述

1.2.4.(**)注释标签<!-- -->

​ 注释标签<!-- -->用来在HTML文件中插入注释。

​ 注释会被浏览器忽略，即该内容不会显示出来，但是在页面源代码内仍然可以看到。

在这里插入图片描述

1.2.5.水平线标签<hr/>

​ 水平线标签<hr>用于在网页中显示一个分割内容的水平线。通过水平线标签可以把文档内容分成具有明显边界的几个部分。

​ 主要属性:

​ size : 厚度 、color : 颜色 、width : 宽度 、 align : 对齐方式

在这里插入图片描述

1.2.6.预格式化文本<pre></pre>

​ 文件按照原始码的排列方式,空格、回车、TAB有效。

在这里插入图片描述

1.2.7.(**)字体标签<font>

​ <font> 字体样式, face字体, size字体大小(1~7), color色彩

在这里插入图片描述

1.2.8.格式化文字

这是<b></b> 加粗 标签 这是 <strong></strong> 加粗 语意标签
这是 <i></i> 倾斜 标签 这是<em></em> 倾斜 语意标签
这是<u></u>下划线 标签 这是<ins></ins>下划线 语意标签
这是<del></del 删除 标签 这是 <strike></strike> 删除 语意标签
这是<big></big 放大字体 标签
这是 <small></small> 缩小字体 标签
这是 <sub></sub>下标 标签
这是<sup><sup 上标 标签

1.2.9.特殊字符

&lt;		<	小於号或显示标记
&gt;		>	大於号或显示标记
&amp;		&	可用於显示其它特殊字符
&quot;		"	引号
&reg;			己注册
&copy;			版权
&trade;			商标
&ensp;	 		半方大的空白
&emsp;	 		全方大的空白
&nbsp;	 		(**)不断行的空白
&cent;		¢ 	分
&pound;		£  	英镑
&yen;		¥	人民币元
&sect;		§	章节
&times;		×	乘号
&divide;	÷	除号

1.3.表格标签

类似 execl 功能

1.3.1.标签结构

table 是一套 嵌套标签

table > caption, tbody, thead, tfoot > tr > th, td

table 表格标签

caption 标题标签

thead，tbody，tfoot 表格的不同部分

tr 行

th 标题单元格

td 标准单元格

每行中的 或 数量是一样的

		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>学校</th>
					<th>补充</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>王小二</td>
					<td>花园小学</td>
					<td>好孩子</td>
				</tr>
				<tr>
					<td>2</td>
					<td>赵小四</td>
					<td>花园小学</td>
					<td>帅小伙</td>
				</tr>
				<tr>
					<td>3</td>
					<td>李小三</td>
					<td>苗苗小学</td>
					<td>无</td>
				</tr>
			</tbody>
		</table>

在这里插入图片描述

1.3.2.重要属性

1.3.2.1.border: 边框 宽度

border 取值正整数 , 修饰 table

在这里插入图片描述

1.3.2.2.width 宽度 height 高度

width 可以是正整数, 也可以是百分比 , 可以修改 table , th , td

height 可以是正整数 不可以是百分比

在这里插入图片描述

1.3.2.3.align 左右对齐 valign 上下 对齐

内容对齐方式

align 可选值 left 左 center中 right右, 可以修改 tr th td 及 table

​ 如果将align属性添加在table标签上,控制的是当前table在他父标签里水平的位置

valign 水平对齐 可选值 top上 middle中 bottom下

在这里插入图片描述

1.3.2.4.colspan 合并格 rowspan 合并行

colspan , rowspan 取值正整数 , 修饰 td

在这里插入图片描述

1.4.表单标签

1.4.1.form表单

打包传递的信息

​ action 跳转的目标 用于写 URL

​ method 请求模式 默认get 通常使用post

		<form action="http://www.baidu.com" method="post">
			<input type="submit" value=""/>
		</form>

1.4.2.input 元素标签 常见属性

1.4.2.1.type类型

type 标签类型 可取值有:

​ text 文本框 默认, password 密码 ,

​ checkbox 多选 , radio 单选

​ button 按钮, reset 重新设置, submit 提交表单

​ hidden 隐藏

​ file 文件

​ date 日期, number 数字

		<form action="http://www.baidu.com" method="post">
			
			text文本框 : <input type="text"  name="" id="" value="abc" readonly  placeholder="请输入文本" /> <br>
			password密码框 : <input type="password"  name="" id="" value="" /> <br>
			<hr>
			radio 单选框 :  <input type="radio"  name="rr" id="" value="A" checked />A
						    <input type="radio"  name="rr" id="" value="B" />B 
							<br>
			checkbox 复选框 : <input type="checkbox"  name="cc" id="" value="1" checked />  1 
							<input type="checkbox"   name="cc" id="" value="2" />   2 
							<br> <hr>
			button 按钮 : <input type="button"  id="" value="按钮"  disabled /> <br>
			reset 重置 : <input type="reset"  id="" value="重置" /><br>
			submit提交 :<input type="submit"  id="" value="提交"/><br>
			<hr>
			hidden 隐藏 : <input type="hidden"  name="hh" id="" value="看不到" /> <br>
			<hr>
			file 文件 : <input type="file"  name="ff" id="" value="" /> <br>
			<hr>
			date 日期 : <input type="date"  name="" id="" value=""  /> <br>
			number 数字: <input  type="number"  name="" id="" value="" />
			
		</form>

在这里插入图片描述

1.4.2.2.value 值 name 标识

当表单进行提交时, 可以以name 属性为标识将value属性的值 传递给目标

name 传递信息时的标识

​ radio , checkbox : 也用来进行分组

value 两个作用 1.传递信息 2.显示的信息

​ 有的即显示, 又传值 : text , password , date , number

​ 只显示 , 不传值 : button , reset , submit

​ 不显示 , 只传值 : radio , checkbox , hidden

​ file : 显示选择的文件名, 传递的二进制流

1.4.2.3.其它属性

id 本地(区域内的)的唯一标识

checked 被选中 checkbox 多选/radio 单选 两个标签使用

min/max/step 最小值/最大值/步伐 number标签使用

maxlength 内容最大长度

placeholder 输入提示

required 必须填写

readonly 只读, 不可以修改, 可以传递信息

disabled 禁用, 不可以操作, 不能传递信息

1.4.3.select 下拉框

是一个嵌套标签, 由 <select> , <option> 组成, 可以在多条信息选择其中一条

<select> 下拉框

<option> 下拉框子标签

option 属性 :

value 传递值 , 表单提交时, 传递被选中option的value属性值

innerText 显示的内容, 就是开始标签与结束标签之间内容, 不用定义, 但可以通过 JavaScript 获取

selected 默认被选中

<select name=""  id="" >
	<option value="1" >inner a</option>
    <option value="2"  selected="selected" >inner b</option>
    <option value="3" >inner c</option>
</select>

在这里插入图片描述

1.4.3.1.多选下拉框

在 <select> 结点上增加 multiple 属性

下拉框 的样式发生变化, 此时按住 Ctrl 键, 用鼠标可以选择多个选项

<select name=""  id=""  multiple >
	<option value="1" >inner a</option>
    <option value="2"  selected="selected" >inner b</option>
    <option value="3" >inner c</option>
</select>

在这里插入图片描述

1.4.4.textarea 文本域标签

可以输入 多行信息, 并能生成滚动条

rows 默认行数

cols 默认列数

<textarea  rows="5"  cols="60" >inner</textarea>

在这里插入图片描述

1.4.5.label 转焦 标签

通常用于标注输入类标签

for 对应 元素的id属性 , 当 点击 <label> for属性值对应的id属性值的元素会获得焦点

		<label for="inp" >转焦 : </label>
		<input  id="inp"/>

在这里插入图片描述

1.5.其它常用内容

1.5.1.img 图片标签

<img> 图片标签

src 属性 图片的路径

alt 鼠标指向时提示

width 宽

height 高

border 边框

		<img  src="../img/1.jpg" alt="说明: 一张图片"/>
		
		<br>
		
		<img  src="../img/1.jpg" width="100"/>  
		<img  src="../img/1.jpg" height="100"/>  
		
		<br>
		<img src="../img/1.jpg"  width="150"  height="50" >
		
		<br>
		<img  src="../img/1.jpg" border="5" />

在这里插入图片描述

1.5.1.1.相对路径

以当前所在文件夹为基点 找到是终的共同结点

​ ../ 向上一层

​ ./ 当前一层

1.5.2.超链接 <a>

通过点击 切换到其它资源上

href 跳转的目标 用于写 URL

target 使用target属性，你可以定义从什么地方打开链接地址。

​ _blank 将连结的画面内容，开在新的浏览视窗中

​ _parent 将连结的画面内容，当成文件的上一个画面。

​ _self 将连结的画面内容，显示在目前的视窗中

​ _top 将框架中连结的画面内容，显示在没有框架的视窗中

<a href="http://www.baidu.com" target="_blank" >baidu</a>

在这里插入图片描述

1.5.2.1.超连接 锚点

​ # 代表本页面

name 锚点名

1.5.3.列表

HTML 中有三种常用的列表标签：<ul>、<ol> 和 <dl>。

  1. <ul>：无序列表，指一组项目，每个项目之间没有中断，通常用小圆点或其他符号作为项目符号。

    通常用于表示一组相关性不强的项目，可以随意使用顺序。

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>
  1. <ol>：有序列表，指一组项目，每个项目之间没有中断，其中每个项目默认都有序号。通常用于表示按照一定顺序排列的项目。
<ol>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>
  1. <dl>：定义列表，指一组条目，每个条目由名称和值两部分组成。通常用于表示术语的定义或者元数据。
<dl>
  <dt>项目1</dt>
  <dd>项目1的值</dd>
  <dt>项目2</dt>
  <dd>项目2的值</dd>
</dl>

需要注意的是，以上三种列表标签通常会结合使用 <li>、<dt> 和 <dd> 标签来定义列表项目和条目的具体内容。

在这里插入图片描述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanchun05/article/details/130692319

智能推荐

什么是内部类？成员内部类、静态内部类、局部内部类和匿名内部类的区别及作用？_成员内部类和局部内部类的区别-程序员宅基地

文章浏览阅读3.4k次，点赞8次，收藏42次。一、什么是内部类？or 内部类的概念内部类是定义在另一个类中的类；下面类TestB是类TestA的内部类。即内部类对象引用了实例化该内部对象的外围类对象。public class TestA{ class TestB {}}二、 为什么需要内部类？or 内部类有什么作用？1、 内部类方法可以访问该类定义所在的作用域中的数据，包括私有数据。2、内部类可以对同一个包中的其他类隐藏起来。3、 当想要定义一个回调函数且不想编写大量代码时，使用匿名内部类比较便捷。三、 内部类的分类成员内部_成员内部类和局部内部类的区别

分布式系统_分布式系统运维工具-程序员宅基地

文章浏览阅读118次。分布式系统要求拆分分布式思想的实质搭配要求分布式系统要求按照某些特定的规则将项目进行拆分。如果将一个项目的所有模板功能都写到一起，当某个模块出现问题时将直接导致整个服务器出现问题。拆分按照业务拆分为不同的服务器，有效的降低系统架构的耦合性在业务拆分的基础上可按照代码层级进行拆分(view、controller、service、pojo)分布式思想的实质分布式思想的实质是为了系统的..._分布式系统运维工具

用Exce分析l数据极简入门_exce l趋势分析数据量-程序员宅基地

文章浏览阅读174次。1.数据源准备2.数据处理step1：数据表处理应用函数：①VLOOKUP函数; ② CONCATENATE函数终表：step2：数据透视表统计分析（1） 透视表汇总不同渠道用户数, 金额（2）透视表汇总不同日期购买用户数，金额（3）透视表汇总不同用户购买订单数，金额step3：讲第二步结果可视化, 比如, 柱形图（1）不同渠道用户数, 金额（2）不同日期..._exce l趋势分析数据量

宁盾堡垒机双因素认证方案_horizon宁盾双因素配置-程序员宅基地

文章浏览阅读3.3k次。堡垒机可以为企业实现服务器、网络设备、数据库、安全设备等的集中管控和安全可靠运行，帮助IT运维人员提高工作效率。通俗来说，就是用来控制哪些人可以登录哪些资产（事先防范和事中控制），以及录像记录登录资产后做了什么事情（事后溯源）。由于堡垒机内部保存着企业所有的设备资产和权限关系，是企业内部信息安全的重要一环。但目前出现的以下问题产生了很大安全隐患：密码设置过于简单，容易被暴力破解；为方便记忆，设置统一的密码，一旦单点被破，极易引发全面危机。在单一的静态密码验证机制下，登录密码是堡垒机安全的唯一_horizon宁盾双因素配置

谷歌浏览器安装（Win、Linux、离线安装）_chrome linux debian离线安装依赖-程序员宅基地

文章浏览阅读7.7k次，点赞4次，收藏16次。Chrome作为一款挺不错的浏览器，其有着诸多的优良特性，并且支持跨平台。其支持（Windows、Linux、Mac OS X、BSD、Android），在绝大多数情况下，其的安装都很简单，但有时会由于网络原因，无法安装，所以在这里总结下Chrome的安装。Windows下的安装：在线安装：离线安装：Linux下的安装：在线安装：离线安装：..._chrome linux debian离线安装依赖

烤仔TVの尚书房 | 逃离北上广？不如押宝越南“北上广”-程序员宅基地

文章浏览阅读153次。中国发达城市榜单每天都在刷新，但无非是北上广轮流坐庄。北京拥有最顶尖的文化资源，上海是“摩登”的国际化大都市，广州是活力四射的千年商都。GDP和发展潜力是衡量城市的数字指...

随便推点

java spark的使用和配置_使用java调用spark注册进去的程序-程序员宅基地

文章浏览阅读3.3k次。前言spark在java使用比较少，多是scala的用法，我这里介绍一下我在项目中使用的代码配置详细算法的使用请点击我主页列表查看版本jar版本说明spark3.0.1scala2.12这个版本注意和spark版本对应，只是为了引jar包springboot版本2.3.2.RELEASEmaven<!-- spark --> <dependency> <gro_使用java调用spark注册进去的程序

汽车零部件开发工具巨头V公司全套bootloader中UDS协议栈源代码，自己完成底层外设驱动开发后，集成即可使用_uds协议栈 源代码-程序员宅基地

文章浏览阅读4.8k次。汽车零部件开发工具巨头V公司全套bootloader中UDS协议栈源代码，自己完成底层外设驱动开发后，集成即可使用，代码精简高效，大厂出品有量产保证。:139800617636213023darcy169_uds协议栈 源代码

AUTOSAR基础篇之OS(下)_autosar 定义了 5 种多核支持类型-程序员宅基地

文章浏览阅读4.6k次，点赞20次，收藏148次。AUTOSAR基础篇之OS(下)前言首先，请问大家几个小小的问题，你清楚：你知道多核OS在什么场景下使用吗？多核系统OS又是如何协同启动或者关闭的呢？AUTOSAR OS存在哪些功能安全等方面的要求呢？多核OS之间的启动关闭与单核相比又存在哪些异同呢？。。。。。。今天，我们来一起探索并回答这些问题。为了便于大家理解，以下是本文的主题大纲：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JCXrdI0k-1636287756923)(https://gite_autosar 定义了 5 种多核支持类型

VS报错无法打开自己写的头文件_vs2013打不开自己定义的头文件-程序员宅基地

文章浏览阅读2.2k次，点赞6次，收藏14次。原因：自己写的头文件没有被加入到方案的包含目录中去，无法被检索到，也就无法打开。将自己写的头文件都放入header files。然后在VS界面上，右键方案名，点击属性。将自己头文件夹的目录添加进去。_vs2013打不开自己定义的头文件

【Redis】Redis基础命令集详解_redis命令-程序员宅基地

文章浏览阅读3.3w次，点赞80次，收藏342次。此时，可以将系统中所有用户的 Session 数据全部保存到 Redis 中，用户在提交新的请求后，系统先从Redis 中查找相应的Session 数据，如果存在，则再进行相关操作，否则跳转到登录页面。此时，可以将系统中所有用户的 Session 数据全部保存到 Redis 中，用户在提交新的请求后，系统先从Redis 中查找相应的Session 数据，如果存在，则再进行相关操作，否则跳转到登录页面。当数据量很大时，count 的数量的指定可能会不起作用，Redis 会自动调整每次的遍历数目。_redis命令

URP渲染管线简介-程序员宅基地

文章浏览阅读449次，点赞3次，收藏3次。URP的设计目标是在保持高性能的同时，提供更多的渲染功能和自定义选项。与普通项目相比，会多出Presets文件夹，里面包含着一些设置，包括本色，声音，法线，贴图等设置。全局只有主光源和附加光源，主光源只支持平行光，附加光源数量有限制，主光源和附加光源在一次Pass中可以一起着色。URP：全局只有主光源和附加光源，主光源只支持平行光，附加光源数量有限制，一次Pass可以计算多个光源。可编程渲染管线：渲染策略是可以供程序员定制的，可以定制的有：光照计算和光源，深度测试，摄像机光照烘焙，后期处理策略等等。_urp渲染管线

推荐文章

热门文章

相关标签