HTML(关于html结构和功能）

可是我还没有送你花

已于 2023-05-19 12:14:08 修改

阅读量1.5k

点赞数 1

分类专栏： javaEE 文章标签： html css 前端

于 2023-05-17 22:00:00 首次发布

本文链接：https://blog.csdn.net/qq_56320180/article/details/130711980

版权

javaEE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.HTML的结构

1.1HTML的基本结构

<html>
<!-- 这个是注释,可以使用ctrl+/快速注释 -->
    <head>
        <title>
            第一个页面
        </title>
    </head>
    <body>
        hello world
    </body>
</html>

html 标签是整个 html 文件的根标签 ( 最顶层标签 )

head 标签中写页面的属性 .

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题 .

1.2:标签层次结构

1.父子关系

2.兄弟关系

head 和 body 是 html 的子标签 (html 就是 head 和 body 的父标签 )

title 是 head 的子标签 . head 是 title 的父标签 .

head 和 body 之间是兄弟关系 .

2.HTML常用标签

2.1注释标签

快捷键:ctrl + /

2.2标题标签

<html>
<!-- 这个是注释,可以使用ctrl+/快速注释 -->
    <head>
        <title>
            第一个页面
        </title>
    </head>
    <body>
        <h1>这是标题1</h1>
        <h2>这是标题2</h2>
        <h3>这是标题3</h3>
        <h4>这是标题4</h4>
        <h5>这是标题5</h5>
        <h6>这是标题6</h6>
        <!-- 标题越小,这显示越大,可以理解成标题序号小的为大儿子,所以大,序号大的为小儿子,所以小 -->
    </body>
</html>

2.3 段落标签

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

2.4 换行标签

br==break的缩写

<br>

2.5格式化标签

加粗:strong标签和b标签

倾斜:em标签和i标签

~~删除线:~~del标签和s标签

下划线:ins标签和u标签

<html>
<!-- 这个是注释,可以使用ctrl+/快速注释 -->
    <head>
        <title>
            第一个页面
        </title>
    </head>
    <body>
        <h1>这是标题1</h1>
        <h2>这是标题2</h2>
        <h3>这是标题3</h3>
        <h4>这是标题4</h4>
        <h5>这是标题5</h5>
        <h6>这是标题6</h6>
        <!-- 标题越小,这显示越大,可以理解成标题序号小的为大儿子,所以大,序号大的为小儿子,所以小 -->
        <b><b>加粗</b></b>
        <br>
        <b><i>倾斜</i></b>
        <br>
        <b><s>删除线</s></b>
        <br>
        <b><u>下划线</u></b>
    </body>
</html>

2.6图片标签

<img src="" alt="">

alt:替换文本,当图片不能正确显示时,会出现相关的替换文字

src:你的图片的路径,可以是本地的路径,也可以是网络路径

<html>
<!-- 这个是注释,可以使用ctrl+/快速注释 -->
    <head>
        <title>
            第一个页面
        </title>
    </head>
    <body>
        <h1>这是标题1</h1>
        <h2>这是标题2</h2>
        <h3>这是标题3</h3>
        <h4>这是标题4</h4>
        <h5>这是标题5</h5>
        <h6>这是标题6</h6>
        <!-- 标题越小,这显示越大,可以理解成标题序号小的为大儿子,所以大,序号大的为小儿子,所以小 -->
        <b><b>加粗</b></b>
        <br>
        <b><i>倾斜</i></b>
        <br>
        <b><s>删除线</s></b>
        <br>
        <b><u>下划线</u></b>
        <br>
        <b>这个是我的咬人猫<s>老婆</s></b>
        <img src="https://cn.bing.com/images/search?view=detailV2&ccid=wMQ%2fBWOr&id=6EC31AAD9B129119A0A30860472F6C962AD7BC42&thid=OIP.wMQ_BWOreS-1rDzpOAm5iwHaNK&mediaurl=https%3a%2f%2fimg.moegirl.org.cn%2fcommon%2fthumb%2f7%2f74%2f%e5%92%ac%e4%ba%ba%e7%8c%ab-%e5%8b%be%e6%8c%87%e8%b5%b7%e8%aa%93-248603624901297403-%e5%9b%be2.jpeg%2f1200px-%e5%92%ac%e4%ba%ba%e7%8c%ab-%e5%8b%be%e6%8c%87%e8%b5%b7%e8%aa%93-248603624901297403-%e5%9b%be2.jpeg&exph=2133&expw=1200&q=%e5%92%ac%e4%ba%ba%e7%8c%ab%e5%9b%be%e7%89%87&simid=608043854915770212&FORM=IRPRST&ck=A74A07C44CEFDB9B7B8E9367EFC4CD90&selectedIndex=0&idpp=overlayview&ajaxhist=0&ajaxserp=0" alt="我的">
      <br>
        <img src="C:\Users\山有木兮\Pictures\QQ图片20230516193809.jpg" alt="现在是幻想时间">
    </body>
</html>

2.7超链接标签

<a href="#">查看 Chapter 4。</a>

href:把你的链接放到里面,点击即可跳转.

target:可以设置你的跳转方式,是另起一页,还是就在本页面打开链接

 <a href="https://www.bilibili.com/video/BV11a4y1G743/?spm_id_from=333.337.search-card.all.click&vd_source=fb713933626c6872932e8cb5ceaf7e5a" target="_blank">给你们看看我的大哥</a>
        <!-- 用图片来作为链接 -->
        <a href="https://www.bilibili.com/video/BV1Pk4y1b7bg/?spm_id_from=333.337.search-card.all.click&vd_source=fb713933626c6872932e8cb5ceaf7e5a" target="_bl
        "><img src="C:\Users\山有木兮\Pictures\R-C.jpg"></a>
        <a href=""></a>

点击即可跳转

2.8表格标签

table 标签 : 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格 . 会居中加粗

thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 )

