Web基础 ( 一 ) 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基本语法

标签在< >之间 ,在 < 与标签名之间不能有空格
标签tag 元素 element 结点 node
有的标签有开始标签与结束标签 <标签> 内容 </标签>
标签之间可以嵌套存在父子关系
标签是大小写无关的，<b>跟<B>表示的含义相同。
标签内可以编写属性 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.1.4.2.按样式

HTML 标签可分为以下几类：

块级标签（Block-level elements）：

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

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

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

常见的块级元素有 <div>, <h1>, <p>, <ul>, <ol>, <li> 和 <table> 等。
行内标签（Inline elements）：

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

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

常见的行内元素有 <a>, <b>, <i>, <em>, <strong> 和 <span> 等。
行内块级标签（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>。

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

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

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<ol>：有序列表，指一组项目，每个项目之间没有中断，其中每个项目默认都有序号。通常用于表示按照一定顺序排列的项目。

<ol>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

<dl>：定义列表，指一组条目，每个条目由名称和值两部分组成。通常用于表示术语的定义或者元数据。

<dl>
  <dt>项目1</dt>
  <dd>项目1的值</dd>
  <dt>项目2</dt>
  <dd>项目2的值</dd>
</dl>

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

在这里插入图片描述

本文链接：https://blog.csdn.net/yuanchun05/article/details/130692319

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios