Java Web之HTML学习

最新推荐文章于 2023-08-01 22:05:40 发布

北辰＆相濡以沫

最新推荐文章于 2023-08-01 22:05:40 发布

阅读量117

点赞数

文章标签：前端 html 学习

本文链接：https://blog.csdn.net/qq_60416816/article/details/128492910

版权

Java Web之HTML学习

1、标签

<h align="left | center | right"> 
段落文本标题，居左、居中、居右
标签分为1~6级

2、标签之图片

<img>定义图像，是单标签，不需要进行闭合操作
<img src="" alt="" title="" width="" height="">
src：路径（图片名字和地址）(绝对、相对、网络路径都可以)
alt：规定图像的代替文本
width：规定图像的宽度，如300px
（一般只规定图像的宽度，不规定图像的高度，因为调整不好会使图像变形）
height：规定图像的高度
title：鼠标悬停在图片上给予的提示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
</head> 

<body>
        <h1 align="center">
            昨日的我与明日的你约会
        </h1>
        <img src="1.webp" alt="女主" width="300px" title="福寿爱美">
</body>

</html>

3、超文本链接

<a herf="网页链接">链接文本</a>
链接文本可以是一个字，可以是一个词，也可以是一句话，或者是一幅图像

部分主体代码如下：
<a href="https://www.csdn.net/">
           CSDN
</a>
<a href="https://www.csdn.net/">
<img src="https://bkimg.cdn.bcebos.com/pic/2e2eb9389b504fc2d56258576a97f01190ef76c6c704?x-bce-process=image/resize,m_lfit,w_536,limit_1" width="200px">
</a>

图片和文本均可点入链接查看，下图为链接点入效果图

4、文本

常用文本标签和段落不同，段落表示一段文本，文本标签一般表示文本词汇

标签	描述
< em >	定义着重文字
< b >	定义粗体文本
< i >	定义斜体字
< strong >	定义加重语气
< del >	定义删除字
< span >	元素没有特定的含义

<body>/*标签的嵌套使用*/
    <em>em读书</em>
    <b>b读书</b>
    <i>i读书</i>
    <strong>strong读书</strong>
    <del>del读书</del>
    <span>span读书</span>
  
    <p>我喜欢<i>读书</i></p> 
</body>

快捷创建标签
ol>li*想要创建标签数

5、有序列表与无序列表

有序列表始于< ol >标签，列表的每个项始于< li >标签，即< ol >包裹< li >标签

无序列表始于< ul >标签，列表的每个项始于< li >标签，即< ul >包裹< li >标签

无序列表与有序列表相似，这里只举用一例

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

其中<ol>中可以自定义列表序号的属性
<ol>也可以循环嵌套
  
  <body>
    <ol>
        <li>
            第一项
            <ol>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ol>
        </li>
        <li>
            第二项
            <ol>
                <li>A</li>
                <li>B</li>
                <li>C</li>
            </ol>
        </li>
        <li>
            第三项
            <ol>
                <li>一</li>
                <li>二</li>
                <li>三</li>
            </ol>
        </li>
    </ol>
</body>

六、表格

表格：<table></table>
行：<tr></tr>
列：<td></td>

<body>
    <table align="center" border="1" width="400px" height="300px" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </table>
</body>

<table>内部属性：
border:设置表格边框
width:设置表格宽度
height:设置表格高度
colspan:水平合并单元格，保留左边，删除右边
rowspan:垂直合并单元格，保留上面，删除下面
cellspacing:设置单元格间距
  
单元格合并：
<body>
    <table align="center" border="1" width="400px" height="300px" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">4、5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td rowspan="2">8、11</td>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
            <td>12</td>
        </tr>
    </table>
</body>

普通的表格和合并单元格的表格

七、From表单

1.表单在Web网页中用来给用户填写信息，使网页具有交互功能，用户输入的地方由表单来写，如登录注册、搜索框

2.表单由容器和控件组成，控件包括输入框、按钮等，表单就是容器，能够容纳各种各样的控件

3.表单包括表单标签、表单域、表单按钮

文本框标签：
<from>
	用户名：<input type="text">
</from>
密码框：(密码字段字符会以小圆点代替)
<from>
	密码：<input type="password">
</from>
提交按钮：
<from>
	<input type="submit" value="登录">(其中value用于替换按钮显示的文本)
</from>

eg:
<body>
    <form>
        用户名：<input type="text">
        密码：<input type="password">
        <input type="submit" value="登录">
    </form>
</body>

块级元素和内联元素

块级元素	内联元素
页面中会独占一行（自上而下排列）	只占自身大小
可以设置width，height属性	不能设置width，height属性
可以包含行内元素和其他块级元素	一般包含内联元素，不包含块级元素

常见块级元素：
	div,from,h1~h6,hr,p,table,ul等
常见内联元素：
	a,b,em,i,span,strong等
行内块级元素：（不换行，但是能识别宽高）
	button,img,input等

div实现：
<div id="header"></div>
<div id="nav"></div>
<div id="article"></div>
<div id="section"></div>
<div id="sidbor"></div>
<div id="footer"></div>
H5新标签实现：（可能有些老版本浏览器会有不兼容问题）
<header></header>：头部
<nav></nav>：导航
<section></section>：定义文档中的节，比如章节、页眉、页脚
<aside></aside>：侧边栏
<footer></footer>：脚部
<article></article>：代表一个独立的、完整的内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等