HTML学习

最新推荐文章于 2022-11-30 01:03:00 发布

Mr.rain245

最新推荐文章于 2022-11-30 01:03:00 发布

阅读量100

点赞数

文章标签： java java-ee html

本文链接：https://blog.csdn.net/Rain__Mr/article/details/121539008

版权

HTML学习

DOCTYPE：告诉浏览器我们要是用什么规范

Title标签：网页的名字

meta描述性标签：它用来描述我们网站的一些信息

标题标签h1--h6：<h1></h1>

段落标签p标签：<p></p>

换行标签：<br/>

水平线标签：<hr/>

字体样式标签：粗体：<strong></strong>斜体：<em></em>

特殊符号：

空格： 
大于号：>
小于号：<
版权符号：©

图像标签：<img src=”path”(图像地址) alt=”text”(图像的代替文字)title=”text”(鼠标悬停提示文字) width = “x”(图像宽度) height=”y”(图像高度)/>

链接标签：<a href=”path” target=”目标窗口位置”>链接文本或图像</a>

Target”_blank”-->_blank:在新的一个页面打开

锚链接：

需要一个锚标记：<a name=”top”>顶部</a>
跳转到标记：<a href=”#top”> 回到顶部 </a>

功能性链接

邮件链接：mailto:

列表

无序列表(默认12345开头)

<ol>

</ol>

有序列表

<ul>

</ul>

定义列表（一般用于网站最下方）

<dl>:标签

<dt></dt>：列表名称

<dd></dd>：列表内容

</dl>

表格

Table

行：tr

列：td

跨列：<td colspan=”4”></>

Colspqn:跨了几列

跨行：<td rowspan=”2”></td>

Rowspan:跨了几行

视频和音频

视频元素：video，<video src:”” controls></video>

Controls:播放视屏

Autoplay：自动播放

音频元素：audio，<audio src:”” controls></audio>

Controls:播放视屏

Autoplay：自动播放

页面结构分析

Header：标记头部区域的内容（用于页面或页面中的一块区域）

Footer：标记脚部区域的内容（用于整个页面或页面的一块区域）

Section：web页面中的一块独立区域

Article：独立的文章内容

Aside：相关内容或应用（常用于侧边栏）

Nav：导航类辅助内容

Iframe内联框架

表单语言

</form>

<body>

<h1>注册</h1>





<!--表单form

action ;表单提交的位置，可以是网站，也可以是一个请求处理地址

methof:post,get提交方式

    get方法提交：可以通过url中看到我们提交的信息，不安全，高效

    post方式提交：比较安全，可以传输大文件，



-->



<form action="1.我的第一个网页.html" method="post">

        <!--文本输入框：input type="text"-->

    <p>名字：<input name="username" type="text"></p>

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

    <p>密码：<input name="password" type="password"></p>





    <p>

        <input type="submit">

        <input type="reset">

    </p>



</form>



</body>

表单元素格式

Type：默认为text

Name：指定表单元素的名称

Value：元素的初始值。Type为radio时必须指定一个值

Size：指定表单元素的初始宽度。当type为text或者password时，表单元素的大小以字符为单位，对其他类型，宽度以像素为单位

Maxlength：type为text或password时，输入的最大字符数

Checked：type为radio或CheckBox时，指定按钮是否被选中

<!--单选框标签

    input type="radio"

    value :单选框的值

    name：表示组

-->

<p>

    <input type="radio" value="boy" name="sex">男

    <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>



<!--按钮-->

<p>按钮：

    <input type="button" name="btn1" value="点击">

    

</p>

<p>

    <input type="submit">

    <input type="reset">

</p>

<!--下拉框，列表框

-->

<p>国家：

    <select name="列表名称" >

        <option value="选项得值">中国</option>

        <option value="选项得值">美国</option>

        <option value="选项得值" selected>瑞士</option>

        <option value="选项得值">印度</option>

    </select>

<!--文本域



-->

<p>反馈:

    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>

</p>

<!--文件域

-->

<p>

    <input type="file" name="files">

    <input type="button" value="上传" name="upload">

</p>

<!--邮件验证-->

    <p>邮箱：

        <input type="email" name="email">

    </p>



    <!--URL-->

    <p>URL：

        <input type="url" name="url">

    </p>



    <!--数字验证-->

    <p>数字验证：

        <input type="number" name="number" max="100" min="0" step="10">

    </p>

 <!--滑块-->

<p>滑块：

    <input type="range" name="voice" min="0" max="100" step="2">

    

</p>



    <!--搜索框-->

    <p>搜索：

        <input type="search" name="search">

    </p>

表单的应用

Readonly：只读标签

Disabled：禁用，无法选择

Hidden：隐藏域，隐藏，但可以有默认值

<!--增强鼠标可用性-->

<p>

    <label for="mark"> 点我</label>

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

</p>

表单初级验证

Placeholder：提示信息

Required：不能为空

Pattern：正则表达式

Mr.rain245

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