您的位置: 首页  >  文章  >  Web前端——HTML

Web前端——HTML

分类: 文章 • 2023-12-15 21:16:58

>Web前端概述

  1. html：基本的标签，建筑队，毛坯房
  2. css：装修队，装修
  3. js：动态效果/实现功能
  4. bootstrap：现成的前端框架，主要用于展示 

 >HTML概述

HTML：纯文本文件，超文本文件，html/htm为后缀；

HTML文件用浏览器来解析，和显示效果；

HTML是一种标签语言，一切内容要写在标签里<>,其中标签名字都已经定义好了；（对比：xml语言的标签全部需要自己定义）

HTML的版本：h4/h5(h5版本多了一些标签，还支持”媒体查询“，即支持不同大小的设备来浏览)

网页文件的首行区别：

h4：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

h5：<!DOCTYPE html>

>写一个HTML就两步：

1.加入一个你想要的功能的标签；

2.查手册调整这个标签的属性，调整显示效果；

>基本语法

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
         <p>
         </p>
	</body>
</html>
  1. 大小写不区分；
  2. 标签分单双，双标签 中间 是 被这个标签 修饰的文本 或 其他标签.；
  3. 标签大多数有属性，属性写在开始标签里，单标签时，属性写在 / 前面；
  4. 标签可以嵌套，不能交叉；
  5. 关于head标签：通常给浏览器使用，告知浏览器怎么解析本页面文件；
  6. 标签定义了一些基本的格式的展示，属性定义了本标签的一些格外展示；

 >实体

HTML预定义了一些字符，想使用这些字符的时候，使用实体代替：

Web前端——HTML

>路径

相对路径：从A找B的路径称为相对路径（从A所在的文件夹去找B）

返回上级目录: ../
进入a目录:  a/

绝对路径：在某个系统里，唯一一条确定某个资源的路径。

盘符：//////（本地文件协议）

http：//IP：端口/项目/文件（HTTP协议）

（通过服务器网络访问的形式，看不到服务器上的绝对路径下的资源，必须用相对路径）

>img标签

<img src="img/捕获.PNG"  alt="图片挂了" title="鼠标悬浮看提示信息" width="200px" height="200px"/>

>a标签(超链接)

超链接是一个网页中最最重要的组成部分.
a:标签属性：   href: 链接到的资源的路径   target: 在何处打开 href路径表示的资源  _blank:新窗口.

a:标签做锚点：         

1:页面间的链接.
2:锚链接.  返回页面顶部 .书签. 中部.

需要两对儿a标签：1对做定点的"桩子" 使用name/id属性来标识  
                               1对做点击使用  href 使用# 加上 桩子名 来定位桩子

3:功能性.  打开一个图片/mp3/打开一个js的功能.

<a id="top">顶部</a><br />
<img src="img/捕获.PNG" width="50px" height="2000px" />
<a href="#top">回顶端</a>


>marquee标签（滚动文字或图片）

<marquee direction="right">滚动文字体！</marquee>
<marquee behavior="alternate" scrollamount="100" scrolldelay="100" width="1000px" height="100px" ><img src="img/捕获.PNG" />
</marquee>

>ul/ol和li标签（列表和列表项）

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

Web前端——HTML

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
有用的：type=”disc” | ”square” | ”circle”

Web前端——HTML

>audio标签（音频标签）

<audio src=””  autoplay=””  controls=””  loop=””></audio>

属性名：

src:音频地址。

autoplay:是否装载好后自动播放。

controls:是否显示播放的控制条。

loop:是否重复播放。

>video标签（视频标签）

<video src=””  autoplay=””  controls=””  loop=”” width=””  height=””></video>

属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

>table标签（表格）

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、表格等等。

属性

描述

border

隶属于<table>标签，定义表格宽度

cellspacing

隶属于<table>标签，单元格间距，定义单元格之间的距离

cellpadding

隶属于<table>标签，单元格边距，定义单元格内容与边框的距离

bgcolor

应用于<table>、<td>、<th>标签，设置表格的背景色（过时）

background

应用于<table>、<td>、<th>标签，设置表格的背景图片（过时）

align

应用于<table>、<td>、<th>标签，表格是设置表格在外部容器中的对齐方式，单元格是设置内容的对其方式（过时）

