HTML常见标签语法，font标签，特殊字符，标题，超链接，img，表格，表单，firame，列表--Javaweb

最新推荐文章于 2023-04-19 14:16:12 发布
最新推荐文章于 2023-04-19 14:16:12 发布
阅读量288 收藏 3
点赞数
分类专栏： Javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzitian6058/article/details/116176724
版权

font标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
font标签是字体标签
    color 修改字体颜色
    size 修改字体大小 1 -- 7
    face 修改字体

    打印出 我爱中国 红色字体，4个像素，宋体
-->
<font color="red" size="8px" face="宋体">我爱中国</font>
</body>
</html>

特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
HTML中的有些特殊字符：比如：
<   &lt;
>   &gt;
空格  &nbsp;

打印出  我 爱 <中国>   红色字体，4px，宋体
-->
<font color="red" size="4px" face="宋体">我&nbsp;爱&nbsp;&lt;中国&gt;</font>

</body>
</html>

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
标题标题表示标题 h1 -- h6 字体依次变小
使用标题一到标题三打印我是标题，宋体，红色
使用标题四到标题六打印我爱中国，黑体，蓝色
-->
<h1 style="color: red; font-family: 宋体;">我是标题标签</h1>
<h2 style="color: red; font-family: 宋体;">我是标题标签</h2>
<h3 style="color: red; font-family: 宋体;">我是标题标签</h3>

<h4 style="color: blue; font-family: 宋体">我爱中国</h4>
<h5 style="color: blue; font-family: 宋体">我爱中国</h5>
<h6 style="color: blue; font-family: 宋体">我爱中国</h6>
</body>
</html>

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
超链接标签a
    href是链接的域名
-->
<a href="http://www.baidu.com" style="color: blue; font-family: 宋体;"><font size="7px">百度</font>
</a>
</body>
</html>

img图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
img图片标签
    src 图片路径
    width 宽度
    height 高度
    alt 没有图片时显示什么内容
    border 边框
-->

<img src="1.jpg" height="100" width="80" border="200" alt="noThisPicture">
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
表格标签table
    align 对齐方式
    cellspacing 单元格间距
    border 表格边框
        tr 行标签
            td 单元格标签
            th 表头标签
-->

<table border="1" width="10" height="10" bgcolor="blue" cellspacing="0" align="center">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
 </table>

</body>
</html>

表格跨行跨列，合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
链接两个单元格：
    colspan 行
    row  列
-->
</head>
<body>
<table bgcolor="green" width="200" height="200" border="1" cellspacing="0">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <fr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </fr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td>4.4</td>
        <td>4.5</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
        <td>5.4</td>
        <td>5.5</td>
    </tr>
</table>
</body>
</html>

iframe标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
iframe标签是在当前页面开辟一个空间显示其他内容
    src显示什么内容的路径
    name 此标签的名字
    width 宽度
    height 高度
    href 域名
    target 在哪里显示连接上的内容

-->
<iframe src="5-img图片标签.html" name="iii" width="500" height="500"></iframe>
<br/>
<ul>
    <li><a href="http://www.baidu.com" target="iii">百度</a> </li>
    <li><a href="http://www.github.com" target="iii">github</a> </li>
</ul>
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
列表标签
    ul 无序列表标签
        type 类型
            none 无
            li列表
    ol 有序列表标签
        li列表
-->
<ul type="none">
    <li>马云</li>
    <li>马化腾</li>
</ul>
<ol>
    <li>马云</li>
    <li>马化腾</li>
</ol>
</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TableList</title>
</head>
<body>
<!--
form 表单标签
    <input type="text" value="默认值" />   文本输入框>
    <input type="password" />  密码输入框
    <input type="radio" name="sex">男<input type="radio" name="sex">女    单选
        checked="checked"  默认选项
    <input type="checkbox">java<input type="checkbox">javaScript<input type="checkbox">C++   复选框
    <select> 下拉列表框
        <option>下拉列表选项
            select="select" 默认选项
    <textarea>  多行输入框
        rows 几行的高度
        cols 每行几个字符高度
    <input type="reset" value="重新输入"/>  重置
    <input type="submit" value="提交"/>   提交
    <input type="button" value="提交"/>  按钮
    <input type="file" />   文件上传
    <input type="hidden" name="隐藏名" value=""/>  隐藏,给程序看的，
    总结：待单行框和选取前面有圆或矩形的都要Input


