Java Web HTML基础 静态网页制作

article/2025/10/16 23:08:16

文章目录

    • 1.HTML简介
    • 2 HTML文档的基本结构
    • 3 HTML中的常用标签
    • 3.1 文字布局及字体标签
    • 3.2 文字设计标签
    • 3.3 列表标签
    • 4 表格标签
    • 4.1 表格基本设计
    • 4.2 合并单元格
    • 5 链接和图片标签
    • 6 表单标签

1.HTML简介

HTML(超文本语言)是构成网页文档的主要语言;
HTML语言的基本组成部分是各种标签;
HTML有两种类型的标签:一种是单标签,例如:< br>。一种是双标签,例如:< p>< /p>;
HTML对大小写不敏感;

2 HTML文档的基本结构

在这里插入图片描述
总结:
< head>< /head>用来设置网页的标题,可以省略。
< body></ body>之间的内容在浏览器窗口上显示。

3 HTML中的常用标签

3.1 文字布局及字体标签

在这里插入图片描述
在HTML中提供了6个等级标题,数字越大,标题字号越小。


在这里插入图片描述
< br>为换行标签


在这里插入图片描述
< p>为段落标签,一个段落开始由< p>来标记,结束用< /p>。< p>有一个常用的属性align,用来指明内容显示时的对齐方式,常用有left,center和right,分别表示左对齐,居中对齐和右对齐。
注:改变 浏览器的大小,字体之间的距离也随之改变。


hr标签
在这里插入图片描述
小结:
< hr>是水平线;
size:水平线的宽度,单位为像素;
width:水平线的长,如果不设置,则默认为页面长度,其默认单位为像素;单也可以用百分制,例如width=50%表示长度为页面长度的50%;
align:水平线的对齐方式,常用的有left,center和right;
noshade:若设置,则线段为实心线段;
color:线段内部的颜色。

3.2 文字设计标签

在这里插入图片描述
小结:
< font>< /font>标签一把用于标记字体,以下有常见属性。
size:1到7,值越大,字体越大。值为3为页面默认值。还要其他表示,“如:size=+2”,“szie=-2”表示为比标准字体大2号或小2号。
face:用来设置字体类型,默认为实体。
< b>内容< /b>:将内容设置为粗体。
< u>内容< /u>:将内容设置下划线。
< i>内容< /i>:将内容设置为斜体。
< sup>内容< /sup>:将内容设置为上标。
< sub>内容< /sub>:将内容设置为下标。
注:空格可以用& nbsp;


3.3 列表标签

在这里插入图片描述
总结:
(1)列表标签分为两种,一种是有序的,另一种是无序的。其中列表的每一项用< li>列表项< /li>表示。
(2)< ul>内容< /ul>:表示无序标签。
(3)< ol>< /ol>:表示有序标签,不同点在每个列表项前加上数字。


4 表格标签

4.1 表格基本设计

在这里插入图片描述
小结:
编写表格所用到的标签如下。
< table>< /table>:定义表格,表格的所有内容都写在这个标签之内。
< caption>< /caption>:定义标题,自动出现在正张表格的上方。
< tr>< /tr>:定义表行。
< th>< /th>:定义表头;包含在< tr>< /tr>之间,表头中的文字自动变成粗体。
< td>< /td>:定义表格的具体数据,包含在< tr>< /tr>之间。
align:用来指明内容显示时的对齐方式,常用有left,center和right,分别表示左对齐,居中对齐和右对齐。
bgcolor:设置边框的宽度,属性值为整数,默认值为0。
width:宽度,默认单位为像素,可以有百分数表示。
heiht:宽度,默认单位为像素,可以有百分数表示。

4.2 合并单元格

在这里插入图片描述
总结:
合并单元格必须对< td>标签中的rowspan、closoan属性进行设置,属性值都为整数,默认为1,表示没有合并。
owspan表示行与行之间合并。
closoan表示列与列之间合并。

5 链接和图片标签

