day003——HTML初接触

最新推荐文章于 2024-06-29 15:09:33 发布
最新推荐文章于 2024-06-29 15:09:33 发布
阅读量92 收藏
点赞数
分类专栏： 前端学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Teeeeesting/article/details/109775041
版权

1.标签由标签名、标签属性和文本内容三部分组成。（注意：单标签没有文本内容）

2.标签属性是对标签的一种描述方式。

3.标签属性分通用属性、自由属性和自定义属性。

4.通用属性：所有标签都具有的属性。（除了br标签之外）

  • id：用来给标签取一个唯一的名称。在一个网页中必须唯一
  • class：用来给标签取一个类名称。可重复。
  • style：用来设置该标签的行内样式
  • title：当鼠标悬停该标签时的展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签通用属性</title>
</head>
<body>
    <!--id：给标签取一个标识名-->
    <p id="p1">段落1</p>
    <p id="p2">段落2</p>

    <!--class：给一组标签取一个类名-->
    <div class="test">
        div
    </div>
    <p class="test"> p </p>

    <!--style:用来设置当前标签的样式，也叫行内样式。-->
    <p style="color:red;width:200px;border:1px solid #00f;">测试</p>

    <!--title：给当前标签一个提示文本-->
    <p title="提示">title标签属性测试</p>
</body>
</html>

5.用户自定义属性：通常用来传值或用于图片的懒加载等方面。

      格式：data-*   eg：<img data-src="图片名" alt="提示文本"/>    、<p data-id="goodsid">。。。</p>

6.table主要用于呈现格式化数据。表格是由行和列组成。

格式：

<table>
    <tr>  <!--行-->
        <td></td>  <!--列-->
        <td></td>
        <td></td>
        ...
    </tr>
    ...
</table>

7.table表格属性：

  • border：设置表格边框，默认单位是像素
  • width：设置表格宽度，默认单位是像素
  • align：设置表格对齐（left（）默认）/right/center）
  • cellpadding：设置单元格间距，文本与单元格间距
  • cellapacing：设置像素间隙，单元格边框间距
<!--table>tr*2>td{内容$}*3-->
<table border="1" width="400" cellpadding="3" cellspacing="22" align="center">
    <tr>
        <th>内容11</th> <!--th：表头，主要对下面的内容起说明作用。th的内容会自动加粗和居中-->
        <th>内容22</th>
        <th>内容33</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
    </tr>
    <tr>
        <td>内容13</td>
        <td>内容25</td>
    </tr>
</table>

8.跨行/跨列属性主要用来绘制复杂表格。

rowspan：跨行

colspan：跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--table[border=1 width=500 align=center]>tr*3>td{内容$$}*3-->
    <table border="1" width="500" align="center">
        <tr>
            <td rowspan="2" align="center" valign="bottom">内容01</td>
            <!--align：左右对齐（left/center/right）-->
            <!--valign:垂直对齐（top/middle/bottom）-->
            <td>内容02</td>
            <td rowspan="3">内容03</td>
        </tr>
        <tr align="center">
            <td>内容02</td>
        </tr>
        <tr>
            <td>内容011</td>
            <td>内容022</td>
        </tr>
    </table>
    <hr>

    <table border="1" width="500" align="center">
        <tr >
            <td rowspan="2">内容01</td>
            <td colspan="2">内容02</td>
        </tr>
        <tr>
            <td>内容02</td>
            <td>内容03</td>
        </tr>
        <tr>
            <td colspan="3" align="center">内容01</td>
        </tr>
    </table>
</body>
</html>

9.绘制一个完整表格：caption（标题）、thead（表头）、tbody（表体）和tfoot（表尾）四部分组成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

    <!--table[border=q width=600 align=center]>(caption{学生信息表})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=1])-->
    <table border="q" width="600" align="center">
        <caption>学生信息表</caption>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>家庭住址</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>001</td>
            <td>小明</td>
            <td>北京</td>
            <td>无</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小花</td>
            <td>上海</td>
            <td></td>
        </tr>
        <tr>
            <td>003</td>
            <td>小丽</td>
            <td>大同</td>
            <td>优秀</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="4" align="left">加油！</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

10.form表单标签是所有标签最核心标签之一。它是用来实现前后端交互的一个重要标签。

