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

智能推荐

字典树_字典树建树-程序员宅基地

文章浏览阅读271次。原创字典树字典树，又称单词查找树，Trie树，是一种树形结构，哈希表的一个变种。用于统计，排序和保存大量的字符串（也可以保存其的）。优点就是利用公共的前缀来节约存储空间。在这举个简单的例子：比如说我们想储存3个单词，nyist、nyistacm、nyisttc。如果只是单纯的按照以前的字符数组存储的思路来存储的话，那么我们需要定义三个字符串数组。但是_字典树建树

Android framework--谈谈AMS.updateOomAdjLocked-程序员宅基地

文章浏览阅读3.1k次。关于Android系统的内存回收机制，相信大家都不陌生，Android基于各个应用进程承载四大组件的状态对应用进程进行重要性评估，并在系统内存紧张时根据重要性由低到高来选择杀死应用进程，以达到释放内存的目的。重要性评估由AMS执行，具体来说就是AMS.updateOomAdjLocked函数，反过来说，AMS.updateOomAdjLocked的作用就是更新应用进程的重要性。应用进程（Pro..._updateoomadjlocked

计算机基础——操作系统-程序员宅基地

文章浏览阅读8.5k次，点赞28次，收藏38次。本章将会讲解计算机的操作系统。操作系统（Operating System,OS）就好比一个计算机内部的管理者，是管理和控制计算机硬件与软件资源的计算机程序，直接运行在“裸机”上的最基本的系统软件，任何其他应用软件都必须在操作系统的支持下才能运行，操作系统是用户和计算机的接口，同时也是计算机硬件和其他软件的接口。操作系统的功能包括管理计算机系统的硬件，软件及数据资源，控制程序运行，为其他应用软件提供支持等。_操作系统

Python之pip download 命令用法-下载指定平台和python版本的依赖包-程序员宅基地

文章浏览阅读1.9w次，点赞7次，收藏27次。pip download 和 pip install 有着相同的解析和下载过程，不同的是，pip install 会安装依赖项，而 pip download 会把所有已下载的依赖项保存到指定的目录 ( 默认是当前目录 )，此目录稍后可以作为值传递给 pip install --find-links 以便离线或锁定下载包安装_pip download

centos7设置密码策略_CentOS7 设置密码复杂度-程序员宅基地

文章浏览阅读3.4k次。在CentOS下设置密码复杂度分为两步(1)修改/etc/login.defs文件vim /etc/login.defsPASS_MAX_DAYS90　　 # 密码最长过期天数PASS_MIN_DAYS80　　　 # 密码最小过期天数PASS_MIN_LEN10　　　　# 密码最小长度PASS_WARN_AGE7　　　 # 密码过期警告天数(2)..._echo 'mypassword' | openssl passwd -6 -stdin centos7

王斌老师的博客_王斌 github-程序员宅基地

文章浏览阅读480次。http://blog.sina.com.cn/s/blog_736d0b9101018cgc.html_王斌 github

随便推点

Java递归实现Fibonacci数列计算_用递归方法编程计算fibonacci数列：(n=10)，fac.jpg-程序员宅基地

文章浏览阅读2.8k次。实现代码如下:public static int factorial(int n){ if (n <= 1){ return 1; } return factorial(n-1) + factorial(n-2); }测试代码如下:System.out.println(factorial(40));测..._用递归方法编程计算fibonacci数列：(n=10)，fac.jpg

scratch班级名称 电子学会图形化编程scratch等级考试四级真题和答案解析B卷2020-9-程序员宅基地

文章浏览阅读1.3k次。scratch班级名称一、题目要求1、准备工作 保留小猫角色，白色背景 2、功能实现 点击绿旗后，询问请输入年级数，等待输入年级数 询问请输入班级数，等待输入班级数 定义列表“全校班级”，假设每个班级的班级数相同，所有班级名称自动生成并保存到全校班级中。 例如，输入年级数为5，输入班级数为8，可以看到舞台上列表全校班级的内容为：1（1）班、1（2）班、...5（7）班、5（8）班 二、案例分析1、角色分析角色：小猫2、背景_scratch班级名称

郁金香2021年游戏辅助技术中级班（七）_squad辅助科技-程序员宅基地

文章浏览阅读379次。郁金香2021年游戏辅助技术中级班（七）058-C,C++写代码HOOK分析封包数据格式A059-C,C++写代码HOOK分析封包数据格式B-detours劫持060-C,C++写代码HOOK分析封包数据格式C-过滤和格式化061-C,C++写代码HOOK分析封包数据格式D-写入配置文件062-C,C++写代码HOOK分析封包数据格式D-读取配置文件058-C,C++写代码HOOK分析封包数据格式A_squad辅助科技

ssh登录qemu虚拟机里的linux系统_qemu ssh连接-程序员宅基地

文章浏览阅读350次。上面的命令启动了一个带有NAT网络的QEMU虚拟机，并设置了端口转发，将主机的2222端口映射到虚拟机的22端口（SSH端口）。1、安装openssh，如果是根文件系统用buildroot构建，打开 BR2_PACKAGE_OPENSSH 开关。2、在qemu的启动脚本里增加。3、在虚拟机里增加一个新用户。4、向虚拟机里发送文件。_qemu ssh连接

用netty实现zcool_Netty框架入门-程序员宅基地

文章浏览阅读63次。一、概述Netty是由JBOSS提供的一个java开源框架。Netty提供异步的、事件驱动的网络应用程序框架和工具，用以快速开发高性能、高可靠性的网络服务器和客户端程序。二、体系结构图三、Netty的核心结构Netty是典型的Reactor模型结构，在实现上，Netty中的Boss类充当mainReactor，NioWorker类充当subReactor(默认NioWorker的个数是当前服务器的..._channelconnected

SpringBoot 过滤器 filter 3种方法_spring boot filter 配置-程序员宅基地

文章浏览阅读4.7k次。最近Spring Boot项目做单点登录对接的时候，在配置过滤器的时候，找了几种方法，记录一下。欢迎评论补充沟通~由于之前JAVA Web项目最开始都有web.xml配置，随着框架慢慢的进化，从Spring Boot开始，已经没有了web.xml配置文件。那原来在web.xml里，配置的filter过滤器，在Spring Boot中怎么配置呢？注意，这个自定义类，也不能加@Component或@Configuration注解，加了就会初始化Filter了，过滤全部的路径了。_spring boot filter 配置

推荐文章

热门文章

相关标签