在这里插入图片描述
总结:
< a>< /a>为链接所显示的内容,可以是文字、空格占位符、图片等,此标签的一个重要属性是href,他的值表示链接所指向的资源地址。
< img >图片标签的作用是将一幅图片显示字啊网页的某个位置,并且可以设置它的大小、边框等属性。
src:表示图片储存的位置。
width,heigt,border和align:和之前的一样。
alt:当图片未载入或者载入失败时提供的替代性文字说明。

6 表单标签

在这里插入图片描述
总结:
控件包括文本框、密码框、单选框、复选框、重置按钮、普通按钮、提交按钮等。这些控件所在的区域叫做表单。
< form>< /form>为表单。
< input> </ input>可以显示输入框和按钮等元素,由他的type属性决定。
text:为input标签type属性的属性值,文本框。
passswd:为input标签type属性的属性值,密码框。
radio:为input标签type属性的属性值,单选按钮,可以将多个单选按钮的name属性设置为相同,使其成为一组。checked属性可以设置默认被选。
checkbox:复选框,checked属性可以设置默认被选。
reset:重置按钮,按下之后所有的表单内容变为默认值。
button:普通按钮。
submit:提交按钮,按下之后网页会将表单的内容提交给action设定的网页,action的值为空时提交给本页。
< textarea>< /textarea>:表示多行文本框,可以用rows属性表示其行数,用cols属性表示其列数。
< select>< /select>:表示下拉菜单,其中的选项使用“< option>选项内容< /option>”表示,multiple属性能将其设置为多选,size属性的值为下来菜单显示的项目数。


http://chatgpt.dhexx.cn/article/A91v4KyR.shtml

相关文章

静态页面制作—Magnet

利用htmlcss进行制作静态网页制作&#xff0c;熟悉项目制作流程&#xff0c;建立起编写代码习惯。 一、项目分析 1.以下为静态网页的效果图&#xff0c;此文章目的利用htmlcss完成效果图&#xff1b; 2.此页面为三栏式结构&#xff0c;divcss直接进行三栏式布局&#xff1…

一个简单的网页制作期末作业,学生个人html静态网页制作成品代码

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

怎么制作html静态页面,如何做静态网页

怎样制作简单的静态的网页设计 欢迎来到CSS布局HTML。首先下载Dreamweaver.exe并打开,选择你使用的编辑语言,本案例用html 打开页面后,选着设计窗口,如图所示。设计窗口可以快速布局网页,不需要自己编辑代码。 打开你要设计的网页的设计图,本经验是百度经验首页为例。 我…

静态网页制作(html+css)、css浮动,练习(网页布局),清除浮动

静态网页代码&#xff08;htmlcss&#xff09; html代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><link rel"stylesheet" href"css/整体网页案例.css" />&l…

静态网页制作

记录一下制作网页的过程和其中遇到的问题和解决方法 一、网页样式 二、制作过程 轮播图 实现方法更改图片的src&#xff0c;实现把图片命名为p1.png,p2.png <script>var index1;function lunbo(){index;if(index>2){index1;}var imgdocument.getElementById("…

Javaweb实验:静态网页制作

Javaweb实验&#xff1a; 1.静态网页制作 目录 Javaweb实验&#xff1a; 前言 一、实验目的 二、实验原理 三、实验内容 四、实验步骤 五、实验结果 六、实验内容 七、实验步骤 八、实验结果 九、思考 1、frameset和frame标签的作用是什么&#xff1f; 2、个人主…

前端学习——静态网页制作

前端学习——静态网页制作 1学习内容2. 成果展示 1学习内容 综合运用HTML、CSS知识制作静态网页。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>京吃食府</title><link rel"styles…

HTML标签img的alt和title属性

在html5 中&#xff0c;title可以在任意HTML标签中使用&#xff0c;厌憎任意元素&#xff0c;但是不一定有效

HTML的img标签的 alt 属性

如果无法显示图像&#xff0c;浏览器将显示替代文本&#xff0c;就像这样&#xff1a; 此外&#xff0c;当用户把鼠标移到图像上方&#xff0c;最新的浏览器会在一个文本框中显示描述性文本。 alt 属性是一个必需的属性&#xff0c;它规定在图像无法显示时的替代文本。 假设由…

