html标签小结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!--head头部要定义的东西-->
    <!--1、定义html的编码类型:下面的方式指定html的编码方式为“utf-8”-->
                <!--<meta charset="UTF-8">-->
    <!--2、刷新:下面的方式的指定,5秒钟后,自动刷新该页面-->
                <!--<!meta http-equiv="REFRESH" CONTENT="5";>-->
    <!--3、跳转:下面的方式的指定,5秒钟后,自动跳转到http://www.baidu.com这个网站-->
                <!--<!meta http-equiv="REFRESH" CONTENT="5;URL=http://www.baidu.com">-->
    <!--4、关键词:比如网站的自我介绍,爬虫去爬网站的时候搜索关键字,下面的例子就是实现如果爬虫去体育、足球,篮球就会爬到我们定义的这个网站-->
                <!--<meta name="keywords" content="体育,足球,篮球">-->
    <!--5、介绍,描述:介绍我这个网站是干什么的;-->
                <!--<meta name="description" content="我们致力于提高python的水平">-->
    <!--6、X-UA-Compatible:主要为了解决ie6不兼容的问题-->
    <!--7、标题:打开这个网页的标题是什么,比如在鼠标放打开的栏上就会浮现title定义的名称-->
                <!--<title>Title</title>-->
    <!--8、网页的图片,就是浏览器打开那一栏的图片-->
                <!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> -->
    <!--上面都不是很重要,下面这些才重要-->
    <!--1、css文件-->
    <!--2、css代码块-->
    <!--3、js文件-->
    <!--4、js代码块-->

