第二章：HTML CSS 网页开发基础（一）

news2024/9/29 23:30:54

一、HTML

 

HTML：是一种网页制作标注性语言。HTML通过浏览器的翻译将页面呈现给用户。

1、1  HTML文档结构

HTML文档由4个主要标记组成，<html>、<head>、<title>、<body>

  • <html>标记        该标记是所有html文件的开头，其html页面的所有标记都要放在<html>                             </html>之中 
  • <head>标记        <head>标记是html文件的头标记，放置html文件的信息。<head></head>
  • <title>标记           可见网页定义的标题放在<title></title>之间
  • <body>标记        该标记是html的主体标记，页面中的所有内容都定义在<body>中。

 注意：<html>标记不区分大小写。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMl学习</title>
</head>
<body>
<b>
    第一个html代码
</b>
</body>
</html>

1、2  HTML常用标记

基本框架标记

  • 换行标记        标记为<br>，注意换行标记为单独出现，而不是成对出现
  • 段落标记        标记为<p></p> 段落标记在段前与段后各加一个空行，而在段落标记中的内容不受此影响。
  • 标题标记        标记为<h1></h1>其中最小的为6级标题，即为<h6></h6>，数字越小级别越高，文字越就越大
  • 中间标记        标记为<conter></center>，标记中的内容为居中显示，注意该标签已在html5中弃用

例：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>HTMl学习</title>
</head>
<body>
    <h1>Java开发三个路线</h1>
    <h2>Java SE</h2>
    <p>主要用于桌面开发，它是学习Java EE与Java ME的基础</p>
    <h2>Java EE</h2>
    <p>主要用于网页的开发，随着互联网的发展越来越多的企业使用Java开发网页</p>
    <h3>Java ME</h3>
    <p>主要用于嵌入式的开发</p>
    <!--在段落标记的段前与段尾均会自动加上一行空格-->
</body>
</html>

其中<b></b>标签作用为将字体增粗 

在html5中，废弃了<center></center>

列表标记

  • 无序列表       通过<ul>创建一组无序列表，每一个列表项以<li>表示，在结尾要有</ul>结束标记
  • 有序列表       通过<ol>创建有序列表，其中列表中的每一项均有顺序
这是一个无序列表
<ol>
  <p>
  <li>列表第一项
  <li>列表第二项
</ol>
这是一个有序列表
<ul>
    <li>无序列表第一项
    <li>无序列表第二项
</ul>

无序列表创建为<ul>，而有序列表为<ol>，列表的每一项标记均相同为<li>。

表格标记

<table></table>标记表示整个表格，其中<table>有很多属性，width属性用来设置表格的宽度，border属性用来设置表格的边框，align属性用来表格的对其方式，bhcolor属性用来设置表格背景色

  • 标题标记<caption>       以</caption>结束，属性为align,valign
  • 表头标记<th>       以</th>结束
  • 表格行标记<tr>    以</tr>结束，一组<tr>标记表示表格中的一行，<tr>标记要嵌套在<table>中使用，具有align,background属性
  • 单元格标记<td>    单元格标记又称为列标记，一个<td>标记中可以嵌套若干个<td>标记

 1、3 HTML表单标记

在网页时，要输入的账号密码栏就属于HTML的表单元素。

1、<form>...</form>表单标记

基本语法如下:使用<form></form>

<form action = "url" method = "get|post" name = "name"onSubmit = ""target = "">

</form>

  • action属性：指定处理表单数据程序的URL地址
  • method属性：get，post方式，get方式直接将数据追加到url后面返回到服务器，post将输入的数据按照http协议的post方式进行传输
  • name属性：表单名
  • onSumbit属性：该属性用于指定用户单击提交按钮时所触发事件
  • target属性：该属性指定数据结果显示在哪个窗口中

target属性参数：

_blank – 在新窗口中打开链接
_parent – 在父窗体中打开链接
_self – 在当前窗体打开链接,此为默认值
_top – 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 – 在对应框架页中打开

 2、input表单输入标记

基本语法如下：使用<input>

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

input 属性：

 type属性参数

 实例:利用input表单来实现一个网页的大体结构,center标签弃用，用css代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--测试用例-->
