首页 > 其他分享 >（二）网页前端开发基础之HTML

（二）网页前端开发基础之HTML

时间：2024-04-11 09:29:41浏览次数：29  
标签：... 网页 标记 指定 表单 HTML 前端开发 页面

HTML是一种在因特网上常见的网页制作标注性语言，但因缺少程序设计语言所应有的特征，不能算作一种程序设计语言。它通过浏览器的翻译将网页中的内容呈现给用户。对于网站设计人员，HTLM和CSS是一起用的，它俩的关系是“内容”和“形式”，由HTML确定网页的内容，CSS实现页面的表现形式。两者完美搭配使页面更加美观、大方、容易维护。

超文本语言、HTML标记不区分大小写的。

1、HTML文档结构

HTML页面的基本结构：<html>、<head>、<title>、<body>标记。

  • <html>标记

<html>...</html>

该标记是HTML文件的开头。所有HTML文件都以<html>标记开头，</html>标记结束。

HTML页面的所有标记都要放置在<html>...</html>标记之间，没有实质性功能，但必不可少

  • <head>标记

<head>...</head>

 该标记是HTML文件的头标记。作用是放置HTML文件的信息，如定义CSS样式代码可放置在<head>...</head>标记之间。

  • <title>标记

<title>...</title>

 该标记是标题标记。可将网页的标题定义在<title>...</title>之间，例如定义网页的标题为“HTML页面”，<title>标记被定义在<head>标记中。

  • <body>标记

<body>...</body>

 <body>是HTML页面的主体标记。页面中的所有内容都定义在<body>标记中。该标记本身也具有控制页面的一些特性，如控制页面的背景图片和颜色等。

2、HTML文本标记

  • 换行标记

<br>

单独标记。使网页中的文字实现换行。哪里需要哪里搬。 

<html>
<head>
<meta charset="UTF-8">
<title>HTML页面</title>
</head>
<body>
社会主义核心价值观<br>
富强 民主 文明 和谐<br>
自由 平等 公正 法治<br>
爱国 敬业 诚信 友善<br>
</body>
</html>

 

  • 段落标记

<p>...</p>

 在段前和段后各添加一个空行，定义在段落标记中的内容不受该标记影响。

  • 标题标记

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

创建不同级别的标题。数字越大，表示级别越低，文字的字体也就越小。

<html>
<head>
<meta charset="UTF-8">
<title>HTML页面</title>
</head>
<body>
<h1>社会主义核心价值观</h1><br>
<h2>富强 民主 文明 和谐</h2><br>
<h3>自由 平等 公正 法治</h3><br>
<h4>爱国 敬业 诚信 友善</h4><br>
<h5>时刻保持解决大党独有难题的清醒和坚定，把党的伟大自我革命进行到底</h5>
<h6><p>治国必先治党，党兴才能国强。</p></h6>
<h6>党的二十大发出了为了全面建设社会主义现代化国家、
全面推进中华民族伟大复兴而团结奋斗的伟大号召，
党领导的社会革命迈上新征程，
党的自我革命必须展现新气象，
全面从严治党更要有新的认识、新的作为。</h6>
</body>
</html>

  • 居中标记

<center>...</center>

默认的布局方式是从左到右依次排序。 <center>可使页面中的内容在页面的居中位置显示。

<html>
<head>
<meta charset="UTF-8">
<title>HTML页面</title>
</head>
<body>
<center>
<h1>社会主义核心价值观</h1>
<h2>富强 民主 文明 和谐<br>
自由 平等 公正 法治<br>
爱国 敬业 诚信 友善</h2><br>
</center>
</body>
</html>

  • 文字列表标记

分为无序列表和有序列表

（1）无序列表

<ul>
<li>列表项1
<li>列表项2
<li>列表项3
...
</ul>

每个列表项的前面添加一个圆点标记。

<html>
<head>
<meta charset="UTF-8">
<title>HTML页面</title>
</head>
<body>
<h1>社会主义核心价值观</h1>
<h2>
<ul>
<li>国家：富强 民主 文明 和谐
<li>社会：自由 平等 公正 法治
<li>公民：爱国 敬业 诚信 友善
</ul>
</h2>
</body>
</html>

（2）有序列表

<ol>
<li>列表项1
<li>列表项2
<li>列表项3
...
</ol>

 将列表项进行排顺序：1.  ....     2.   ...    3.   ...

<html>
<head>
<meta charset="UTF-8">
<title>HTML页面</title>
</head>
<body>
<h1>社会主义核心价值观</h1>
<ol>
<li><h2>国家：富强 民主 文明 和谐</h2>
<li><h2>社会：自由 平等 公正 法治</h2>
<li><h2>公民：爱国 敬业 诚信 友善</h2>
</ol>
</body>
</html>

代码有些问题，会出现黄色警告，但不影响页面显示，好像是标记嵌套错误。

3、HTML表格标记

 表格用来存储数据。表格包含标题、表头、行、单元格。在HTML页面中定义表格，需使用以下5个标记：

  • 表格标记<table>

