HTML学习

挽天java

于 2024-05-15 20:11:52 发布

阅读量735

点赞数 20

分类专栏： Web 大一学java 文章标签： html 学习前端

本文链接：https://blog.csdn.net/2403_82385265/article/details/138801897

版权

大一学java 同时被 2 个专栏收录

81 篇文章 2 订阅

订阅专栏

Web

5 篇文章 0 订阅

订阅专栏

HTML

HTML是网页内容的载体。内容就是网页制造者放在页面上想要让用户浏览的信息，可以包含文字，图片，视频等等…

首先熟悉快捷键：
ctrl + shift + i 在浏览器进入开发者模式
这里附录实战网站：
万维手册

大纲

简单介绍（和各种标签）

具体案例

简单介绍

HTML是超文本标签语言，而HTML文本是由HTML标签组成的文本，可以包括文字，图形，动画，声音，表格，链接等

HTML的结构包括头部(Head)，主体(Body)两大部分
一个html文件的大致组成如下
在这里插入图片描述

标签的说明

在这里插入图片描述

标签使用细节：

标签不能交叉嵌套
标签必须正确关闭，即如果是双标签，有头必须有尾
注释不能嵌套
HTML 语法不严谨。有时候标签不闭合，属性值不带“”也不报错

介绍一下fond标签（用来调整字体，虽然现在不怎么使用）
<fond 属性，比如颜色，大小，字体> 文字内容

介绍一下字符实体（类似转义字符）

常用的特殊字符：
对于 < : &lt，对于 > : & gt;
空格 : &nbsp
在这里插入图片描述

标题标签

在这里插入图片描述

超链接标签

超链接是指从一个网友指向一个目标的链接关系，这个目标可以是网页，图片，程序等等
在这里插入图片描述

<a href = "www.baidu.com">百度链接</a>

无序列表 ul / li

在这里插入图片描述

有序列表 oi / li

在这里插入图片描述

图像标签

使用img标签
在这里插入图片描述

表格标签

<table></table>

下面是一部分常用的
在这里插入图片描述
使用height属性设置表格高度

下面是实现跨行跨列的操作

表单标签

在这里插入图片描述
注意：这里method的方式get和post
get：提交的数据显示在浏览器地址栏，请求不安全，有长度限制
post：提交的数据是用https传输的，请求安全，理论上无长度限制

下面是示例代码和最后的效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单收集</title>
</head>
<body>
<form>
    用户注册信息<br>
    用户名称:<input type="text" name="username"><br>
    用户密码:<input type="password" name="pwd1"><br>
    确认密码:<input type="password" name="pwd2"><br>
    选择你喜欢的运动项目：
<!--    如果是同一组，需要保证name属性一致-->
    <input type="checkbox" name="sport" value="篮球">篮球<br>
    <input type="checkbox" name="sport" value="足球" checked>足球<br>
    <input type="checkbox" name="sport" value="羽毛球" checked>羽毛球<br>
    请选择性别 ：
    <input type="radio" name="gender" value="male">男<br>
    <input type="radio" name="gender" value="female">女<br>
    请选择城市 :
    <select name="city">
        <option>--选择--</option>
        <option value="成都">成都</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
    </select>
    自我介绍 :
    <textarea rows="8" cols="20"></textarea><br>
    选择你的文件(头像)<input type="file" name="myfile"><br>
    <input type="submit" value="提交"><input type="reset" value="重新填写">
</form>
</body>
</html>

在这里插入图片描述
注意事项：

div标签

<div>标签可以把文档分割为独立的，不同的部分
<div>是一个块级元素。它的内容自动的开始一个新行

p标签

用该标签来定义段落(具有自动换行)
会自动在其前后创建空白

span标签

span标签是内联元素，不像块级元素(如：div标签，p标签)
如果不对span应用样式，span标签则没有任何显示效果

挽天java

关注

20
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习

HTML是超文本标签语言，而HTML文本是由HTML标签组成的文本，可以包括文字，图形，动画，声音，表格，链接等HTML的结构包括头部(Head)，主体(Body)两大部分一个html文件的大致组成如下。
复制链接

扫一扫