<!--<form id="form1" action="Java_web_04_form.html"
method = "post" action = "java web_01.html" target = "_blank">
    <input type="reset">
    -->
<form action="" method="post" name="MyForm">
    <div style="text-align: center;">
    <input type="image" name="imageField" src="SrcImage_/solar.png" size="100" maxlength="100">
    用 户 名: <input name="username" type="text" id="UserName4" maxlength="20"><br>
    密码: <input name="pwd1" type="text" id="PWD14" size="20" maxlength="20"><br>
    确认密码: <input name="pwd2" type="password" id="PWD25" size="20" maxlength="男" ><br>
    性 别: <input name="sex" type="radio" class="border" value="男"checked>
<!--&nbsp为一个空格-->
    男&nbsp;
    <input name="sex" type="radio" class="border" value="女">
    女
    <br>
    爱好: <input name="like" type="checkbox" id="like1" value="体育">
    体育
    <input name="like" type="checkbox" id="like2" value="旅游">
    旅游
    <input name="like" type="checkbox" id="like3" value="听音乐">
    听音乐
    <input name="like" type="checkbox" id="like4" value="看书">
    看书
    <br>
    E-mail: <input name="email" type="text" id="PWD224" size="50"><br>
    <input name="Submit" type="submit" class="btn_grey" value="确认保存">&nbsp;
    <input name="Reset" type="reset" class="btn_grey" value="重新填写"><br>
    </div>>
<!--在导图片时呀注意文件路径-->
<!--等待用css修改格式-->

</form>
</body>
</html>

 3、<select>...</select>下拉列表标记

<select>标记在页面中创建下拉列表框，此时列表为空，要使用<option></option>标记向列表中添加内容

语法格式

<select name="name" size="digit" multiple="multiple" disable="disable">

 <select>属性

  • name        列表框的名字
  • size           列表框可显示的元素数量  size=2 即在列表框中显示2个元素，超出的元素可以下拉查看
  • disbaled     用于指定列表框的不可使用
  • multiple       用于多行列表框的对选  Ctrl按住进行多选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
下拉列表框
  <select name="select">
    <option>数码摄影区</option>
    <option>摄影器材</option>
    <option>MP3/MP4/MP4</option>
    <option>U盘/移动硬盘</option>
  </select>
&nbsp;多行列表(不可多选)
<select name="select2" size="2">
    <option>数码摄影区</option>
    <option>摄影器材</option>
    <option>MP3/MP4/MP4</option>
    <option>U盘/移动硬盘</option>
</select>
&nbsp;多行列表(可多选)
<select name="select3" size="3" multiple>
    <option>数码摄影区</option>
    <option>摄影器材</option>
    <option>MP3/MP4/MP4</option>
    <option>U盘/移动硬盘</option>
</select>
</body>
</html>

 4、<textarea>多行文本标记

<textarea>为多行文本标记，比单行文本可以出入更多的内容。一般情况<textarea>标记出现在<form>标记内容中。

语法格式：

<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value"默认值>

</textarea>

 <textarea>属性

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

 5、超链接与图片标记

超链接：从一个页面跳转到另一个页面的功能。

语法格式：

        <a href = " "></a>

 图片标记：

语法格式：

        <img src = "uri" width = "value" height = "value" border = "value" alt = "提示文字">

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/429369.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[STM32F103C8T6]DMA

[STM32F103C8T6]DMA

