提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

Web前端开发HTML笔记

2023-02-18 16:45:07 时间

HTML称为超文本标记语言,CSS全称层叠样式,CSS可以让简单的HTML页面变得漂亮起来,通常会将HTML与CSS结合起来使用.

HTML 基础

通常情况下,一个最基本的网页格式如下面的例子所示的样子,具体的代码和解释如下:

<!DOCTYPE html>                #文档说明,告诉浏览器当前的文档类型
<html lang="en">               #指定文件的格式等
<head>                         #HTML头部信息
    <meta charset="UTF-8">     #指定文件编码方式
    <title>Title</title>       #指定文件标题
</head>
<body>                         #body区域是HTML文档的主体部分
</body>
</html>

Head 标签

head标签用于定义文档的头部,它是所有头部元素的容器.<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等

下面这些标签通常用在head部分：<base>,<link>,<meta>,<script>,<style>,以及<title>.

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="这里">                             #网页的关键字
    <meta name="description" content="这里">                          #网页的描述信息
    <meta http-equiv="Refresh" content="2;">                          #每2秒中刷新以下网页
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> #2秒后重定向到某网站
    <title>my web</title>                                             #网页的窗口标题
    <link rel="shortcut icon" href="http://www.xx.com/favicon.ico">   #指定网页图标
    <link rel="stylesheet" href="mycss.css">                          #引用外部css文件
    <script type="text/javascript" src="./lyshark.js"></script>       #引用外部js文件
</head>

Body 标签

body 标签是成对出现的,在<body>...</body>标签对之间的内容,将显示在Web浏览器窗口的用户区域,它是HTML文档中最主要的部分

在body标签中可以规定整个文档的一些基本属性,例如以下几个属性.

属性名称

属性说明

bgcolor

指定HTML文档背景色

text

指定HTML文档中文字颜色

link

指定HTML文档中,待链接超链接对象的颜色

alink

指定HTML文档中,链接超链接对象的颜色

vlink

指定HTML文档中,已链接超链接对象的颜色

background

指定HTML文档中,文档的背景文件

特殊字符

在HTML中有很多特殊的符号是需要特别处理的,例如<,>这两个符号是用来表示标签的开始和结束的,没有办法通过直接按键来输入,必须用输入编码表示法&lt;来输入.

源代码

HTML显示结果

& nbsp;

插入一个非间断空格

& ensp;

插入两个普通空格的宽度

& emsp;

插入四个普通空格的宽度

<

插入一个小于号<

>

插入一个大于号>

&

插入一个and符号

"

插入一个双引号

格式标签: 格式化标签常用的如下所示,其中Div标签是在布局中使用最频繁的,其他的用的少.

<h1></h1>     标题标记,共有6个级别,范围1~6
<div></div>   块级标签,分区显示标记,也称之为层标记
<p></p>       换段落标记,由于多个空格和回车在HTML中会被等效为一个空格
<span></span> 内联标签,字符占多少标签就占多少
<br><br/>     强制换行标记,让后面的文字、图片、表格等,显示在下一行
<hr><hr/>     水平分割线标记,段落之间的分割线
<center>      居中对齐标记,让段落或者是文字相对于父标记居中显示
<pre></pre>   预格式化标记,保留预先编排好的格式

文本标签 常用的文本标签也就以下这些,但是我们基本不会使用,字体调整一般会使用CSS来操作.

<b></b>       粗字体标记
<i></i>       斜字体标记
<sub></sub>   文字下标字体标记
<sup></sup>   文字上标字体标记
<tt>:</tt>    打印机字体标记
<cite></cite> 引用方式的字体,通常是斜体
<em></em>     表示强调,通常显示为斜体字
<strong>      表示强调,通常显示为粗体字
<small>       小型字体标记
<big></big>   大型字体标记    
<u></u>       下划线字体标记

<font>:字体设置标记,设置字体的格式,三个常用属性
       (1)size（字体大小）:<font size="14px">
       (2)color（颜色）:<font color="red">
       (3)face（字体）:<font face="微软雅黑">