CSS的alt:图片无法显示时候显示alt内容

<img src"/i/eg_tulip.jpg" alt"上海鲜花港 - 郁金香" />如果无法显示图像&#xff0c;浏览器将显示替代文本&#xff0c;就像这样&#xff1a;

HTML里img标签里的alt属性解释

我们在写HTML的时候&#xff0c;总会和图像进行交互&#xff0c;所以我们总会看到<img>标签里的alt属性。 很多的解释是&#xff1a;alt 用来在非图形化浏览器中替代图像 感觉很模棱两可&#xff0c;所以总结如下&#xff1a; 如果无法显示图像&#xff0c;浏览器将显…

用div模拟ALT的提示效果

在网页设计过程中经常会用到标签的alt&#xff0c;title提示效果&#xff0c;但往往满足不了要求。昨天一个同事在设计页面时刚好需要用到这种提示效果&#xff0c;我就帮他用div做了一个。 <html><SCRIPT> var innerhtm <div id"showtip" style&quo…

img标签的alt属性和title属性的区别

img的title和alt有什么区别 1.title&#xff1a;通常当鼠标滑动到元素上的时候显示 2.alt&#xff1a;alt是img标签的特有属性&#xff0c;是图片内容的等价描述&#xff0c;用于图片无法正常加载时显示 <div><img src"https://ss1.bdstatic.com/70cFvXSh_Q1Ynx…

css强制样式

在我们日常写代码中&#xff0c;我们偶尔会遇到一个问题&#xff0c;就是我们的样式上不去&#xff0c;明明写了样式就是看不到效果&#xff0c;这时候我们就会检查我们的代码是否写错&#xff0c;但看来看去就是没问题 此时就有可能是我们的样式权重不够这时我们只需要在我们样…

DIV+CSS实现alt属性效果

< head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" > < title > 鼠标提示 </ title > < script language ="JavaScript" > ... function seashowtip(tips,flag,iwidth)...{va…

html语言中alt,html中alt的用法

html中插入图片时alt是什么属性&#xff1f; alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。 当用户因为某种原因(比如&#xff1a;打开速度慢、src属性存在错误或者用户使用了屏幕阅读器)不能查看图像时&#xff0c;alt属性提供了替代信息。 …

用 Mac 输入罗马数字

Mac 上输入罗马数字&#xff0c;很简单的&#xff0c;Mac的符号是真的全。 如果只是用一次&#xff0c;那么直接在「表情与符号」中找到就行了。 如果要多次用&#xff0c;就建一个文本替换就行了。 找到罗马数字 打开表情与符号 打开自定列表 勾选「数字 - 全部」&#xff0…

oracle 罗马数字处理,阿拉伯数字转罗马数字(Roman Numeral Converter)

如上图所示&#xff0c;罗马数字由7个基本字符组成[I,V,X,L,C,D,M],阿拉伯数字num转换时需将数字经过求余运算&#xff0c;对千位以上、百位、十位和个位分别进行处理。 一、千位以上 num/1000的结果为n&#xff0c;结果字符串result需重复n次字符‘M’&#xff1b;可抽象如下函…

罗马数字转阿拉伯数字

一、学习要点&#xff1a; 1.运用递归的思想&#xff0c;找出罗马字符串中最大的元素&#xff0c;对左边的处理是减去&#xff0c;对右边的处理是加上&#xff1b;递归头是字符串只剩下一个元素时&#xff0c;或者右边的下标小于左边的下标&#xff1b; 二、代码&#xff1a; …

Latex输出大小写罗马数字

文章目录 1 大写罗马数字2 小写罗马数字3 示例 1 大写罗马数字 相应的数字 1 1 1表示 \uppercase\expandafter{\romannumeral1} 2 小写罗马数字 \romannumeral1 3 示例 \begin{table}[!htb]\caption{Test.}\renewcommand\tabcolsep{0.005cm}\centering\setlength{\abovecaptio…