</head>
    <body>
        <hr/>
        <!--标签的类型-->
        <!--<!–标签一般分为块级标签和行内标签,块级标签会占一行,行内标签仅仅占了自己需要的大小–>-->
        <!--常用的块级标签-->
            <!--h标签-->
            <!--div标签,这个是最常用的块级标签-->
            <!--p标签-->
        <!--常用的行内标签-->
            <!--span标签-->
        <hr/>
        <!--符号:符号一般用特殊的标志来代替,这个可以网上搜索-->
        <!-->大于号-->
        <!--<小于号-->
        <!-- 空格-->
        <hr/>
        <h2>下面开始正式进入学习标签</h2>
        <hr/>
        <h3>p标签</h3>
        <!--作用:就和我们写作文一样,把属于一行的文件用p标签括起来-->
        <p>经典款辣椒粉可垃圾法拉克福建阿拉就发了家拉法基奥拉夫建安路附近啊结案率放假爱了飞</p>
        <!--#p标签括起来的就是一段-->
        <p>的结案率放假爱了激发了会计法律进发了疯静安老分局阿里风景阿拉基<br>fadsfkasjf</p>
        <!--br标签的意思就是换行-->
        <div style="width: 200px;border:10px solid red;word-break:break-all;">
            <p>xxxxxxxxxxxxxxxxxxxxxxddd<br/>dddaaaaaaaaa</p>
            <p>xxxxxxxxxxxxxxxx<br/>xxxxxxddddfffffffffffffffddaaaaaaaaa</p>
             <p>xxxxxxxxxxxxxxxxxxxxxxddd<br/>dddaaaaaaaaa</p>
            <p>xxxxxxxxxxxxxxxx<br/>xxxxxxddddfffffffffffffffddaaaaaaaaa</p>
        </div>
        <!--上面这个实现的效果就是hi,把div标签包括的数据放在一个宽度为200像素的框中,框的颜色是红色,框的宽度为10个像素-->
        <hr/>
        <h3>a标签</h3>
        <!--a标签的意思就是一个超链接-->
        <p><a href="http://www.baidu.com">百度</a></p>
        <!--点击百度这个超链接,会跳转到http://www.baidu.com这个地址,且在当前的页面打开一个http://www.baidu.com这个地址-->

        <p><a href="http://www.163.com" target="_blank">网易</a></p>
        <!--点击网易这个超链接,会跳转到http://www.163.com这个地址,但是会重新打开一个页面,这个就是target="_blank"的作用-->
        <p><a href="test.html" target="_blank">文件</a></p>
        <!--这个意思点击文件会执行test.html这个文件-->
        <a href="#t1">第二章</a>
        <div id="t1" style="height:200px;background-color: red;">第一张</div>
        <div id="t2" style="height:300px;background-color: green;">第二张</div>
        <div id="t3" style="height:400px;background-color: yellow;">第三张</div>

        <!--这个意思就his点击第二章,就会跳转到id为t1的这个页面,且id不能重复-->

        <hr/>
        <h3>img标签</h3>
        <img src="1.JPG" height="200px" width="150px" title="xxxxxxxxxxx">
        <!--显示图片,图片为1.JPG。高度为200像素,宽度为150像素,鼠标放在图片上面,鼠标的浮动框会显示的名称为xxxxxxx-->

        <hr/>
        <h3>h标签</h3>
        h标签是标题标签,从1到6字体依次变小
        <h1>aaaa</h1>
        <h2>aaaa</h2>
        <h3>aaaa</h3>
        <h4>aaaa</h4>
        <h5>aaaa</h5>
        <h6>aaaa</h6>

        <hr/>
        <h3>select标签</h3>
        <!--是一个下拉框标签-->
        <select>
            <option>北京</option>
            <option>内蒙古</option>
            <option>乌海</option>
            <option>黑龙江</option>
        </select>
        <!--上面是最简单的下拉框-->
        <select size="5">
            <option>北京</option>
            <option>内蒙古</option>
            <option>乌海</option>
            <option>黑龙江</option>
        </select>
        <!--用滚动条的方式显示,每次滴血那是2个-->

        <select multiple="multiple">
            <option>北京</option>
            <option>内蒙古</option>
            <option>乌海</option>
            <option>黑龙江</option>
        </select>
        <!--这个可以支持多选,按住ctrl就可以支持多选-->

        <select>
            <optgroup label="第一集团军">
                <option>北伐军1</option>
                <option>北伐军2</option>
            </optgroup>
            <optgroup label="第二集团军">
                <option>北伐军3</option>
                <option>北伐军4</option>
            </optgroup>
        </select>

        <select>
            <option>北伐军5</option>
            <option>北伐军6</option>
            <option selected="selected">北伐军7</option>
            <option>北伐军8</option>
    </select>
    <!--selected的意思就是默认选中selected指定的选项-->
    <hr/>
        <h4>input系列标签</h4>
        <hr/>
        <input type="checkbox">
        <!--正方形的选中框,为复选框,可以选择多个-->
        <hr/>
        <input type="radio">
        <!--圆形的选中框,是单选框,只能选择一个-->
        <hr/>
        <input type="text">
        <!--输入框-->
        <hr/>
        <input type="password">
        <!--密码输入框-->
        <hr/>
        <input type="button" value="提交">
        <!--提交按钮-->
        <hr/>
        <input type="submit" value="提交">
        <!--提交按钮-->
        <hr/>
        <input type="file">
        <!--上传文件-->
        <hr/>
        <form action="http://www.baidu.com">
            <div>
                主机名:<input name="host" type="text">
            </div>
            <div>
                密码:<input name="passwd" type="password">
            </div>
            <div>
                端口:<input name="port" type="text">
            </div>
            <input type="button" value="button提交">
            <input type="submit" value="submit提交">
        </form>
        <!--form标签主要是用来提交数据给后台的,如果需要往后台提交数据,那么只有submit可以提交成功,button是不会提交数据到后台的,form标签内的数据都会提交给后台,
        上面的例子就会text输入框的内容提交给后台,提交的类型是一个dict,k的值为host,v的值为输入的值,-->
        <hr/>
        <h4>textarea标签</h4>
        <textarea>默认值</textarea>
        <textarea></textarea>
        <!--多行的输入框-->
        <input type="text" value="xxxxxx">
        <!--单行输入框,有默认值-->
        <hr/>
        <h4>label标签</h4>
        <!--没有多大的用处,仅仅为了用户使用的变量,让一个文本和标签做一个对应的关系-->
        <label for="ttt">婚否</label>
        <input id="ttt" type="checkbox">
        <!--实现的效果就是,点击婚否这2个字,那么就会选中checkbox指定的框-->
        <label for="aaa">生否</label>
        <input id="aaa" type="radio">
        <!--实现的效果就是,点击生否这2个字,那么就会选中radio指定的框-->
        <label for="bbb">输入否</label>
        <input id="bbb" type="text">
        <!--实现的效果就是点击输入否,光标就会移动到text的输入框中-->

        <hr/>
        <h4>ul标签</h4>
        <!--生成一个列表,无序号-->
        <ul>
            <li>第一题</li>
            <li>第二题</li>
            <li>第三题</li>
            <li>第四题</li>
        </ul>
        <!--生成一个列表,但是没有序号-->
        <hr/>
        <h4>ol标签</h4>
        <!--生成一个列表,有序号-->
        <ol>
            <li>第一题</li>
            <li>第二题</li>
            <li>第三题</li>
            <li>第四题</li>
        </ol>
        <hr/>
        <h4>dl、dt、dd标签</h4>
        <!--生成一个标题+内容的结构-->
        <dl>
            <dt>标题1</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dd>内容3</dd>
            <dd>内容4</dd>
            <dt>标题2</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dd>内容3</dd>
            <dd>内容4</dd>
        </dl>

        <hr/>
        <h4>table标签</h4>
        <!--生成一个表格,一个表格包括一个表头thead和一个表身体tbody-->
        <table border="1">
            <thead>
            <!--这里创建表头,先创建一行,在创建多列即可,默认情况下这个表格是没有边框的,但是加一个border="1"就会给这个列表加一个边框-->
                <tr>
                    <th>表头第一列</th>
                    <th>表头第二列</th>
                    <th>表头第三列</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>第一行第一列</td>
                    <td>第一行第二列</td>
                    <td>第一行第三列</td>
                </tr>
                <tr>
                    <td>第二行第一列</td>
                    <td>第二行第二列</td>
                    <td>第二行第三列</td>
                </tr>
            </tbody>
        </table>
        <table border="1">
            <thead>
            <!--这里创建表头,先创建一行,在创建多列即可,默认情况下这个表格是没有边框的,但是加一个border="1"就会给这个列表加一个边框-->
                <tr>
                    <th>表头第一列</th>
                    <th>表头第二列</th>
                    <th>表头第三列</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td colspan="2">第一行第一列</td>
                    <!--这个意思是这一行,会把第一列和二列全部占,也就是一列占原来两列的位置-->
                    <!--<td>第一行第二列</td>-->
                    <td>第一行第三列</td>
                </tr>
                <tr>
                    <td>第二行第一列</td>
                    <td>第二行第二列</td>
                    <td>第二行第三列</td>
                </tr>
            </tbody>
        </table>
        <table border="1">
            <thead>
            <!--这里创建表头,先创建一行,在创建多列即可,默认情况下这个表格是没有边框的,但是加一个border="1"就会给这个列表加一个边框-->
                <tr>
                    <th>表头第一列</th>
                    <th>表头第二列</th>
                    <th>表头第三列</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td rowspan="2">第一行第一列</td>
                    <!--这个实现的效果就是一列中的一行占据了2行的空间-->
                    <td>第一行第二列</td>
                    <td>第一行第三列</td>
                </tr>
                <tr>
                    <!--<td>第二行第一列</td>-->
                    <td>第二行第二列</td>
                    <td>第二行第三列</td>
                </tr>
            </tbody>
        </table>
        <hr/>
        <h1>fieldset</h1>
        <fieldset>
            <legend>登陆</legend>
            <!--实现在框上显示登陆这2个字-->
            <p>用户名:</p>
            <p>密码:</p>
        </fieldset>
    </body>