列表标签 列表标签中最常用的也就是li,ul这两种形式,分别是有序和无序标签组.

<li>: 列表项目标记,每一个列表使用一个<li>标记
<ul>: 无序列表标记,此标签声明的列表没有序号
<ol>: 有序列表标记,可以显示特定的一些顺序
<dl><dt><dd>: 定义型列表,对列表条目进行简短的说明

< -----------------------[ol定义格式]----------------------- >
<ol type="符号类型">
	<li type="符号类型"></li>
	<li type="符号类型"></li>
</ol>

< -----------------------[dl定义格式]----------------------- >
<dl>
	<dt>软件说明：</dt>
	<dd>简单介绍软件的功能及基本应用</dd>
	<dt>软件界面</dt>
	<dd>用于选择软件的外观</dd>
</dl>

A超链接标签: 该标签定义超链接,用于从当前页面链接到其他页面,或从页面的某个位置跳转到当前页面的指定位置.

<a href="地址" target="打开方式" name="页面锚点名称" >链接文字</a>
<a href="https://baidu.com" target="_blank">百度</a>

< -----------------------[参数解释]----------------------- >
href:链接的地址,链接的地址可以是一个网页,也可以是一个视频、图片、音乐等

target:
	(1) _blank在一个新的窗口中打开链接
	(2) _seif(默认值)在当前窗口中打开链接
	(3) _parent在父窗口中打开页面（框架中使用较多）
	(4) _top在顶层窗口中打开文件（框架中使用较多）

超链接瞄点: 使用超链接瞄点,如下例子寻找页面中id=i1的标签,将其标签显示在页面顶部.

<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
 
    <!--id每一个标签的id属性值不允许重复;id属性可以不写-->
    <div id="i1" style="height: 800px";>第一章内容</div>
    <div id="i2" style="height: 500px";>第二章内容</div>
</body>

Img图片标签: 该标签用于指定嵌套一些图片图像,将图像展现出来.

<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="属性值" alt="属性值">

< -----------------------[参数解释]----------------------- >
src属性：指定我们要加载的图片的路径和图片的名称以及图片格式
width属性：指定图片的宽度,单位px、em、cm、mm
height属性：指定图片的高度,单位px、em、cm、mm
border属性：指定图标的边框宽度,单位px、em、cm、mm

alt属性：(1)作用一：当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字
         (2)作用二：如果图像没有下载或者加载失败,会用文字来代替图像显示
         (3)作用三: 搜索引擎可以通过这个属性的文字来抓取图片

音频与视频: 下面的两对,embed是音频文件,video是视频文件,其他参数自行百度.

<div class="mp3">
	<embed height="50" width="100" src="music.mp3">
</div>

<div class="mp4">
	<video width="320" height="240" controls>
		<source src="movie.mp4" type="video/mp4">
	</video>
</div>

Label标签: label标签不会向用户呈现任何特殊效果,只起到显示的作用,标签需要和控件ID关联.

<form>
    <label for="username">用户名:</label>
    <input type="text" name="user" id="username">
    
    <label for="password">密码:</label>
    <input type="password" name="pasd" id="password">
</form>

Form 表单: 用于生成输入表单,该元素是用来提交数据必选结构,也是HTML中最基础的元素.

<form action="服务器地址" name="表单名称" method="post|get">

< -----------------------[参数解释]----------------------- >
name       指定表单的唯一名称,建议其属性与ID属性保持一致方便管理
enctype    设置表单的资料的编码方式,用于input标签type="file"时使用
target     指定使用哪种方式打开目标URL,属性有:_blank,_parent,_self,_top四个值.
action     表单数据的处理程序的URL地址,表单中不需要使用action属性也要指定其属性为"no"

method     传送数据的方式,分为post和get两种方式
	get方式:  get方式提交时,会将表单的内容附加在URL地址的后面,且不具备保密性
	post方式: post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理

Input 控件: 该表单是网页控件表单,其中包括了常用的网页控件,也是最重要的表单之一.

<input type="类型" name="" value="" size="" maxlength="" placeholder="" />
<input type="file" name="上传文件" enctype="multipart/form-data"/>