<table>...</table>

 表示整个表格。该标记中有多个属性：

属性描述
width设置表格宽度
border设置表格边框
align设置表格对齐方式
bgcolor设置表格背景色

  • 标题标记 <caption>

<caption>...</caption>

 可设置属性。（还得找找属性有哪些）

  • 表头标记<th>

<th>...</th>

 可设置属性。

  • 表格行标记<tr>

<tr>...</tr>

一组<tr>标记表示表格中的一行，要嵌套在 <table>标记中使用，可设置属性。

  • 单元格标记<td>

<td>...</td>

 又称为列标记。一个<tr>标记中可以嵌套多个<td>标记。可设置属性。

<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<table width="318" height="167" border="1" align="center">
<caption>社会主义核心价值观</caption>
<tr>
	<th align="center" valign="middle" >国家</th>
	<th align="center" valign="middle" >社会</th>
	<th align="center" valign="middle" >公民</th>
</tr>
<tr>
	<td align="center" valign="middle">富强</td>
	<td align="center" valign="middle">自由</td>
	<td align="center" valign="middle">爱国</td>
</tr>
<tr>
	<td align="center" valign="middle">民主</td>
	<td align="center" valign="middle">平等</td>
	<td align="center" valign="middle">敬业</td>
</tr>
<tr>
	<td align="center" valign="middle">文明</td>
	<td align="center" valign="middle">公正</td>
	<td align="center" valign="middle">诚信</td>	
</tr>
<tr>
	<td align="center" valign="middle">和谐</td>
	<td align="center" valign="middle">法治</td>
	<td align="center" valign="middle">友善</td>
</tr>
</table>
</body>
</html>

在实际开发中，常用于设计页面。在页面中创建一个表格，并设置没有边框，之后通过该表格将页面划分为几个区域，分别对几个区域进行设计。 

4、HTML表单标记

网站登录页面。表单是用户与网页交互信息的重要手段。

  •  表单标记<form>

<form>...</form>
<!-- 基本语法：-->
<form action="url" method="get"|"post" name="name" onSubmit="" target="">...</form>

 该标记中，可定义处理表单数据程序的URL地址等信息。

各属性说明：

属性描述
action指定处理表单数据程序的URL地址
method用来指定数据传送到服务器的方式，该属性有get与post两种属性值。get表示将输入的数据追加在action指定的地址后面，并传送到服务器。post会将输入的数据按照HTTP中的post传输方式传送到服务器。
name指定表单的名称，可自定义
onSubmit用于指定当用户点击提交按钮时触发的事件
target指定输入数据结果显示在哪个窗口

target：指定输入数据结果显示在哪个窗口，属性值：

             _blank：在新窗口打开目标文件；

             _self：表示在同一个窗口中打开，这项一般不用设置；

             _parent：在上一级窗口中打开，一般使用框架页时经常使用；

             _top：在浏览器的整个窗口中打开，忽略任何框架。

 有个例子：为创建表单，设置表单名称为form，当用户提交表单时，提交至action.html页面进行处理。 

<form id="form1" name="form" method="post" action="action.html" target="_blank">

</form>

  • 表单输入标记<input>

可以向页面中添加单行文本、多行文本、按钮等

<input>标记的语法格式如下：

<input type="image" disabled="disabled" checked="checked" width="digit" 
height="digit" maxlenght="digit" readonly="" size="digit" 
src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">

标记详细属性介绍：＜input＞表单输入标记-CSDN博客

太多了，我懒得再打一遍..........

  • 下拉菜单标记<select>

<!-- <select>标记的语法格式 -->
<select name="name" size="digit" multiple="multiple" disabled="disabled">

<option>...</option>
<option>...</option>
<option>...</option>
...
</select>

 该标记可以在页面中创建下拉列表，使用<option>标记向列表中添加内容。

属性描述
 name指定列表框的名称
size指定列表框中显示的选项数量，超出该数量的选择可以通过拖动滚动条查看
disabled指定当前列表框不可使用
multiple让多行列表框支持多选

实验例子：

<body>
下拉列表框：
<select name="select">
<option>数码相机</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>&nbsp;
<br>
多行列表框（不可多选）：
<select name="select2" size="2">
<option>数码相机</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>&nbsp;
<br>
多行列表框（可多选）：
<select name="select3" size="3" multiple>
<option>数码相机</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
</body>

  • 多行文本标记<textarea>

<!-- 语法格式 -->
<textarea cols="digit" rows="digit" name="name" 
          disabled="disabled" readonly="readonly" 
          wrap="value"> 默认值 
</textarea>

通常情况下，<textarea>出现在<form>的标记内容中

属性描述
name用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用
cols用于指定多行文本框显示的列数（宽度）
rows用于指定多行文本框显示的行数（高度）
disabled用于指定当前多行文本框不可使用（变成灰色）
readonly用于指定当前多行文本框为只读
wrap用于设置多行文本中的文字是否自动换行