常用属性：

  • name：表单名称
  • action：表单数据提交的地方（通常是一个后台文件名（.jsp/.php/.asp/.py/.aspx），或网址）。如果是#，表示提交到当前文件下。
  • method：前端提交数据到后端的方法。主要有：get和post，默认是get。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form name="stuInfo" action="https://www.baidu.com/" method="get">
        <!--get方式提交会把数据暴露在外，post不会-->
        <input type="text" name="userName" placeholder="请输入姓名">
        <input type="submit">
    </form>
</body>
</html>

11.表单元素：

1）input类：主要用来输入、选择或发出指令。

type：text/password/radio/checkbox/file/button/image/submit/reset

  • text：单行文本输入框。tyoe="text"可以不写，默认值。属性：placeholder（提示）、name（命名）、value（默认值）、minlength/maxlength（最少/最多输入的字符个数）、disabled（失效）、readonly（只读）、pattern（正则匹配：后端也能实现，建议前端）
  • password：密码框 属性与text一样
  • radio：单选框，通常是两项以上。常用属性有：name（必须有）、value、checked（默认选中）、disabled（失效）、readonly（只读）
  • checkbox：复选框，可以用来选择0项、1项、多项。常用属性有：name（必须有）、value、checked（默认选中）、disabled（失效）、readonly（只读）
  • file：文件上传按钮
  • button：普通按钮，通常用它去调用脚本代码。常用属性有：value（按钮标题）、disabled（失效）
  • image：图片按钮，用法与button一样。特殊属性：src（用来加载提示图片，用它替换了value）。它有提交功能，有submit功能一样。
  • submit：提交按钮，用来将表单数据提交到后台
  • reset：重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态

  • 2）textarea类

文本域，也可以叫多行文本框，主要用于输入大批量内容。

  • 常用属性：name、id、cols（列数）、rows（行数）、placeholder、minlength、maxlength、required

3）select类：下拉列表框，用于单项选择。用option呈现每个选项。

  • multiple属性：表示可以多选，这时的下拉列表框变成了列表框

  • size属性：最多显示的行数

4）button类：普通按钮，具有提交功能。

可以单独使用，不写在form元素中。如果写在form中，有提交功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="">
        <!--文本框-->
        <input type="text" name="test" placeholder="输入一个数字：" value="22" maxlength="6" >
        <input type="text" name="test" placeholder="输入一个数字：" value="22" disabled="disabled">
        <input type="text" name="test" placeholder="输入一个数字：" value="22" readonly="readonly">
        <br>

        <!--密码框-->
        <input type="password"><br>

        <!--单选钮-->
        <input type="radio" name="sex" checked="checked"> 男
        <input type="radio" name="sex"> 女
            <!--相同name相互排斥-->
        <input type="radio" name="num"> 1
        <input type="radio" name="num"> 2
        <input type="radio" name="num"> 3
        <br>

        <!--复选框/检查框-->
        <input type="checkbox" name="hobby" checked>听音乐
        <input type="checkbox" name="hobby" checked>跑步
        <input type="checkbox" name="hobby">学习
        <br>

        <!--文件上传按钮-->
        <input type="file" >
        <br>

        <!--button：普通按钮，通常用它去调用脚本代码-->
        <input type="button" value="登录" disabled>
        <input type="button" value="登录" >

        <!--图片按钮-->
        <input type="image" src="F:/demo/venv/img/test.jpg" title="名字">
        <br>

        <!--提交按钮-->
        <input type="submit">

        <!--重置按钮-->
        <input type="reset" title="重置一下">

    </form>

    <form action="">
        <textarea name="memo" id="memo" cols="30" rows="10">
            备注
        </textarea>
    </form>

    <form action="">
        <label for="sex">性别：</label>
        <select id="sex">
            <option value="male">男</option>
            <option value="fmale">女</option>
        </select>
        <br>
        <label for="course">课程</label>
        <select  id="course" multiple size="2">
            <!--multiple：控制是否多选-->
            <option value="语文">语文</option>
            <option value="数学">数学</option>
            <option value="计算机">计算机</option>
            <option value="英语">英语</option>
        </select>
    </form>


        <!--button-->
        <button id="id1">确定</button>   <!--这里的button主要用来调用js脚本代码-->
        <form action="test.aspx">
            <input type="text" name="info">
            <button>提交</button>   <!--这里的button的功能与input中submit按钮功能一眼-->
        </form>

