html知识小结

最新推荐文章于 2023-07-28 17:44:43 发布
最新推荐文章于 2023-07-28 17:44:43 发布
阅读量185 收藏 1
点赞数 1
分类专栏： java基础学习 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bird_tp/article/details/125352904
版权

一、使用格式

<标签名 属性名=”属性值”> 数据内容 </标签名>  或

<标签名 属性名=“属性值”/>

二、大框架

<html>

<head>

</head>

<body>

</body>

</html>

三、一些常用的标签

1.<hn>n为整数，这表示几号标题</hn>

2.<hr>为在其所在的位置加上一行横线，

3.<p>p标签内表示一段内容</P>

4.<div>div标签中表示是一块区域，该区域内可以放你想放的东西</div>

5.<span>span标签一般用在p标签的里面，可以理解为标记了一些内容，这些内容跟之前的标签里的格式不冲突，且可对这些标签进行相应操作</span>

6.<!-- 这是注释 -->

7.<br>换行

9.x<sup>2</sup><br><!-- 这是上标，为x的平方 -->

10.x<sub>2</sub><br><!-- 这是下标，结果为X2 -->

11.<marquee>标签可用于做图片或内容滚动

direction 属性：left  right  down  up

behavior 属性：scroll  alternate  slide

12.<pre>标签

pre只对纯文本进行原排版方式进行显示，，对标签无效(转义另当别论)即还是原来普通html标记的方式来解析

13.<lable>:给元素定义快捷键

如：<h2>以下演示label标记 ---按快捷键:Alt+U，即可直接把焦点聚在user编程框中</h2>

<label for="user" accesskey="u">用户名(u):</label>

<input type="text" id="user">

四、表格

   1. cellpadding属性,可以用来设置单元格线与数据之间的距离,cellspacing属性,可以用来设置有线表格的单元格线的宽度

 2.th标记指定的栏目，文字会突出显示

 3.Border：使用表格的这一属性可以给表格加上框线

 4.<caption>   表格标题内容   </caption>

 5.align属性设置水平方向的位置：align=left、align=center 或  align=right，用于tr，th，td中

  1. nowrap属性：超过一行，浏览器默认会自动换行显示。使用该属性进行屏蔽，用于th和td中
  2. valign属性：指定垂直方向的位置<valign=f>，f取值：top、middle或bottom，可用于th和td中
  3. colspan属性：实现单元格的横向合并，格式如: <colspan=n>，用于th和td中
  4. rowspan属性：实现单元格的纵向合并，格式如: <rowspan=n>,用于th和td中
 <table border="1" width="400" height=200 cellspacing="0" cellpadding="15" bgcolor="#930000">
        <caption>学生信息</caption>
        <tr> <th colspan="3">班级，姓名与年龄</th> <th>学号</th></tr>
        <tr> <th>班级</th> <th>name</th> <th bgcolor="#009393">age</th> <th>id</th></tr>

        <tr> <td rowspan="5">601</td> <td>luou</td> <td>19</td> <td>A</td></tr>
        <tr> <td align="center">mike</td> <td>18</td> <td>01</td></tr>
        <tr> <td nowrap="nowrap">jack和小明的爸爸</td> <td>19</td> <td>02</td></tr>
        <tr> <td>rose</td> <td width = "160">21</td> <td>03</td></tr>
        <tr> <td height ="60">lili</td> <td valign ="bottom" >16</td> <td bgcolor="#009393">04</td></tr>    
</table>

五、超文本链接

1、页面链接

   <a href=””>超文本链接信息</a>

  如：<a href="http://www.hncu.net">湖南城院（当超链接到网页时，href属性要填:http://）</a>

2、本地链接

超文本链接指向自己的计算机中的某一个文件，叫本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用<A>标记符的name属性。

格式如下：

<a name="标签名">此处创建了一个标签</a>  

 <a href="#标签名">就可跳到你所建立的标签处</a>

 六、图片

     <img>标签中，alt属性可以用来给照片取名字，平时 不会显示出来，可是当照片出了问题，无法加载显示的时候，这个时候就会显示出该图片的名字 -->

  <img alt="领导合影" src="pics/zp1.jpg" width="400" height="300" border="2"/><br>

七、画中画标签

<iframe>：在你所写代码的地方加上一个小窗口显示内容

如： <iframe src="HitMouse.txt" width="600px"></iframe>

八、框架标签<frameset>