实验例子：

<body>
<form action="" name="form1" method="post">
	<textarea rows="5" cols="30" name="content" wrap="hard">
	</textarea>
</form>
</body>

5、超链接与图片标记

  • 超链接标记<a>

<!-- 语法格式 -->
<a href="">...</a>

        在网站中实现从一个页面跳转到另一个页面，就是用它来完成的。

        属性href用来设定连接到哪个页面中。

  • 图像标记<img>

<!-- 语法格式 -->
<img src="url" width="value" height="value" border="value" alt="提示文字">

        浏览网站中通常会看到各式各样漂亮的图片，在页面添加的图片是通过<img>标记实现的。

属性描述
src指定图片来源
width指定图片宽度
height指定图片高度
border指定图片外边框的宽度，默认值为0
alt指定当图片无法显示时显示的文字

        实验例子：

<body>
<table width="409" height="523" border="1" align="center">
	<tr>
		<td width="199" height="190">
			<img src="../pic/a.jpg"/>
		</td>
		<td width="194" >
			<img src="../pic/b.jpg"/>
		</td>
	</tr>
	<tr>
		<td height="55" align="center" valign="middle"><a href="002.jsp">查看详情</a></td>
		<td align="center" valign="middle"><a href="002.jsp">查看详情</a></td>
	</tr>
	<tr>
		<td height="210">
			<img src="../pic/a.jpg"/>
		</td>
		<td>
			<img src="../pic/b.jpg"/>
		</td>
	</tr>
	<tr>
		<td height="55" align="center" valign="middle"><a href="002.jsp">查看详情</a></td>
		<td align="center" valign="middle"><a href="002.jsp">查看详情</a></td>
	</tr>
</table>
</body>

         

 点击查看详情，跳转界面到指定页面，比如我写的是“href="002.jsp”

标签：...,网页,标记,指定,表单,HTML,前端开发,页面
From： https://blog.csdn.net/m0_66432226/article/details/137268164

相关文章

  • 简单的网页登录页面
    实景图 代码1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"name="viewport">......
  • 前端开发之el-table(vue2中）固定列fixed滚动条被固定列盖住
    固定列fixed滚动条被固定列盖住效果图前言解决方案效果图前言在使用fixed固定列的时候会出现滚动条被盖住的情况解决方案改变el-table固定列的计算高度即可.el-table{.el-table__fixed-right,.el-table__fixed{height:auto!important;......
  • HTML5基本常用标签
    一、标题主标题                <h1>标题</h1> 副标题                <h2>标题二</h2> 正文                 <p>内容</p>        这边新建一个文本为index.html的示例并且运行如下：二、根标签  ......
  • 游戏分享网站的设计与实现|SpringBoot+ Mysql+Java+ B/S结构(可运行源码+数据库+LW)手
    本项目包含可运行源码+数据库+LW，文末可获取本项目的所有资料。推荐阅读300套最新项目持续更新中.....最新ssm+java项目文档+视频演示+可运行源码分享最新jsp+java项目文档+视频演示+可运行源码分享最新SpringBoot项目文档+视频演示+可运行源码分享2024年56套包含java，ssm......
  • 前端开发命名规范
    前言优秀的代码往往是最通俗易懂的代码，在于它的易于维护。在开发过程中，变量/方法优秀的命名往往有助于理解该变量/方法的用途，起到命名即注释的作用。而糟糕的命名往往会让人摸不着头脑。为了提高代码的可维护性，我们需要更优雅的命名方式。一.常见命名种类目前收集到的常......
  • html简单的响应式布局
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>弹性盒容器-媒体查询-百分比布局--实现响应式布局......
  • [Vue warn]: Do not use built-in or reserved HTML elements as component id: line
    [Vuewarn]:Donotusebuilt-inorreservedHTMLelementsascomponentid:line这个报错是Vue警告不要使用内置的或者保留的HTML元素作为组件的id。在Vue中，组件的id应该是唯一的，并且不应该与HTML元素的标签名相同。比如说，如果有一个组件定义如下：<template><......
  • HTML标签属性
    1.用于给标签提供附加信息2.可以写在起始标签或者单标签中，形式如下： （1）例如：<marqueeloop="2"bgcolor="red"><!--marquee是滚动标签-->你旭哥<!--下面输入框是可以滚动的，且只能滚动两次--><inputtype="text"></marquee>......
  • Python爬虫+认识html网页文本文件,使用beautifulSoup获取信息
    认识HTMLHTML参考手册：https://www.w3cschool.cn/htmltags/tag-p.htmlHTML线上教程：https://www.runoob.com/html/html-examples.html 菜鸟教程html在线编程器：https://www.runoob.com/try/try.php?filename=tryhtml_comment 提示：将下面代码复制到 菜鸟教程html在线编程......
  • Python爬虫+如何查看一个网页的源代码
    方法1（火狐浏览器为例）：方法2（火狐浏览器为例）：......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99