< -----------------------[type类型]----------------------- >
type = "text"       文本输入框        type = "color"   颜色选择器
type = "password"   密码输入框        type = "date"    日期选择器
type = "email"      邮件输入框        type = "time"    时间选择器

type = "radio"      单选框           type = "week"     周选择器
type = "checkbox"   复选框           type = "month"    月选择器 

type = "submit"     提交按钮         type = "number"   数字选择器 
type = "button"     普通按钮         type = "search"   本地搜索框  
type = "reset"      重置按钮         type = "range"    网页拖动条  

type = "hidden"     隐藏域           type = "file"     文件域   
type = "image"      图像域           type = "progress" 滚动条 
      
< -----------------------[参数解释]----------------------- >
value       默认输入的值
name        定义input名称
size        定义输入框框的长度
src         指定图像域所显示图像的URL

checked     设置指定单选框复选框为选中状态,该属性只能是checked
disabled    设置首次加载时禁用当前元素,该属性只能是disabled
maxlength   限制输入框最大允许输入的字符长度,maxlength=10
readonly    指定该文本框内的值不允许用户的修改,readonly=true
placeholder 指定输入框的默认提示信息,placeholder="hello lyshark"

Select 表单: 该表单用于创建列表框或者是下拉菜单,该元素必须和option元素结合使用.

<select name="名称" size="10" multiple>
	<optgroup label="北方"/>
		<option value="1" selected>北京</option>
		<option value="2">山东</option>
	<optgroup label="南方"/>
		<option value="3" selected>深圳</option>
		<option value="4">上海</option>
		<option value="5">江苏</option>
</select>

< -----------------------[参数解释]----------------------- >
select 属性
		size      指定该列表框内可同时显示多少个列表项
		name      定义这个列表的名称,就是列表的名字
		multiple  该属性不用赋值其作用是,是否使用多选或者下拉框
option 属性
		value     给选项赋值,指定传送到服务器上面的值
		selected  指定默认的选项
optgroup 属性
		label     分组的名字

Textarea 标签: 可以实现接收用户输入,用户可以在文本域中输入任意字符,并且长度没有限制.

<textarea name="名称" rows="" cols="" value=""> ... ... </textarea>

< -----------------------[参数解释]----------------------- >
name       指定标签的名字
value      指定标签的默认值
cols       指定文本域的宽度
rows       指定文本域的高度
disabled   指定禁用文本域
readonly   指定文本域只读

List 列表: 列表方法,可以将一个普通文本框,通过使用datalist标签将其变成一个列表.

<form action="buy" method="post">
	<input type="text" name="test" list="book">
</form>

<datalist id="book">
	<option value="Linux"> Linux 系统管理</option>
	<option value="Python"> Python 全栈开发</option>
	<option value="Java"> Java 程序设计</option>
</datalist>

Table 表格: 表格的定义由table标签来定义,每个表格均有若干行,每行被分割为若干单元格由td标签定义.

<table border="1">				        定义一个表格
	<caption>				        定义表格标题
		<tr>				        定义表格的行
			<th>姓名</th>           字段1
			<th>性别</th>           字段2
			<th>年龄</th>           字段3
		</tr>
		<tr>
			<td rowspan="1">陈荣华</td>	定义表格单元
			<td rowspan="3">男</td>
			<td rowspan="2">22岁</td>
		</tr>
	</caption>
</table>

Fieldset标签: 该标签主要用来装饰form表单,<legend>标签为fieldset元素定义标题.

<form name="login" method="get">
    <fieldset>
        <legend>用户登录</legend>
        用户名:<input type="text" name="username">
        密码:<input type="password" name="password">
        <input type="submit" value="登陆">
    </fieldset>
</form>

Iframe标签: 创建包含另外一个文档的内联框架(即行内框架),说白了就是网页中嵌入网页.

<iframe src="https://www.baidu.com" width="100%" height="500">指定高度宽度显示</iframe>
<iframe src="https://www.baidu.com" frameborder="0">移除边框显示</iframe>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

相关文章