1.)注意,frameset标记是和body并列，不能放在它里面

2.) 如果只有一格用frame，多格用frameset。 frameset中的属性rows用于分行(指定各行的宽度)，cols用于分列(指定各列的高度) 

如：

frame.html
<frameset rows="20%,*" frameborder="yes">
   <frame src="head.html" name="top">
		<frameset cols="15%,*">
			<frame src="left.html" name="left">
			<frame src="href.html" name="right">
		</frameset>
</frameset>
left.html
<!-- 如果a的属性target没指定，则在当前窗口打开。否则，在target指定的窗口中打开，若_blank则是新开窗口 -->
<a href="f1.html" target="left">信电院</a><br>
//在fram.html的命名为left的fram打开
    <a href="f1.html">信电院2</a><br><!-- 由于target属性未指定，会在当前网页窗口打开f1.html的界面 -->
    <a href="f2.html" target="top">土木院</a><br>
    <a href="href.html" target="right">机电院</a><br>
    <a href="href.html" target="-blank">理学院</a><br>
<a href="#" onclick='alert("别乱点...");'>化学院</a>

九、表单

1.十个常见的Input标签

文本框 text。输入的文本信息直接显示在框中。

密码框 password。输入的文本以原点或者星号的形式显示。

单选框 radio 如：性别选择。

复选框 checkbox 如：兴趣选择。

隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

提交按钮 submit 用于提交表单中的内容。

重置按钮 reset 将表单中填写的内容设置为初始值。

按钮 button 可以为其自定义事件。

文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

图像 image 它可以替代submit按钮。

如：

<form action="">
     姓名：<input type="text"/><br>
     性别：<input type="radio" name="sex"/>男  &nbsp;&nbsp; <input type="radio" name="sex"/>女  <br/>           
   技术：<input type="checkbox"/>java &nbsp;&nbsp; <input type="checkbox"/>XML  &nbsp;&nbsp;<input type="checkbox"/>HTML  &nbsp;&nbsp;<input type="checkbox"/>JavaScript  <br/>
   <input type="hidden" value="1234"/><br>
   <input type="button" value="小可爱"/><br>
   <input type="image" src="pics/logon1.jpg" /> &nbsp;&nbsp;
<input type="submit" value="注册"/>  &nbsp;&nbsp;
	<input type="reset"/>
<form/>

2.<select>标签

  如：

<select name="language">

<option value="none">--请选择语言--</option>

<option value="java">Java语言</option>

</select>

3.<textarea>：多行文本框

   如：<!-- 注意：行要是列的1/2，两者才会等宽 -->

<textarea rows="10" cols="20" name="profile">请在此处填写你的项目经验简介

</textarea>

4.表单的封装用表格将其封装

  <form action="/helloWeb/servlet/RegServlet" method="post">

        <table border="1" bordercolor="0000ff" cellspacing="0" cellpadding="5">

          <tr>

              <th colspan="2">注册表单</th>

          </tr>

          <tr>

              <td>姓名：</td>

              <td><input type="text" name="name"/></td>

          </tr>

          <tr>

              <td>密码：</td>

              <td><input type="password" name="pwd"/></td>

          </tr>

 </table>

<input type="hidden" name="code" value="1234"/>        

</form>

5.表单提交的页面实现

    1）先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。

  1. 明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。

6.表单提交的两种方式（get，post）的区别

1) get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏，对于敏感信息安全

2) 地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。而post可以提交大体积数据。

3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中

推荐用post方式

