Java学习的第十三天:HTML简单的一下基础进行学习,并对基础学习完成。

html

超文本标记语言

最新版本:html5+css3

w3c是(万维网)

image-20210627171815315

<!--!DOCTYPE:告诉浏览器,我们要使用什么规范 -->
<!DOCTYPE html>
<!--html 这个是一个总标签,-->
<html lang="en">
<head>
<!--   heae表示标签的头部标签:-->
<!--   meta标签,就是一个描述标签,他是用来描述我们网站的一些信息-->
<!--   meta 一般用来做SEO-->
   <meta charset="UTF-8">
   <meta name="keywords" content="狂神说Java,中部">
   <meta name="description" content="来这个地方可以学习Java">
   <title>我的第一网页</title>
</head>
<!--body 标签,也是我们的主体标签;-->
<body>
hello,wored
</body>
</html>

 

image-20210627173540570

hemasd

<!DOCTYPE html>
<html lang="en">
<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>

<!--换行标签-->
只老虎,两只老虎,跑得快,跑得快,</br>>有眼睛,一只没有尾巴,真


<!--水平线标签-->
<hr/>

<!--字体样式标签-->
<!--粗体,斜体-->
<h1>字体样式标签</h1>
  <strong>粗体:多动一下脑子</strong> <br>
<em>斜体:多动一下脑子</em>
粗斜体

<br>
<!--注释和特殊符号 特殊符号有:::-->
空格:萨达爱&nbsp; 仕达  <br>
大于: &gt;    <br>
小于:&lt;
<hr>

版权符号: &copy;

<!--
特殊符号记忆方式:
& ;

-->


</body>
</html>

 

常见的标签

image-20210627180329883

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>图像标签学习</title>
</head>
<body>
<!--img学习:
src:图片的地址
    相对地址,绝对地址


-->


<img src="../resources/image/13.jpg" alt="加载失败" title="悬停文字">

</body>
</html>

image-20210627181951354

 

image-20210627211259007

image-20210627211549185

image-20210627223607359

image-20210627224828794

image-20210627231517961

image-20210627233701681

w

image-20210627235516821

image-20210627235550322

表单元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>登陆注册</title>
</head>
<body>
<h1>
  注册
</h1>

<!-- form
action:可以是一个网站,也可以是一个请求处理地址
method post -get 提交的方式
get 提交的内容:在url中看的见,但是呢,就是高效,就是不安全,不可以传输大文件
post 提交的内容:在url中看不见,传输大文件

-->
<form action="表哥.html" method="get">
<!--   文本输入框:-->
   <p>名字:<input type="text" name="username"> </p>
   <p>密码:<input type="password" name="pwd"></p>

<p>
    <input type="submit">
    <input type="reset">
</p>
</form>
<form action="表哥.html" method="post">
   <!--   文本输入框:-->
   <p>名字:<input type="text" name="username"> </p>
   <p>密码:<input type="password" name="pwd"></p>



<!--单选框-->
<p>
   <input type="radio" value="boy" name="sex"/>男
   <input type="radio" value="girl" name="sex"/>女

</p>


<!--多选框-->
<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>



<!--按钮-->
<p>按钮:
   <input type="button" name="btn1" value="点击变长">
<!--   <input type="image" src="../resources/image/13.jpg">-->

</p>



<!--下拉框-->
<p>喜欢的地方:
   <select name="列表名称">
     <option value="选项的值">北京</option>
     <option value="选项的值">上海</option>
     <option value="选项的值">贵州</option>
     <option value="选项的值">深圳</option>
     <option value="选项的值" selected>思南</option>
   </select>

</p>






<!--     文本域-->
    <p>反馈:
        <textarea name="texttarea" cols="50" rows="10">
            文本内容
        </textarea>

    </p>


<!--文件域-->
    <p>文件域:
        <input type="file" name="files">
         <input type="button" value="上传" name="upload">
    </p>

<!--     邮件验证-->
<p>邮箱:
  <input type="email" name="emali1">
</p>

<!--     url验证-->
<p>url:
   <input type="url" name="url1">
</p>


<!--     数字验证-->
    <p>商品数量:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>
<!--     滑块-->
    <p>音量:
        <input type="range" min="10" max="100" step="1">
    </p>
<!--搜索框:-->
<p>搜索:
   <input type="search" name="12">

</p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

 

表单元素格式

image-20210628003829459

image-20210628003845269

表单的初级验证

image-20210628010906459

 

posted @ 2021-06-28 01:13  九块钱的代码  阅读(181)  评论(0)    收藏  举报