</html>

  

时间: 2024-10-31 07:16:55

html标签小结的相关文章

Struts2中s:set标签和s:if标签小结

1.  s:set标签 格式:<s:set name="" value="" scope=””/> 说明:把jsp页面中的一个值,以name存储起来.Scope存储的范围是在application.session.request.page…….默认是存储在该action中. 用法①:<s:set name="miloList" value="{‘java’,’php’,’C#’}"/> 这个值是一个li

Struts2标签小结

前边总结Struts2的时候将标签这一部分给丢了,当时因为开发的时候很少使用,这里简单总结一下.先看一下Struts2标签的分类吧.然后分类总结一下即可. 由于控制标签用的比较多,所以放在了前边.好首先看一下控制标签吧. 一,控制标签,JSTL大家应该都使用过,其实Struts2的控制标签和那个特别像的,主要是对EL表达式满足不了的进行补充使用.这里简单看一下吧: 1, if--elseif--else,用来控制选择输出的标签: <html xmlns="http://www.w3.org

JSTL标签之c:foreach,c:if标签小结

<c:forEach>标签用于通用数据循环,它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1 var 代表当前项目的变量名 否 无 varStatus 显示循环状态的变量 否 无 begin和end属性 可以指定开始循环位置和结束循环位置.例如 从集合第二个元素开始迭代: <c:forEach items="${userInfo.roleTypeE

html中常用的标签小结

内容详细标签: <h1>~<h6>标题标签<pre>格式化文本<u>下划线(underline)<i>斜体字(italics)<cite>引用,通常为斜体<em>强调文本通常为斜体<strong>加重文本,通常为黑体<font>设置字体.字体大小.颜色等<big><small>字体变大和字体变小<del>加删除线<code>程序码<kbd>

前端标签小结(不断更新中......)

框架 <html> <head> <title></title> </head> <body></body> </html> mate系列 <meta name="keywords" content="关键词3-5个 "/><!----> <meta name="description" content="描述1

【JS】&lt;select&gt;标签小结

循环时通过<c:if>来判断是否为默认选中 1 <select name="select" id="month"> 2 <c:forEach var="month" begin="1" end="12"> 3 <option value="${month}" <c:if test="${monthi == month}"

HTML学习小结

HTML常用标签小结: 常用: <h1>~<h6> 标题由大到小 <p></p>段落标签 <hr/>画水平线标签 <sub>下标标签: H<sub>2</sub>o ->H2o  <sup>上标标签:2<sup>16</sup> -> <pre></pre>原样标签 <ol type=a>   有序列表标签 <li>

嵌套移动APP端的H5页面meta标签

嵌套移动APP端的H5页面meta标签小结: <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="apple-mobile-web-app-capable" con

django学习笔记(二)模板

1.当模板中的变量名遇到点时,以下面的顺序查找(短路逻辑): (1)字典类型查找: >>> from django.template import Template, Context >>> person = {'name': 'Sally', 'age': '43'} >>> t = Template('{{ person.name }} is {{ person.age }} years old.') >>> c = Contex