【HTML入门】从网页搭建开始学习Java Web开发

wuchangjian2021-11-16 04:33:33编程学习

前言

今天开始总结学习Java Web,而学习Java Web我们应该先学习一些网页搭建基础的东西,今天我们就先从HTML开始。

目录

  • 前言
  • 初识HTML
    • 什么是HTML呢?
    • HTML元素
    • HTML结构
  • HTML的标签
    • 标签的属性
    • 字体标签
    • 标题标签
    • 段落标签
    • 水平线标签
    • 容器标签
    • 图像标签
    • 超链接标签
      • a标签
      • 锚点
  • 路径
    • 相对路径
    • 绝对路径
  • 列表
    • 无序列表
    • 有序列表
  • 表格
    • 表头标签
    • 表格结构
    • 表格实例
  • 表单
    • 文本域标签
    • 下拉菜单
    • 表单域
  • 结言

初识HTML

什么是HTML呢?

HTML

大名:Hyper Text Markup Language

寓意: 超文本 标记 语言

HTML是一种标记语言,它的作用是结构化Web网页及其内容。也就我们一般用来排版的一门语言,让我们搭建的网页结构更加符合客户需求。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言,标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML元素

HTML 文档是由 HTML 元素定义的组成的。HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

<p>元素:

<p>这是一个段落 </p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>
元素内容是:这是一个段落

<body> 元素:

<body>
	<p>这是一个段落</p>
</body> 

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签<body> ,以及一个结束标签</body>
元素内容是另一个 HTML 元素(p 元素)。

<html> 元素:

<html>
	<body>
		<p>这是一个段落</p>
	</body>
</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>
元素内容是另一个 HTML 元素(body 元素)。

HTML结构

它的结构一般如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>这里是标题</title>
</head>
<body>
	<h1>等级为一大标题</h1>
	<p>段落</p>
</body>
</html>

中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">

注释格式:<!--此处为注释内容-->
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容(主体)
<h1> 元素定义一个大标题
<p> 元素定义一个段落

整个html文档中最重要的就是<body></body>中的部分了,它也是我们展现在外面的那一部分。

下面我们一一介绍一下在<body>中常用到的东西吧!!!

HTML的标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <p></p>
标签对中的第一个标签是开始标签,第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签

标签的属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。并且属性总是以名称/值对的形式出现,比如:name=“value”。

基本格式:<标签名 属性1="属性值1" 属性2="属性值2"></标签名>

标签可以拥有多个属性

属性必须写在开始标签中,位于标签名后面

属性之间不区分顺序

标签名与属性、属性与属性之间使用空格隔开

任何属性都有默认值,省略该属性表示使用默认值

字体标签

格式:
<font>....</font>
作用:规定文本字体,字体尺寸,字体颜色
示例:<font color="red" size="5">这是一段测试文本</font>

其中<br>是代表换一行,<br> 标签没有结束标签

标题标签

h 即 head 的简写,有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种,从左到右字号依次变小。

6个标题标签在页面中的重要性是有区别的,其中h1标签的重要性最高,h6标签的重要性最低。

基本格式:<h1></h1>

<h7>这种错误的标签在展示时不起作用

段落标签

p 即 paragraph 的简写,段落标签<p></p>

基本格式:<p>段落内容</p>

段落中的文本内容超出浏览器宽度之后会执行自动换行

水平线标签

hr 即 horizontal 的缩写,水平线标签<hr />
其作用是在页面中插入一条水平线

基本格式:<hr />
这是一个自闭合标签。(普通标签成对出现;自闭合标签不需要包裹内容,自己就执行了开始和结束的操作)

容器标签

div 即 division 的缩写,分割、区分的意思,span 即 span ,跨度、范围的意思。容器标签 <div></div><span></span>
这俩本质上是一个容器,其中div标签我们使用频率高,比较重要。
基本格式:

<div>这是div标签中的内容</div> 
<span>这是span标签中的内容</span>

图像标签

图像标签 <img />,img 即 image 的缩写。

基本格式:<img src="图片URI/URL" />

<img />常用属性如下:

属性属性值属性含义
srcURI/URL图像的路径
alt文本图像无法正常显示时的提示文本
title文本鼠标悬停于图像时显示的文本
width像素图像的宽度(单位:px)
height像素图像的高度(单位:px)
border数字设置图像边框的宽度