-->
<form>
    <table align="center">
        <tr>
            <td>用户名字：</td>
            <td><input type="text" value="chen"/> <br/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="abc"/> <br/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/> <br/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br/></td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox">java<input type="checkbox">javaScript<input type="checkbox">C++<br/></td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td><select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>英国</option>
                <option>日本</option>
                <option>印度</option>
                <option>泰国</option> </select> <br/>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20" >默认</textarea> <br/></td>
        </tr>
        <tr>
            <td><input type="reset" value="重新输入"/>
                <input type="submit" value="提交"/>
            </td>
        </tr>
    </table>

</form>
</body>
</html>

表单提交

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

<!--
    form 表单标签
        action 属性，设置提交的服务器地址
        method 属性，设置提交的方式 get(默认)/post
-->

<form action="http://www.baidu.com" method="get">
    <input type="hidden" name="action" value="login">
    <h1>用户注册</h1>
    <table align="center">
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/> <br/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex" checked="checked
            <td>用户名字：</td>
            <td><input type="text" value="chen"/> <br/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="abc"/> <br/></td>
        </tr>
        <tr>">男<input type="radio" name="sex">女<br/></td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox">java<input type="checkbox">javaScript<input type="checkbox">C++<br/></td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td><select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>英国</option>
                <option>日本</option>
                <option>印度</option>
                <option>泰国</option> </select> <br/>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20" >默认</textarea> <br/></td>
        </tr>
        <tr>
            <td><input type="reset" value="重新输入"/>
                <input type="submit" value="提交"/>
            </td>
        </tr>
    </table>

</form>
</body>
</html>

