Html学习
Posted 天邪吴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html学习相关的知识，希望对你有一定的参考价值。
第一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="加油小弟">
<meta name="description" content="学习java">
<title>Title</title>
</head>
<body>
hello,world!
</body>
</html>
基本标签
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>基本标签的学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p> 两只老虎》是根据一首在法国叫做《雅克兄弟》</p>
<p> 两只老虎》是根据一首在法国叫做《雅克兄弟》</p>
<p> 两只老虎》是根据一首在法国叫做《雅克兄弟》</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎》是根据一首在法国叫做《雅克兄弟》</br>
两只老虎》是根据一首在法国叫做《雅克兄弟》</br>
两只老虎》是根据一首在法国叫做《雅克兄弟》</br>
两只老虎》是根据一首在法国叫做《雅克兄弟》</br>
两只老虎》是根据一首在法国叫做《雅克兄弟》</br>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<br/>
<!--特殊符号-->
空 格：
空 格
<!--大于号-->
>
<br/>
<!--小于号-->
<
©版权所有小吴
<!--
特殊符号的记忆方式
1.& 输入字母调
2.查百度
-->
<img src="pan" >
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址
相对地址，绝对地址
../--上一级目录
alt：图片名字必填
-->
<img src="../resources/image/1.jpg"alt="奶奶妈妈"title="悬停"width="300"height="300">
</body>
</html>
列表学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>c</li>
<li>前端</li>
<li>j</li>
</ol>
<!--无序列表-->
<ul>
<li>java</li>
<li>c</li>
<li>前端</li>
<li>j</li>
</ul>
<!--自定义列表
应用，公司网页底部
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>前端</dd>
<dt>位置</dt>
<dd>java</dd>
<dd>java</dd>
</dl>
</body>
</html>
内嵌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联</title>
</head>
<body>
<!--iframe 内联框架
src:地址
w-h:宽度高度
-->
<iframe src="内联.html" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href = "链接标签.html.html" target="hello">点击跳转</a>
</body>
</html>
表单学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置可以是网站叶可以是地址
method：post,get提交方式
get:我们可以看到url我们提交的信息，高效但是不安全
-->
<!--<form action="我的第一个网页.html" method="get">-->
<form action="我的第一个网页.html" method="post">
<!--文本输入框 input type="text"
value="我帅"默认初始值
maxlength="8"最长能写几个字符
size="30"文本框长度
-->
<p>名字:<input type="text" name="username" placeholder="请输入名字" required ></p>
<!--<p>名字:<input type="text" name="username" value="admin" readonly ></p>-->
<!--密码框-->
<p>密码:<input type="password" name="pwd"></p>
<!--<p>密码:<input type="password" name="pwd" hidden隐藏value获取默认值></p>-->
<!--单选框标签
input type="radio"
value :单选框的值
name :表示组
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<!-- <input type="radio" value="boy" name="sex" checked disabled/>男-->
<input type="radio" value="girl"name="sex"/>女
</p>
<!--多选框
input type=“checkbox”
-->
<p>
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮:
<input type="button" name="btn1" value="点击变长">
<!-- 图片按钮-->
<input type="image" src="resources/image/1.jpg">
</p>