colspan

应用于<td>、<th>标签，合并列

rowspan

应用于<tr>标签，合并行

注意：

  1. 表格默认没有边框，添加边框可以添加border属性，或者添加frame和rules属性；
  2. 表格的作用：用来做数据展示；早期用来做布局，但后来就用作小区域的布局，大布局用层div来做；
  3. 表格做布局时，经常用到单元格合并，多格在合并前分别在不同行/列，合并后在统一行/列，称之为行/列合并；
  4. 合并操作：在合并的多个格子的第一个格子里写合并属性（rowspan=合并参与总数/colspan=合并参与总数）；
  5. 将被合并的单元格注释掉；

>行级标签与块级标签(css中行块之间可以相互转换)

行级元素/标签：

  • 行级元素的 宽高 不可调，由内容决定；
  • 行级元素的 内填充 不可调整；
  • 行级元素的 外边距 不可调整；
  • 行级元素跟其他行级元素挤在一行内；
  • 常见的行级元素有：a/ font/ span/ b/...

块级元素/标签：

  • 块级元素的 宽高 可调整；
  • 块级元素的 内填充 可调整；
  • 块级元素的 外边距 可调整；
  • 块级元素自己独占一行；
  • 常见的块级元素有：h1-6/ p/ table/ div/ form/...

特别的，例如 img/iframe都是行级块元素（跟其他行元素挤在一行，但是宽高可控）

 >iframe标签（内嵌页面）

注意：frameset和frame已经过时，且强烈不建议使用了；

<iframe src="URL"></iframe>
属性 值 描述
align
  • left
  • right
  • top
  • middle
  • bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。
frameborder
  • 1
  • 0
 规定是否显示框架周围的边框。
height
  • pixels
  • %
 规定 iframe 的高度。
longdesc URL 规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
scrolling
  • yes
  • no
  • auto
 规定是否在 iframe 中显示滚动条。
src URL 规定在 iframe 中显示的文档的 URL。
width
  • pixels
  • %
 定义 iframe 的宽度。

 

>form标签（表单标签）

  • 对于后端人员，学习页面最重要的就是表单和超链接。折两部分可以与后台的Java程序进行通信；
  • 表单是form标签，是用来收集用户在页面上的数据的。
  • 表单里有很多组件，不同组件有不同的显示效果。文本框，密码框，下拉菜单.....
  • 一个表单里可以设计很多不同组件，这些组件通常会把收集的数据 一起发送 给服务器程序；

 重要属性：

action：值是一个地址/路径。通常是服务器端程序的路径（可以理解为表单数据提交给谁）

method：表单的提交方式。常用的两种方式 get/post

--get：会把你的请求参数显示在地址栏上，使用 ？ 开头 k=v&ki=vi的形式，携带参数；

get的方式，不太安全，携带的参数有大小要求；get是默认提交方式，超链接也是使用get方式提交；

--post：不会把提交的数据显示，会封装在请求体里，这种方式传递的参数没有大小限制；

更加安全，文件上传是使用的post方式；

enctype：整个表单提交的数据的编码格式。如果没有文件上传组件，则不需要改动该属性；

name：name属性（通常给后台程序使用），可以重复，必须写，否则不能提交到服务器，因为要告知服务器你提交的数据是什么数据；

id：id属性（通常用在前端），且唯一；

>表单组件的控制属性

readonly：只读，值跟标签名一样，修饰 单行文本/密码框 可以提交；

disable：禁用，值跟标签名一样，修饰任意表单组件，禁用不能提交；

checked：默认选择，单选按钮/复选按钮；

selected：默认选择，下拉菜单；

>h4的input标签（input组件）

Web前端——HTML

>h5新增的input标签（了解）

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

> select标签（下拉菜单组件）

<!--select-->
		<form>
			<select>
				<!--选项组-->
				<optgroup label="华北">
					<!--选项-->
					<option>北京</option>
					<option>天津</option>
				</optgroup>
				<optgroup label="华东">
					<option>山东</option>
					<option>江苏</option>
				</optgroup>
			</select>
		</form>

>textarea标签（多行文本标签）

<textarea name="note" cols="" rows=""></textarea>

>button标签（按钮标签）

Web前端——HTML

>meta标签：

Web前端——HTML

相关推荐