bird_tp
关注
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
HTML 知识点总结
m0_57202083的博客
08-12 2502
HTML实例 <!DOCTYPE html> <!-- 注:<!DOCTYPE>标签没有结束标签! --> <html><!-- 元素是 HTML 页面的根元素 --> <head><!-- (头部部分) --> <meta charset="utf-8"> <title>显示在浏览器标题栏中的标题</title> </head> <body>&.
HTML专项练习（1）
qq_54029413的博客
02-04 1777
前端笔试题、HTML
HTML基础知识点总结
最新发布
weixin_64704029的博客
07-28 2176
html知识点
HTML常用知识点总结笔记
果冻
07-01 7531
目录 前言 一、HTML简介 1.什么是HTML? 2.HTML 标签 (1)HTML标签 (2)head标签 (3)body标签 3.HTML 元素 二、基础知识 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、图片标签 (五)、相对路径和绝对路径 (六)、超链接标签（重点） (七)、列表标签 HTML3种列表 (1)、有序列表 (2)、无序列表 (3)、自定义列表 (八)、表格标签 (...
学习HTML的知识点总结
Zrf2191318455的博客
11-01 2865
学习html一段时间，在视频中结合自己设备和理解写出了关于html的一些知识点
HTML基础知识总结
qq_40046544的博客
11-14 4152
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML页面知识点小总结(巨详细)
bafeiq的博客
02-11 8553
HTML页面最基础的东西总汇，建议刚开始接触前端页面的小伙伴们收藏哦，可以随时拿出来学习或者复习加深印象。
HTML知识点总结大纲
super_Fake的博客
11-30 5930
HTML知识点总结 一.基本知识 HTML 指的是超文本标记语言: HyperText Markup Language HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签> HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。 基本HTML 网页结构如下，body标签内的才是我们在浏览器上所视内容 <!DOCTYPE html>声明为 HTML5 文档 &
html5期末知识点归纳总结,web期末考试知识点
weixin_35879493的博客
06-15 777
题型及知识点一、 知识点：上课内容全覆盖(除补充的html5和css3的内容)常用的html标记及属性，弄清楚哪些是块元素，哪些是行内元素 ….特殊字符标记：p40Css属性i. 字体：font-size font-family font-weight font-variant font-style fontii. 文本外观:color letter-spacin...
HTML 知识点总结
01-02
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
HTML知识点总结（思维导图）
03-02
HTML知识点总结（思维导图）
HTML知识点总结（二）共2页.pdf.zip
10-30
在本“HTML知识点总结（二）共2页.pdf.zip”中，我们预计将深入探讨HTML的一些核心概念和特性，尽管压缩包内的“赚钱项目”文件名称可能与主题不直接相关，但我们将专注于HTML的相关知识点。 1. **HTML元素与结构**...
HTML知识点总结（三）共2页.pdf.zip
10-30
这个压缩包文件"HTML知识点总结（三）共2页.pdf.zip"显然包含了对HTML技术的深入探讨，特别是其第三部分的内容。以下是对HTML的一些关键知识点的详细阐述： 1. HTML基本结构：HTML文档通常以`<!DOCTYPE html>`开头...
java调用内部类的两种方法
热门推荐
bird_tp的博客
11-06 2万+
package com.fpi.safety; import java.lang.reflect.Field; import java.util.ArrayList; import java.util.Iterator; import java.util.List; public class TestPrintList {          public static void main(S...
javax.persistence.EntityManager 用法
bird_tp的博客
11-02 1万+
javax.persistence.EntityManager 是一个PA接口 发布 接口EntityManager 接口用于与持久化上下文交互。 一个EntityManager实例与持久化上下文相关的。一个持久化上下文是一组中的实体实例的任何持久的实体的身份有一个独特的实体实例。在持久性上下文中，实体实例及其生命周期管理。这个EntityManagerAPI是用于创建和删除持久的实体实例...
java控制台输出List中自定义对象属性值的两种方法
bird_tp的博客
11-06 1万+
package com.fpi.safety; import java.lang.reflect.Field; import java.util.ArrayList; import java.util.Iterator; import java.util.List; public class TestPrintList {          public static void main(S...
循环外和循环内定义变量的区别
bird_tp的博客
08-10 6402
一、代码展示 import java.util.HashMap; import java.util.Map; /** * @Package: raymond * @ClassName: Test * @Author: tanp * @Description: ${description} * @Date: 2020/8/10 14:12 */ public class Test { public static void main(String[] args) {
String a；String a=null；String a=““的区别
bird_tp的博客
08-11 5366
一、问题描述 很多人在定义一个String类型的变量时会用到以下的方式 String a;String a=null;String a="" 那么这三种有什么区别呢； 二、String a; String a 只是在栈中声明了一个a的内存地址，并没有给它赋初值，也就是在没有在堆内存中申请内存地址，更没有在堆内存指向引用地址; 三、String a=null 在栈中声明了一个a的内存地址，在堆中也申请了一个内存地址，但是堆中的地址不指向任何栈里的引用地址 四、String a=“”
HTML基础知识点全面总结：从标签到应用实例
以下是一些常用的HTML知识点总结： 1. **文本格式化**: - ` `：换行符，用于在文本中插入新的行。 - `<hr>`：水平线，可以用来分隔页面内容。 - `align="center"`：设置元素居中对齐。 2. **字体样式和大小*...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值