设置图像的宽高时,如果想等比缩放,则只设置其中一个即可

超链接标签

a标签

超链接标签<a></a>,anchor 的缩写
基本格式:
<a href="跳转目标(url)" target="目标窗口的弹出方式">超链接文本或图像</a>
href , 指定要跳转的URL地址
target , 指定目标窗口的打开方式。取值为 _self 或==_blank== , _self 为默认值为本窗口打开,_blank 表示新窗口打开

<base>标签

<base> 标签可以限定同一页面内所有 超链接 的打开方式。
<base target="_blank">
设置 <base> 之后依旧可以为某个单独的超链接设置打开方式

注意:

外链需要添加 http:// 或 https:// 前缀

内部链接 直接链接内部页面名称即可,如 <a href="index.html">首页</a>

如果当时没有确定链接目标时,可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接

各种网页元素,如 文本、图像、表格、音频、视频等都可以作为超链接的载体

锚点

通过创建锚点,可以快速定位到目标内容区域

创建锚点分为两步:

1.为目标内容(即锚点)创建id 并赋值
2.将超链接文本与锚点的id 关联,<a href="#id名称"> 超链接文本 </a>

路径

相对路径

相对于当前html文件所在的位置,为相对路径

如:

图像文件和HTML文件位于同一文件夹中,只需要输入图像文件的名称即可,<img src="logo.gif"/>

图像文件位于Html文件的下一级文件夹,输入文件夹名和文件名,二者之间用“/” 隔开,<img src="image/logo.gif"/>

图像文件位于HTML文件的上一级,在文件名之前加 " …/ ", 上两级则使用 " …/…/ ",依次类推。<img src="../image/logo.gif"/>

绝对路径

所在位置为绝对路径,有根据在本地与在网络上分为两种

本地绝对路径
如: D:\picture\img\csa12.gif

网络绝对路径
如:https://blog.csdn.net/apple_51673523?spm=1000.2115.3001.5343

列表

无序列表

无序列表 <ul> ,所谓无序列表就是以小圆点或者小方块作为行首标志的列表。无序列表的各项之间是并列的,没有顺序级别的区分。

格式如下:

<body>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>
</body>

输出为:


  • 无序列表1

  • 无序列表2

  • 无序列表3

  • 无序列表4

注意

<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
<li></li> 之间相当于一个容器,可以嵌套任意标签

有序列表

有序列表 <ol></ol>
内部也是嵌套<li></li>
默认以 1、2、3…作为行首排序标志
如:

<body>
    <ol >
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
</body>

输出为:

  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4

表格

<table></table> 用来定义表格,
<tr></tr> 用来定义行,嵌套在 <table></table>
<td></td> 用来定义行中的单元格,嵌套在 <tr></tr>
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器,可以嵌套任意元素
表格相关的属性如下:

属性名称含义属性取值
border表格的边框默认 border=“0”,即无边框像素值
cellspacing单元格与单元格边框之间的间距。默认 cellspacing=“2”像素值
cellpadding单元格内容与单元格边框的间距。默认 cellpadding=“1”像素值
width表格的宽度像素值
height表格的高度像素值
align表格在页面中的水平对齐方式left 、center 、right
caption标题文本
colspan从当前列向后 横跨几列, 应用于td、th数字
rowspan从当前行向下 竖跨几行, 应用于td、th数字

表头标签

表头一般位于表格的第一行或者第一列。
表头标签为 <th></th>,在显示的时候默认会显示为加粗的效果
增加表头时,使用 <th></th> 替代对应位置的 <td></td>即可

表格结构

使用表格时,可以将表格分为头部、主体、页脚

<thead></thead> 用来定义头部。必须位于 <table></table> 中,一般包含网页的logo和导航等头部信息。
<tbody></tbody> 用来定义表格的主体,一般包含网页中除头部和底部之外的其他内容。

表格实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格实例</title>
</head>
<body>
  <table cellspacing="2" cellpadding="10" align="center" border="5">
    <thead>
    <tr>
        <th>姓名</th>
        <th>属性</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>白白</td>
        <td>战士</td>
    </tr>
    <tr>
        <td>黑黑</td>
        <td>法师</td>
    </tr>
    </tbody>
  </table>
