javaweb——HTML基础（一）

最新推荐文章于 2022-06-23 20:14:17 发布

Ethan呐

最新推荐文章于 2022-06-23 20:14:17 发布

阅读量352

点赞数 1

分类专栏： Javaweb 文章标签： html web

本文链接：https://blog.youkuaiyun.com/yu_lin_ha/article/details/105345673

版权

Javaweb 专栏收录该内容

2 篇文章

订阅专栏

写在前头：
小鱼写的文章主要面向的是初学者，内容可能过于啰嗦，请见谅。

HTML的建立： 我们打开eclipse IDE软件后，新建一个HTML File，初始样式便是这样：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>

	</body>
</html>

在这串代码中，我们发现第一行的代码与其他的格格不入，其实它的作用非常大！

<!DOCTYPE html>

它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明，表示网页采用html5。简单来说，它便是html5的声明。

html的规范：

Ⅰ、开始与结束

<html>、</html>

Ⅱ、包含的内容
①、(设置相关信息）
设置标题：

<html>
    <head>
    <title>标题</title>
    </head>
</html>

②、（显示页面内容）
Ⅲ、不区分大小写

Ⅳ、有些标签没有结束标签，例如

<br/>（换行）
<hr/>（线）
<font size="5" color="red">------</font><br/>

常用标签：

Ⅰ、文字标签：

<font></font>

属性：
       ①size:文字的大小（取值范围1-7，超出7默认7）
       ②color:
              英文表示法：red、green、blue、black
              十六进制数表示：#ffffff（每两位表示一个颜色）

<font size="5" color="#66cc66">......

Ⅱ、注释标签:

<!--注释-->

Ⅳ、标题标签:

<h1></h1>......（h1到h6依次变小，同时自动换行）

Ⅴ、水平线标签:

<hr/>

属性：
       size:水平线粗细（1-7）
       color:颜色
Ⅵ、特殊字符：
       如果需要显示：

<html>：网页

需要转义字符：

<        &lt;
>        &gt;
空格        &nbsp;
&        &amp;

列表标签

<dl></dl>：包含
<dt></dt>：上层内容
<dd></dd>：下层内容

第一种表示：
—显示效果：

体育项目
	篮球
	足球
	网球

<dl>
    <dt>体育项目</dt>
    <dd>篮球</dd>
    <dd>足球</dd>
    <dd>网球</dd>
</dl>

有序列表

<ol></ol>：有序列表范围
<li></li>：具体内容
       —显示效果：
       1.篮球
       2.足球
       3.网球

<ol>
    <li>篮球</li>
    <li>足球</li>
    <li>网球</li>
</ol>

如果想改变序列类型（如：a、b、c）
则加一个属性：

<ol type="a">

第三种表示：无序列表
<ul></ul>：表示无序列表的范围
<li></li>：具体内容
—显示效果：
实心圆显示：

<ul>
    <li>篮球</li>
    <li>足球</li>
    <li>网球</li>
</ul>

空心圆效果：

<ul type="circle">
    <li>篮球</li>
    <li>足球</li>
    <li>网球</li>
</ul>

图像标签：

表示形式：

<img src="图片的路径"/>

属性：
       —src：图片的路径
       —width：图片的宽度
       —height：图片的高度
       —alt：图片上显示的文字，把鼠标移动到图片上，停留片刻显示的内容

路径的介绍

第一类：绝对路径

C:\Users\小鱼鳞\Pictures\Saved Pictures

第二类：相对路径
一：html文件和图片在同一路径下，可以直接写路径的名称

<img src="b1.jpg" alt="yiyi"/>

二：图片在html的下层目录
分别找出html所在处路径和图片所在路径：
在这里插入图片描述

其中在code文件夹之前是一样的，不同之处是
在这里插入图片描述
可知4.html在img处

写法：

<img src="img\a.jpg" alt="rrr"/>

三：图片在html的上层目录
分别找出html所在处路径和图片所在路径：
在这里插入图片描述
可知，图片c.png在code内且在4.html上层
若是在上层，也表示为：…/
可知上层day01表示为：…/c.png

<img sec="../c.png" alt="rrr"/>

超链接标签

链接资源：

<a href="链接资源的路径">显示在页面上的内容</a>

       href：链接的资源的地址
       target：设置打开的方式，默认是当前页打开
       black：在一个新窗口打开
       self：在当前页打开

<a href="......" target="black">......</a>

如果不写任何内容

<a href="">......</a>

则会打开所在路径
如加上#

<a href="#">......</a>

不会打开（不需要到任何地址）
定位资源：
一：定位一个位置

<a name="top">......</a>

二：回到这个位置

<a href="#top">......</a>

原样输出：
引入一个标签pre

<pre></pre>

表格标签

表格范围：<table></table>
在table里面：<tr></tr>
在tr里面：<td></td>

如建立一个三行三列的表格：
html里面没有列，每行用一个tr表示，三行有三个tr，在每行中单元格用td表示

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

属性：
       border：表格线的粗细
       bordercolor：表格线的颜色
       cellspacing：间隙

<table border="1" bordercolor="blue" cellspacing="0" width="400" heigth="150">

标题：<caption></caption>
合并单元格：
跨列：colspan

<td colspan="3">......</td>

跨行：rowspan

<td rowspan="3"></td>

表单标签

一：
定义一个表单范围：<form></form>
属性：
       action：提交数据到
       method：表单的提交方式
              ①get（默认）：地址栏会携带提交数据，存在安全性问题，有数据大小得限制
              ②post
       enctype：做文件上传

<form action="提交到的路径">

二：
输入项（输入内容或者选择内容的部分）

<input type="输入项的类型"/>

都需要一个name
普通输入项：

<input type="text"/>

密码输入项：

<input type="password"/>

单选输入项：

<input type="radio/>

需要属性：name
当name设置成一样时，只能选一个

<input type="radio" name="sex"/>女<input type="radio" name="sex"/>男

当name设置不同时，都能选

<input type="radio" name="sex1"/>女<input type="radio" name="sex2"/>男

（规定单选则name相同）

必须有一个value值
实现默认选中：

checked="checked"

复选输入项：

<input type="checkbox/>

       必须有name值
       name值需要相同
       必须有value值

实现默认选中：

checked="checked"

文件输入项：

<input type="file"/>

下拉输入项：

<select name="birth">
    <option value="...">...</option> 
    <option value="...">...</option> 
    <option value="...">...</option> 
</select>

默认选择：

selected="seoected"

文本域：

<textarea cols="10" rows="10"></textarea>

隐藏项：

<input type="hidden"/>

提交按钮：

<input type="submit"/>
<input type="submit" value="..."/>

提交得到的东西：
       ？：输入项name的值=输入的值&
       参数类似于key-value形式
       当不做任何设置时，默认提交到当前页面
使用图片提交：

<input type="image" src="图片的路径"/>

重置按钮：

<input type="reset"/>

普通按钮：

<input type="button" value=""/>

html中其他常用标签的使用：

加粗：<b></b>
下划线：<u></u>
斜体：<i></i>
删除线：<s></s>
原样输出：<pre></pre>
下标：<sub></sub>
上标：<sup></sup>
自动换行：<div></div>
一行显示：<span></span>
段落标签(比br多一行)：<p></p>

头标签的使用

在head里面就是头标签
<title>标签：表示在标签上显示的内容
<meta>标签：设置页面的一些内容（可以制作页面跳转）

<meta http-equiv="refresh" content="3;url=......"/>

<base>标签：设置超链接的基本设置（可同意设置超链接）
<link>标签：引用外部文件

本次笔记就做到这里吧，希望能帮到大家！
如果学习不太忙的话，下面的笔记会继续补上滴！