</body>
</html>

iframe：框架集，是用来将多个网页文件组合成一个文件。常用属性如下：

  • name：框架名
  • src：引入的外部html稳健
  • scrolling：滚动条（yes/no/auto）
  • width：宽度（%/px）
  • height：高度（%/px）
  • frameborder：是否有框架边框（1/0）
  • marginheight：框架离顶部和底端的具体（%/px）
  • marginwidth：框架距离左右的距离（%/px）

注意：在实际开发过程中，尽量减少使用iframe。因为它破坏了前进和后退功能，且不利于SEO。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe我的网站</title>
</head>
<body>
    <!--banner-->
    <iframe src="iframe/banner.html"  scrolling="no" width="100%" height="100%" frameborder="0" marginheight="0"></iframe>

    <!--导航-->
    <iframe src="iframe/nav.html"  scrolling="auto" width="20%"  height="300px" frameborder="0"></iframe>

    <!--核心内容-->
    <iframe src="iframe/content1.html" name="main" scrolling="no" width="70%" height="300px" frameborder="0"></iframe>


</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="../img/test.jpg" alt="banner">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--ul>li{分类$}*4>ul>li*5>a[href]{内容$}-->
<ul>
    <li>分类1
        <ul>
            <li><a href="content1.html" target="main">内容1</a></li>
            <li><a href="content2.html" target="main">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类2
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类3
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类4
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>内容1...</p>

</body>
</html>

 