</body>
</html>

输出:
在这里插入图片描述
可以根据代码看看效果。

注意

html中是没办法实现上下居中的,如果设置上下居中,需要通过js程序来设置。除此之外我们还可以在外面嵌套一层table,用table中的td来控制居中

表单

html 中一个完整的表单通常由 表单元素、提示信息、表单域(即多个表单的父容器)三部分组成。

常用属性:

属性取值含义
typetext单行文本输入框(不换行的)
typepassword密码输入框
typeradio单选框(配合name 可以实现单选效果)
typecheckbox复选框
typebutton普通按钮
typesubmit提交按钮
typereset重置按钮
typeimage图像形式的提交按钮
typefile文件域, 点击之后打开文件选择器
name任意文本控件名称 , name 相同则表示是同一组数据
value任意文本默认文本值
size正整数显示大小
checkedchecked默认是否被选中
maxlength正整数控制输入的最大字符数量

多个 radio 使用相同的 name ,则表示这是一组数据,这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中

文本域标签

<textarea></textarea>用来做大量文本的输入,支持多行
有 cols 、rows 属性。cols 限制每行中所输入的文本字数,rows 限制最大行数。

下拉菜单

<select></select> 用来定义下拉菜单
<option></option> 用来定义下拉菜单选项
<select></select> 中至少包含一对 <option></option>
在 option 中定义了属性 selected="selected" 之后,表示该项被默认选中

表单域

表单域 <form></form>,该标签用来定义表单域,以实现用户信息的收集和传递,form中的内容通常都会被提交到服务器。每个表单都应该有自己的表单域。

基本语法格式:

<form action="url地址" method="提交方式" name="表单名称">
     ...各种表单控件...
 </form>

结言

HTML语言在后期只是为我们网页搭建提供一个大概框架,其中美化其他设置我们是在CSS中完成的,所以大家时间充足的情况对HTML不必太过于执着,但是如果你有时间还是好好学习学习。

最后本应该找写实例来演示一下的,但是我已经写不动了,所以我在网上找了一个例子给大家看看(示例原文链接在最后):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML网页布局</title>
<style>
    body {
        font: 14px Arial,sans-serif;
        margin: 0px;
    }
    header {
        padding: 10px 20px;
        background: #acb3b9;
    }
    header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2;
    }
    nav, section {
        float: left;
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }
    nav {
        width: 20%;           
        background: #d4d7dc;
    }  
    nav ul {
        list-style: none;
        line-height: 24px;
        padding: 0px;
    }
    nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background: #acb3b9;          
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <header>
            <h1>C语言中文网</h1>
        </header>
        <div class="wrapper clearfix">
            <nav>
                <ul>
                    <li><a href="http://c.biancheng.net/">首页</a></li>
                    <li><a href="http://c.biancheng.net/html/">HTML教程</a></li>
                    <li><a href="http://c.biancheng.net/css3/">CSS教程</a></li>
                    <li><a href="http://c.biancheng.net/js/">JS教程</a></li>
                    <li><a href="http://c.biancheng.net/java/">Java教程</a></li>
                    <li><a href="http://c.biancheng.net/python/">Python教程</a></li>
                </ul>
            </nav>
            <section>
                <h2>网站简介</h2>
                <p>C语言中文网创办于 2012 年初,是一个在线学习<b>编程</b>的网站。C语言中文网已经发布了众多优质编程教程,包括C语言、C++、Java、Python 等,它们都通俗易懂,深入浅出。</p>
                <p>C语言中文网将会持续更新,并且不忘初心,坚持创作优质教程。</p>
            </section>
        </div>
        <footer>
            <p>www.biancheng.net</p>
        </footer>
    </div>
</body>
</html>

输出效果:
在这里插入图片描述

原文:HTML示例

相关文章

Webpack 使用

Webpack 使用

 1.1webpack是什么 webpack 是一种前端资源构建工具&#...

医学建模和有限元分析

医学建模和有限元分析

03 医学有限元分析服务内容 骨科有限元分析介绍 1、颈椎 颈椎࿰...

“21天好习惯”第一期-8

第一题2134 一开始没理解题目,没懂啥意思 ...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。