DMA(Direct Memory Access&#xff0c;直接存储器访问) 提供在外设与内存、存储器和存储器、外设 与外设之间的高速数据传输使用。它允许不同速度的硬件装置来沟通&#xff0c;而不需要依赖于 CPU&#xff0c;在这个时间中&#xff0c;CPU对于内存的工作来说就无法使用。 我自己…
阅读更多...
实验设备管理系统【GUI/Swing+MySQL】（Java课设）

实验设备管理系统【GUI/Swing+MySQL】（Java课设）

系统类型 Swing窗口类型Mysql数据库存储数据 使用范围 适合作为Java课设&#xff01;&#xff01;&#xff01; 部署环境 jdk1.8Mysql8.0Idea或eclipsejdbc 运行效果 本系统源码地址&#xff1a;https://download.csdn.net/download/qq_50954361/87682549 更多系统资源库…
阅读更多...
构建新摩尔定律下的算力分发网络

构建新摩尔定律下的算力分发网络

摩尔定律最早由英特尔创始人之一戈登摩尔在1965年提出&#xff0c;他认为集成电路上可以容纳的晶体管数目在大约每经过18到24个月便会增加一倍。20年后的今天&#xff0c;面对日新月异的社会和突飞猛进的数字化需求&#xff0c;摩尔定律也随着社会的进步而被赋予了新的定义。Li…
阅读更多...
第八章 法律关系

第八章 法律关系

目录 第一节 法律关系的概念 一、法律关系的定义与特征 二、法律关系的种类 &#xff08;一&#xff09;纵向&#xff08;隶属&#xff09;的法律关系和横向&#xff08;平权&#xff09;的法律关系 &#xff08;二&#xff09;单向&#xff08;单务&#xff09;法律关系、双…
阅读更多...
基于ITIL搭建公司IT治理服务框架

基于ITIL搭建公司IT治理服务框架

ITIL帮助组织标准化其IT服务和流程。ITIL文档包括各种政策、程序和指南&#xff0c;帮助IT团队向客户提供优质的服务。 根据ITIL框架的五个阶段&#xff0c;ITIL文档被广泛分类为不同的类别。 这些阶段包括服务战略、服务设计、服务过渡、服务操作和持续服务改进。每个类别都有…
阅读更多...
android内存泄漏检测,Android内存泄露检测之LeakCanary的使用

android内存泄漏检测,Android内存泄露检测之LeakCanary的使用

为了能够简单迅速的发现内存泄漏&#xff0c;Square公司基于MAT开源了LeakCanary。使用LeakCanary&#xff0c;在内存泄漏后&#xff0c;通过分析引用链可以分析内存泄漏的原因&#xff0c;LeakCanary用于检测Activity、Fragment的内存泄漏。 下面通过一些实际案例来进行分析。…
阅读更多...
如何替换spring boot中spring框架的版本

如何替换spring boot中spring框架的版本

背景 我开源的一个项目中&#xff0c;有朋友提到存在Spring Framework 身份认证绕过漏洞(CVE-2023-20860)。 解决方案是升级spring 框架版本&#xff1a; Spring Framework 5.3.X 系列用户建议升级Spring Framework到5.3.26及以上安全版本修复该漏洞Spring Framework 6.0.X 系…
阅读更多...
HashMap 学习笔记

HashMap 学习笔记

HashMap&#xff1a; 为什么经常深入考察&#xff1f; 基于java写的代码会访问很多东西&#xff0c;比如数据库&#xff0c;缓存&#xff0c;消息中间件。 HashMap数据结构 底层是数组 原本已经有很多个位置了 原本是取模但是优化成了性能更高的hash&(n-1) 让哈希值…
阅读更多...
【性能测试】5年测试老鸟，总结性能测试基础到指标，进阶性能测试专项......

【性能测试】5年测试老鸟，总结性能测试基础到指标，进阶性能测试专项......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 性能测试是为了评估…
阅读更多...
java 接口，接口的特性，接口实现多态，面向接口编程

java 接口，接口的特性，接口实现多态，面向接口编程

package cn.zy.cellphone; /**接口是一种引用数据类型。使用interface声明接口&#xff0c;形式* 形式:public interface 接口名称{}* 接口不能拥有构造方法&#xff0c;不能用于创建对象*接口可以多继承。一个接口可以继承多个其他接口*列如&#xff1a;public interface Broa…
阅读更多...
任何人都可以学习车载测试吗？车载测试有什么门槛？

任何人都可以学习车载测试吗？车载测试有什么门槛？

1、车载测试是什么&#xff1f; 车载测试分很多种&#xff0c;有软件测试、硬件测试、性能测试、功能测试等等&#xff0c;每一项测试的内容都不一样&#xff0c;我们所说的车载测试主要指的是汽车软件的功能测试&#xff0c;也就是针对汽车实现的某一个功能&#xff0c;而进行…
阅读更多...
windows平台多版本nodejs共存工具nvm-windows 中文文档

windows平台多版本nodejs共存工具nvm-windows 中文文档

2023年4月14日11:11:49 官网地址&#xff1a;https://github.com/coreybutler/nvm-windows 下载地址&#xff1a;https://github.com/coreybutler/nvm-windows/releases nodejs版本列表 https://nodejs.org/en/download/releases PS C:\Users\pc\Desktop> nvm -h Running ve…
阅读更多...
关于测试，我发现了哪些新大陆

关于测试，我发现了哪些新大陆

关于测试 平常也只是听说过一些关于测试的术语&#xff0c;但并没有使用过测试工具。偶然看到编程老师在课堂上使用龙测为我们展示了一波测试的相关操作&#xff0c;我发现了一些新大陆&#xff0c;这篇文章就记录一下有关测试的相关操作。 开启测试之旅 进入官网了解到 龙测…
阅读更多...
java学习之接口二

java学习之接口二

目录 一、接口vs继承 一、继承 二、接口 二、接口多态特性 一、多态参数 二、多态数组 三、多态传递 三、接口练习 一、接口vs继承 一、继承 package com.hspedu.interface_;public class ExtendsVsInterface {public static void main(String[] args) {LittleMonkey…
阅读更多...
5G物理层信道pdcch说明（留档）

5G物理层信道pdcch说明（留档）

网络七层协议OSI是一个开放性的通信系统互连参考模型。 它是国际标准组织制定的一个指导信息互联、互通和写作的网络规范。 开放&#xff1a;是指只要遵循OSI标准&#xff0c;位于世界的任何地方的任何系统之间都可以进行通讯&#xff1b;开放系统&#xff1a;是指遵循互联网协…
阅读更多...
【结构型模式】装饰者模式

【结构型模式】装饰者模式

文章目录优秀借鉴1、概述2、结构3、实现方式3.1、案例引入3.2、实现步骤3.3、案例实现4、装饰者模式优缺点5、结构型模式对比5.1、装饰者模式和代理模式5.2、装饰者模式和适配器模式6、应用场景优秀借鉴 装饰模式 — Graphic Design Patterns设计模式 | 装饰者模式及典型应用黑…
阅读更多...
基于图卷积神经网络GCN的二部图链路预测方法实现思路和完整代码【可用于疾病-靶点、miRNA-疾病等相关预测】

基于图卷积神经网络GCN的二部图链路预测方法实现思路和完整代码【可用于疾病-靶点、miRNA-疾病等相关预测】

本文解决的问题 基本假设&#xff1a;二部图只有邻接矩阵&#xff0c;没有节点特征&#xff0c;并且进行链路预测&#xff0c;有部分链路未知。 如果你有初始节点特征&#xff0c;直接换掉即可 实现思路 这段代码主要是用于构建一个基于图卷积神经网络&#xff08;GCN&#…
阅读更多...
内网域渗透总结（红日靶场一）

内网域渗透总结（红日靶场一）

一、靶场环境搭建 红日靶场&#xff1a;http://vulnstack.qiyuanxuetang.net/vuln/detail/2/靶机通用密码&#xff1a;hongrisec2019win7win2003win2008 这个搭建靶场的过程是我经过实际操作&#xff08;踩坑&#xff09;总结的最简单省事的方式。 首先创建一个仅主机模式的…
阅读更多...
使用appuploader工具发布证书和描述性文件教程

使用appuploader工具发布证书和描述性文件教程

使用APPuploader工具发布证书和描述性文件教程 之前用AppCan平台开发了一个应用&#xff0c;平台可以同时生成安卓版和苹果版&#xff0c;想着也把这应用上架到App Store试试&#xff0c;于是找同学借了个苹果开发者账号&#xff0c;但没那么简单&#xff0c;还要用到Mac电脑的…
阅读更多...
数据结构之图（最小生成树+最短路径）

数据结构之图（最小生成树+最短路径）

基本概念 连通&#xff1a;若a->b存在路径&#xff0c;即为连通 连通图&#xff1a;该图中任意两点均连通&#xff0c;即为连通图 连通分量&#xff1a;下图为无向图&#xff0c;但存在三个连通分量 强连通图&#xff1a;双向的连通图 强连通分量&#xff1a;有向图中的双…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023