其他标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
div标签 默认独占一行`
span标签 长度是封装数据的长度
p标签 默认在段落的上方或下方空一行出来
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>段落标签1</p>
<p>段落标签2</p>
</body>
</html>
MC6058
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb-标签库应用方法初探.docx
12-16
JavaWeb标签库应用方法初探 JavaWeb标签库是一种解决传统JavaWeb程序中JSP页面与Java代码混乱问题的方法。通过使用标签库，可以将HTML开发和JSP开发分离，使得页面设计者专注于页面外观设计，而Java程序员专注于...
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的语法.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的语法.avi
iframe 的使用理解
最新发布
i_Satan的博客
04-19 4482
frame 用于在页面内显示页面，使用 iframe 会创建包含另外一个文档的内联框架（即行内框架）
关于iframe嵌套
danwind的专栏
11-10 144
iframe 标签 -- HTML内联框架 iframe标签是成对出现的,以&lt;iframe&gt;开始,&lt;/iframe&gt;结束 iframe标签内的内容可以做为浏览器不支持iframe标签时显示 引用网址:http://www.dreamdu.com/xhtml/tag_iframe/ 属性 Common -- 一般属性 name -- 定义...
iframe标签的使用
weixin_44767973的博客
12-07 2万+
iframe标签支持 HTML 中的全局属性： iframe标签支持 HTML 中的事件属性：如Window 事件属性、Form 事件、Keyboard 事件、Mouse 事件、Media 事件等 iframe常用的元素属性：IFrame 对象代表 HTML iframe 元素。可使用 getElementById() 来访问 iframe 元素。如： var iframe = document.getElementById(“iframe”); var iwindow = iframe.cont
【JavaWeb学习】—特殊字符（二）
道阻且长，行则将至。
09-11 273
🎉🎉目前状况：大三， 大学期间，属于普普通通学习型学生，间歇性踌躇满志，习惯性混吃等死🤣🤣。期待与各位佬一起学习，共同进步 👏👏👏👏。👩‍🦰👩‍🦰个人简介：大家好，我是王童鞋。
零基础学习WEB前端开发(七)：注释及特殊字符
陶小桃Blog
10-23 2296
一、注释的使用 注释，就是添加一些“废话”，为了便于理解和阅读，但是并不在正式内容中显示或执行 语法：<!-- 注释的内容 --> <!--这是一段注释。注释不会在浏览器中显示。--> <p>这是一段普通的段落。</p> 可以使用快捷键进行注释：Ctrl + / 二、特殊字符 例如空格，在程序中敲n个空格，都是显示一个空格。但是可以使用特殊字符来实现。下面的表中是常见的字符，在代码中输入实体名称就行，注意不要丢了英文分号。 常用的特...
JavaWeb新版教程-html&CSS-L和CSS-img标签.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-img标签.avi
JavaWeb新版教程-html&CSS-L和CSS-font标签.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-font标签.avi
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的介绍.avi
02_HTML常用标签（font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签）
qq_45657848的博客
01-10 4749
font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签
设置Iframe透明
nevEr leAve
04-08 915
设置Iframe透明　　Iframe还有一个更大的好处，就是可以设置框架透明，具体操作步骤如下：　　（1）在a.html里调用b.html,　　（2）在浏览器中浏览该页文件，发现在插入Iframe的区域将原来单元格的背景覆盖了，这不是想要的效果。　　（3）打开b.htm页面，切换到代码视图，在标记中插入代码如下：                    （4）将a.html页
a标签中href的几种用法
乔的博客
03-25 1万+
a标签的一种写法，所以就来整理下a标签中href的几种用法。 一、JS伪协议的几种调用方法（参考总结的） 1、 a href="javascript:js_method();" 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的 触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句。 2、a href="javascri
HTML字体 font和链接
qq_41998938的博客
05-25 3040
1.font简介 标签：文字内容 作用：格式化文本 贴士：(1)只能控制字体集(Helvetica,Arial),大小和颜色 (2)最好别用font标签，因为在HTML5中font已被列入没有意义的标签，可以通过css使用font标签。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta char...
Web前端入门（五）HTML常用特殊字符
treesorshining的博客
05-12 861
总目录 HTML常用特殊字符 特殊字符 描述 字符代码 空格符 &nbsp; < 小于号 &lt; > 大于号 &gt; & 和号 &amp; ￥ 人民币 &yen; © 版权 &copy; ® 注册商标 &reg; ° 摄氏度 &deg; ± 正负号 &plusmn; × 乘号 &times; ÷ 除号 &divide; ² 二次方 &a
iframe标签用法详解
热门推荐
时光流水的博客
11-05 13万+
        iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性。 1、iframe 定义和用法         iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 HTML 与 XHTML 之间的差异         在 HTML 4.1 Strict D...
HTML常用标签（font，标题标签 ，段落标签，水平线，换行）一
余正源的博客
02-06 1万+
1.font标签： <!-- 通过font标签可以来设置字体相关的效果 可以在标签中来添加属性，从而设置浏览器如何显示内容 属性需要写在开始标签中或自结束标签中 属性实际上就是一个名值对结构 属性名="属性值" 属性名='属性值' 属性名和标签名之间要使用空格分开，一个标签中可以设置多个属性，多个属性之间使用空格分开 color 用来设置字体颜色
font标签、特殊字符、标题标签h1-h6
weixin_46065214的博客
08-15 2348
font标签、特殊字符、标题标签h1-h6
firame标签: IHTMLElement -> IHTMLFrameBase2 -> IHTMLWindow2 -> IHTMLDocument2 跨域访问
weixin_30920853的博客
06-18 289
获得iframe标签的元素指针 CComPtr<IHTMLElement> spAdIframe = ... CComQIPtr<IHTMLFrameBase2> spFrameBase2 = spAdIframe; CComPtr<IHTMLWindow2> spIframeWindow2 = NULL; hr = spFrameBase2-&...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MC6058

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值