王总总
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 ——学习笔记整理
Thaley的博客
02-09 772
HTML学习笔记整理
day002——HTML初接触
Teeeeesting的博客
11-17 90
1.标签属性：属性名=属性值，起到附加说明补充要求的作用。不是所有标签都有属性，比如br标签。 2.单标签：换行<br/>、水平线<hr/>、图片标签<img/>、文本<input/>、link标签<link/>、元信息标签<meta/>。 3.文本格式化标签：就是通过标签来美化文本外观 b和strong：都有加粗作用，但strong除了加粗还有强调作用。注：强调主要用于SEO（搜索引擎优化）时，便于提取对应关键字
day001——HTML初接触
Teeeeesting的博客
11-17 98
1.HTML：超文本标记语言。（一种标示性语言，不是编程语言，是标记语言，不能使用逻辑运算。通过标签将文档格式进行统一，是分散网络资源连接为一个逻辑整体） 标记语言是一套标记标签(markup tag) HTML用标记标签来描述网页内容 2.静态网页和动态网页的区别： 静态：网页中没有程序代码，只有HTML（即：超文本标记语言），一般后缀为.html,.htm,或者.xml等。虽然静态网页的页面一旦做成，内容就不会再改变了。 动态：页面代码虽然没有变化，但是显示内容可以随着时间、环境或者数据库操作.
Day22——HTML
S_numb的博客
12-17 535
文章目录HTML一、 关于 html 那些事1. 为什么要学 html？2. 什么是 html？3. 发展史4. 优势5. W3C 标准6. 学习 html 要达到的方法和目标7. 第一个 HTML 案例二、HTML 的基础知识1. HTML 的基本结构1.1 HTML 头部元素1.1.1 title 标签1.1.2 base 标签1.1.3 Link 标签1.1.4 style 标签1.1.5 ...
前端开发——Day4
漠宸离若的博客
10-17 138
HTML 基础-4个实例 本章介绍了 HTML 中较为常用的标签的实例。 您可能还没接触过这些实例，不过不用担心，阅读完本章您就能够掌握它们了！ HTML 标题 HTML 标题（Heading）是通过<h1> - <h6>标签来定义的. h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。 这里有六个标题元素标签 ——<h1>、<h2>、<h3>、<h4>、<h...
Java学习day01——java基础
weixin_45256659的博客
01-13 173
因为觉得自己的java学的不是很好，所以打算重新学习java，找了一些资源视频来看，然后不确定自己能坚持多久，因此想通过在这里记录自己的笔记的方式，鼓励自己，让自己能够坚持得久一些，同时也是方便自己进行查阅。 01_1.java语言的概述 1.java是sun公司开发的一门编程语言，目前被oracle公司收购 2.java开发的应用主要分为桌面应用（QQ、腾讯等）和互联网应用（淘宝、京东等） 3....
WEB学习Day03——CSS
pyrans的博客
10-09 254
03.01_css选择器-属性选择器 选择器[属性名]{ 属性名称1：值1； 属性名称2：值2； .... } 选择器[属性名="属性值"]{ 属性名称1：值1； 属性名称2：值2； .... } 03.02_css选择器-包含选择器： 父子标签 先辈和后辈标签 先辈选择器 后辈选择器{ 属性名称1：值1； 属性名称2：值2； .... } 查找直接子标签 父标签选择...
day01 HTML&CSS
Libra_97的博客
10-15 152
HTML&CSS
Python初接触--Day1
awxt79557的博客
12-21 72
Python介绍 　　python的创始人为吉多·范罗苏姆（Guido van Rossum）。1989年的圣诞节期间，吉多·范罗苏姆为了在阿姆斯特丹打发时间，决心开发一个新的脚本解释程序，作为ABC语言的一种继承。 最新的TIOBE排行榜，Python赶超PHP占据第五，Python崇尚优美、清晰、简单，是一个优秀并广泛使用的语言。 Python是一门什么语言？ ...
Day17——知识点总结
01-21
1. Map双边队列 1.1 什么是Map 程序开发大部分数据都是键值对形式的 MySQL JSON XML 类对象成员变量和存储的数据 从前端发送的数据也可以转成Map格式 ==> 一键生成 ==> 类对象 ==> 一键存储 ==> 数据库 ...
Day18——知识点总结
12-22
1. String类 1.1 比较方式要求 1.2 获取方法 int length();![字符串比较要求](img/字符串比较要求.png) 获取字符串长度 "" char charAt(int index); 获取String字符串中指定下标位置的char类型字符，如果index...
Day19——知识点总结
12-22
1. 缓冲流 1.1 作用 使用缓冲数组以后，整体的读取，写入效率提升很大！！！ 降低了CPU通过内存访问硬盘的次数。提高效率，降低磁盘损耗。 字节输入缓冲 BufferedInputStream ... 所有的缓冲流都没有任何的读取，写入...
Day20——知识点总结
12-22
1. 常用API 1.1 StringBuffer 1.1.1 StringBuffer概述 为了解决String字符串操作导致的内存冗余，提高效率，Java中提供了StringBuffer和StringBuilder来操作字符串，并且提供了很多方法，便于程序员开发。...
html引入别的html文件(类似于框架的组件使用,只适合静态的,不适合组件传值)
最新发布
weixin_68658847的博客
06-29 391
html引入别的html文件(类似于框架的组件使用,只适合静态的,不适合组件传值)
获取HTML元素的offsetParent属性
weixin_44626980的博客
06-29 543
大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们将深入探讨在前端开发中常用的一个属性——HTML元素的。属性，这是前端开发中常用于布局和定位的重要属性。属性用于描述一个元素的包含块（containing block），即元素在页面布局中的参照物。属性，可以帮助开发者更好地处理页面布局和定位的需求，提升用户体验和页面性能。如果项目中使用了jQuery，可以使用其提供的方法来获取元素的。在前端开发中，我们经常需要获取元素的。
获取HTML元素的scrollHeight属性
java666668888的博客
06-28 531
在HTML和JavaScript中，
html+css+js气泡弹窗
w11111xxxl的博客
06-29 954
微信安装完成，点击查看
HTML DOM 简介
wjs2024的博客
06-26 453
HTML DOM是一个强大的工具，它允许您动态地访问和更新HTML文档的内容、结构和样式。通过使用DOM方法，您可以轻松地查找元素、修改元素、添加和删除元素以及处理事件。掌握HTML DOM对于开发动态和交互式的Web应用程序至关重要。
jQuery插件之——简单日历
05-23
html += '<td>' + day + '</td>'; day++; } } html += '</tr>'; if (day > daysInMonth) { break; } } html += '</table>'; var selector = '#calendar'; $(selector).html(html); } ``` 在这里，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值