HTML相关学习

小草鱼2年前前端相关343

HTML


<!-- -->:注释;

<!DOCTYPE html>:告诉浏览器,使用html的规范;

<html>


<head>:代表网页的头部;

    <meta charset="UTF-8">:meta标签,描述性标签,一般用来seo;

    <title>我的第一个网页</title>:代表网页的标题;

</head>


<body>:代表网页的主体;

我的第一个网页

</body>

</html>






第二讲:标签

<body>

<h1>1级标签</h1>

<h2>2级标签</h2>

<h3>3级标签</h3>

<h4>4级标签</h4>

<h5>5级标签</h5>

<h6>6级标签</h6>

<p>第一行</p>

<p>第二行</p>

第三行换行符<br/>

第四行换行符<br/>

<hr/>横线

<br>

<strong>粗体标签</strong>

<br>

<em>斜体标签</em>

<!--注释符号 -->

<br>

特殊符号可以去百度查询!

<br>

空&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp格符号

<br>

&gt大于号

<br>

&lt小于号

<br>

&copy;版权符号

</body>






第三讲:图片标签

<img src="../resource/image/12.png" alt="空白图像" title="悬停文字"width="1600"height="900">

1、src--》图片的地址;

2、alt--》图片加载失败时提示的文字名字;

3、title--》图片上鼠标悬停时显示的文字;

4、width--》宽度;

5、height--》高度;





第四讲:超链接标签

<a name="top">顶部</a>:作为标记;



<a href="https:www.baidu.com" target="_blank">跳转到百度

<img src="../resource/image/12.png" alt="空白图像" title="悬停文字"width="1600"height="900">

</body>

</a>

以上body内容,点击文字和图片都能够跳转到百度;



<a href="#top">回到顶端</a>:通过标记回到页面的顶部;(这个功能也可以从别的页面跳转过来)


<a href="mailto:邮箱名字">联系我</a>:可以通过这个标签调用电脑邮件软件;




1、href--》表示要跳转到哪个标签;

2、target--》表示窗口在哪里打开;(_blank:新窗口打开;_self:在自己页面打开;)





第五讲:块元素和行内元素

快元素是指标签内的内容占一行

行内元素是指几个标签内的内容都在一行


第六讲:列表标签

有序列表

<ol>

<li>java</li>

<li>java1</li>

<li>java2</li>

<li>java3</li>

<li>java4</li>

</ol>

无序列表

<ul>

    <li>java</li>

    <li>java1</li>

    <li>java2</li>

    <li>java3</li>

    <li>java4</li>

</ul>

自定义列表

<dl>

    <dt>学科</dt>

    <dd>java</dd>

    <dd>linux</dd>

</dl>


第七讲:表格

<table border="1px">:表格的格式;

    <tr>:行;

        <td colspan="4">1-1</td>列;colspan是单元格指合并4列;

        <td>1-2</td>

        <td>1-3</td>

    </tr>

     <tr>

        <td rowspan="2">2-1</td>:rowspan是指单元格合并2行;

        <td>2-2</td>

        <td>2-3</td>

    </tr>

     <tr>

        <td>3-1</td>

        <td>3-2</td>

        <td>3-3</td>

    </tr>

</table>


第八讲:媒体元素

<video src="../resource/video/as.mp4" controls >111</video>:视频标签;

<audio src="../resource/video/as.mp4" controls "></audio>:音频标签;


第九讲:网页结构分析

<header>  <h2>网页头部</h2></header>:标记头部区域的内容;

<footer>  <h2>网页底部</h2></footer>:标记脚部区域的内容;

<section>  <h2>快</h2></section>:web页面中的一块独立区域;

article:独立的文章内容;

aside:相关内容或应用(常用于侧边栏);

nav:导航类辅助内容;


第十讲:iframe内联框架

<iframe src="https://www.baidu.com" name="hello" frameborder="0"width="1000" height="700"> </iframe>


<a href="http://kewang.work" target="hello">点此跳转</a>

可以通过a标签来条状连接仍然放到内联框架内


第十一讲:表单

<h1>注册</h1>

<form method="get" action="我的第一个网页.html">:表单标签,get方法提交时url内显示输入信息,post方法的话不会在url内显示输入信息;

  <p>名字:<input type="text" name="username" id=""></p>:设置了一个输入框输入名字;

  <p>密码:<input type="password" name="pwd" id=""></p>:设置了一个输入框输入密码;

    <p><input type="submit">:设置了一个提交按钮;

    <input type="reset"></p>:设置了一个重置按钮;

</form>


第十二讲:文本框和单选框

type:指定元素的类型,text、password、checkbox、radio、submit、reset、file、hidden、image、button、默认为text;

name:指定表单元素的名称;

value:元素的初始值,type为radio时必须指定一个值;

size:指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位;

maxlength:type为text或password时,输入的最大字符数;

checked:type为radio或checkbox时,指定按钮是否是被选中;


<p>xingbie: --》这是个单选框,使用相同name后就只能选择一个了;

    <input type="radio" value="boy" name="sex" checked>男:后面的男是页面显示,内部识别是选择了boy的值;加checked会默认选中;

    <input type="radio" value="gril" name="sex">女:选择后,后端会提示sex=gril;

</p>


第十三讲:多选框和按钮; 


<p>aihao:  --》多选框选型,checkbox;name需要一致,value值为后端显示的值;

        <input type="checkbox" value="sleep" name="happy">shuijiao

        <input type="checkbox" value="code" name="happy">xiedaima

        <input type="checkbox" value="chat" name="happy">liaotian

        <input type="checkbox" value="game" name="happy">youxi

    </p>



<input type="button" name="btn1" value="点击变长">:按钮,名字是点击变长;



第十四讲:下拉框

<select name="列表名称" >

            <option value="china">中国</option>

            <option value="usa">美国</option>

            <option value="ruishi" selected>瑞士</option>:加入selected会默认选中;

            <option value="eluosi">俄罗斯</option>

</select>



第十五讲:文本域和文件域

<textarea name="textarea" cols="30" rows="10">文本内容</textarea>:cols是列数,rows是行数;


 <input type="file" name="files">:文件域标签,可以选择文件,后端显示files=选择的文件;


第十六讲:搜索框滑块和简单验证

 <p>商品数量:

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

  </p>


 <p>音量:滑块;

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

 </p>


 <p>搜索:

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

</p>





第十七讲:表单的应用

在标签内加相应控制符

readonly:只读

disable:禁用

hidden:隐藏


  <p>搜索:

        <label for="mark">点我试试</label>:可以支持点击文字就跳转到id=mark的文本输入框中

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

   </p>


第十八讲:表单初级验证

placeholder="请输入用户名":可以提示用户输入信息;

required="":表示此字段不能为空;

pattern:正则表达式;


























发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。