tbody: 表格得到主体区域

align:是表格相对于周围元素的对齐方式

border:表示边框.1表示有边框(数字越大,边框越粗),""表示没有边框

cellpadding:内容距离边框的距离,默认1像素

cellspacing:单元格之间的距离,默认为2像素

width/height:设置尺寸

<table align ="center" border = "1" cellpadding = "25" cellspacing = "0" width = "500"
            height = "200">
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>11</td>
            
            </tr>
            <tr>
            <td>李四</td>
            <td>女</td>
            <td>15</td>
             </tr>
             <tr>
                <td>咬人猫</td>
                <td>女</td>
                <td>18</td>
             </tr>

        </table>

合并单元格:

跨行合并:rowspan="n"

跨列合并:colspan="n"

步骤

1. 先确定跨行还是跨列

2. 找好目标单元格 ( 跨列合并 , 左侧是目标单元格 ; 跨行合并 , 上方是目标单元格 )

3. 删除的多余的单元格

 <tr>
            <td>李四</td>
            <td rowspan="2">女</td>
            <td>15</td>
             </tr>
             <tr>
                <td>咬人猫</td>
               
                <td>18</td>
             </tr>

2.9列表标签

主要使用来布局的 . 整齐好看 .

无序列表 [ 重要 ] ul li , .

有序列表 [ 用的不多 ] ol li

自定义列表 [ 重要 ] dl ( 总标签 ) dt ( 小标题 ) dd(围绕标题来说明)

 <h3>有序列表</h3>
             <ol>
                <li>咬人猫</li>
                <li>洛丽塔大哥</li>
                <li>小奶糖</li>
                <li>呆木头</li>
             </ol>
             <h4>无序列表</h4>
             <ul>
                <li>嘿嘿</li>
                <li>嘻嘻</li>
                <li>嗯嗯</li>
             </ul>
             <h5>自定义列表</h5>
             <dl>
                <li>\(^o^)/~</li>
                <li>(⊙o⊙)…</li>
                <li>_(:з」∠)_</li>
             </dl>

2.10表单标签

表单:用户输入数据的重要途径

表单域:包含表单元素的区域,重点是from标签.

表单控件:输入框,提交按钮等,重点是input标签

input标签:各种输入控件,单行文本框,密码框,按钮,单选框,复选框.

type:(必备)button,text,image,password,redio等等.

name:给input命名,便于操作

value:input的默认值

checked:默认被选中

maxlength:设定最大长度

1.文本框

<input type="text">

2.密码框

<input type="password">

3.单选框

<input type="radio">

4.复选框

<input type="checkbox">

5.普通按钮

<input type="button" value="一个普通按钮">

6.提交按钮

<input type="submit"value="提交按钮">

7.清空按钮

<input type="reset"value="清空按钮">

8.选择文件

<input type="file">

9.select标签(下拉菜单)

<select >

<option>北京</option>

<option selected="selected"> 上海</option>

</select>

selected==默认选择

10.textarea标签(文本框)

<textarea name="" id="" cols="30" rows="10"></textarea>

11.无语义标签:div&span

div==division的缩写

apan==跨度

完整代码:

<html>
<!-- 这个是注释,可以使用ctrl+/快速注释 -->
    <head>
        <title>
            第一个页面
        </title>
    </head>
    <body>
        <h1>这是标题1</h1>
        <h2>这是标题2</h2>
        <h3>这是标题3</h3>
        <h4>这是标题4</h4>
        <h5>这是标题5</h5>
        <h6>这是标题6</h6>
        <!-- 标题越小,这显示越大,可以理解成标题序号小的为大儿子,所以大,序号大的为小儿子,所以小 -->
        <b><b>加粗</b></b>
        <br>
        <b><i>倾斜</i></b>
        <br>
        <b><s>删除线</s></b>
        <br>
        <b><u>下划线</u></b>
        <br>
        <b>这个是我的咬人猫<s>老婆</s></b>
        <img src="https://cn.bing.com/images/search?view=detailV2&ccid=wMQ%2fBWOr&id=6EC31AAD9B129119A0A30860472F6C962AD7BC42&thid=OIP.wMQ_BWOreS-1rDzpOAm5iwHaNK&mediaurl=https%3a%2f%2fimg.moegirl.org.cn%2fcommon%2fthumb%2f7%2f74%2f%e5%92%ac%e4%ba%ba%e7%8c%ab-%e5%8b%be%e6%8c%87%e8%b5%b7%e8%aa%93-248603624901297403-%e5%9b%be2.jpeg%2f1200px-%e5%92%ac%e4%ba%ba%e7%8c%ab-%e5%8b%be%e6%8c%87%e8%b5%b7%e8%aa%93-248603624901297403-%e5%9b%be2.jpeg&exph=2133&expw=1200&q=%e5%92%ac%e4%ba%ba%e7%8c%ab%e5%9b%be%e7%89%87&simid=608043854915770212&FORM=IRPRST&ck=A74A07C44CEFDB9B7B8E9367EFC4CD90&selectedIndex=0&idpp=overlayview&ajaxhist=0&ajaxserp=0" alt="我的">
      <br>
        <img src="C:\Users\山有木兮\Pictures\QQ图片20230516193809.jpg" alt="现在是幻想时间">
        <br>
    
        <a href="https://www.bilibili.com/video/BV11a4y1G743/?spm_id_from=333.337.search-card.all.click&vd_source=fb713933626c6872932e8cb5ceaf7e5a" target="_blank">给你们看看我的大哥</a>
        <!-- 用图片来作为链接 -->
        <a href="https://www.bilibili.com/video/BV1Pk4y1b7bg/?spm_id_from=333.337.search-card.all.click&vd_source=fb713933626c6872932e8cb5ceaf7e5a" target="_bl
        "><img src="C:\Users\山有木兮\Pictures\R-C.jpg"></a>
        <a href=""></a>
        <br>
        <table align ="center" border = "1" cellpadding = "25" cellspacing = "0" width = "500"
            height = "200">
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>11</td>
            
            </tr>
            <tr>
            <td>李四</td>
            <td rowspan="2">女</td>
            <td>15</td>
             </tr>
             <tr>
                <td>咬人猫</td>
               
                <td>18</td>
             </tr>
             <h3>有序列表</h3>
             <ol>
                <li>咬人猫</li>
                <li>洛丽塔大哥</li>
                <li>小奶糖</li>
                <li>呆木头</li>
             </ol>
             <h4>无序列表</h4>
             <ul>
                <li>嘿嘿</li>
                <li>嘻嘻</li>
                <li>嗯嗯</li>
             </ul>
             <h5>自定义列表</h5>
             <dl>
                <li>\(^o^)/~</li>
                <li>(⊙o⊙)…</li>
                <li>_(:з」∠)_</li>
             </dl>

        </table> 
   
    <form action="https://www.bilibili.com" method="get">
        姓名：<input type="text" id="username" name="name"><br>
        密码：<input type="password"> <br>
        性别：<input type="radio" name="sex" value="男">男&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">女&nbsp;&nbsp;&nbsp;
        <input type="radio" name="sex">第三性别<br>
        爱好：<input  type="checkbox">听音乐&nbsp;&nbsp;
              <input type="checkbox">看书 &nbsp;&nbsp;
              <input type="checkbox">跑步&nbsp;&nbsp;
              <input  type="checkbox">打羽毛球<br>
        头像：<input type="file"><br>
        大学：<select>
                <option>北京大学</option>
                <option >清华大学</option>
                <option>南宁大学</option>
                <option >社会大学</option>
                <option selected="selected" >哔哩哔哩大学</option>
            </select>
            <br>
        备注：<textarea rows="7" cols="50">

        </textarea>
        <br>
        <input type="button" value=" 普通按钮 ">&nbsp;&nbsp;
        <input type="submit" value=" 提交 ">&nbsp;&nbsp;
        <input type="reset" value=" 清空 "onclick="alert('确定清空吗')">
    </form>
<div>
    <span>洛丽塔大哥</span>
    <span>洛丽塔大哥</span>
    <span>洛丽塔大哥</span>
</div>
<div>
    <span>咬人猫</span>
    <span>咬人猫</span>
    <span>咬人猫</span>
</div>


    </body>
</html>

本机展示:

可是我还没有送你花

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML(关于html结构和功能）

1.HTML的结构1.1HTML的基本结构html标签是整个html文件的根标签最顶层标签head标签中写页面的属性body标签中写的是页面上显示的内容title标签中写的是页面的标题1.2:标签层次结构1.父子关系2.兄弟关系head和body是html的子标签(html就是head和body的父标签title是head的子标签. head是title的父标签head和body之间是兄弟关系2.HTML常用标签。
复制链接

扫一扫

专栏目录