html_基础标签

块级标签：默认情况会占位一整行
行内(内联)标签：默认只有自己的大小

块级标签如：　　<div>我是字</div>
　　　　　　　　<h1>标题1</h1>
　　　　　　　　 <p>段落</p>

行内标签如：　　<a>我是一串字</a>

标签的包含：默认子标签所有内容在父标签里面

部分基础标签：

<html>

　　<head>

　　<title> </title>

　　</head>

　　<body>

　　　　<div> div：只是把这一行占满，里面写什么就是什么，默认为块级标签可以通过css样式把块级标签变为内联标签</div>

　　　　<span> span：和div 没有什么区别</span>

　　　　<div style="width:200px;border:1px solid red; word-break: break-all;">

　　　　<p> word-break:break-all :表示默认超出红框的字符自动换行xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

　　　　</div>

　　　　 <!--a 标签中 target 和 href 是a标签特有的-->

　　　　<a href="www.baidu.com" target="_blank">百度</a> <!-- 超链接; _blank:打开新的窗口-->

　　　　<a href="s2.html" target="_blank">s2网页</a> <!--跳转到s2.html页面-->

　　　　<a href="#tt">锚点</a> <!--锚点跳转到id为tt的标签-->

　　　　<div id="tt" style="height:500px;background-color:red;">第一章</div> <!--id不能被重复-->

　　　　<img title="当鼠标放在图片上图片上出现的字" src="图片的地址/图片名.jpg" style = "height:100px; width:100px;"/>

　　</body>

</html>

<br/> : 换行符

<hr/>: 分割线的符号

select标签：

<html>

<head>

        <title> </title>

</head>

<body>

    <select  size="2">  <!--下拉选项框：可提交到后台-->

    <option value="1"> <!--设置为 1 就代指“北京”使传到服务器上的值为1-->

    北京

    </option><!--选项框中的项-->

    <option value="1">

    上海

    </option><!--选项框中的项-->

    <option value="1" selected="selected">   <!--selected把广州设为默认-->

    广州

    </option><!--选项框中的项-->

    </select>

    <select size="2">框中项的个数</select>

    <select multiple="multiple">

        <optgroup label="河北省"><!--分的组不能选中-->

            <option>石家庄</option>

            <option>邯郸</option>

        </optgroup>

        <optgroup label="山西省">

            <option>太原</option>

            <option>平遥</option>

        </optgroup>

    </select>

    <select multiple="multiple">按住Ctrl可多选</select>

</body>

</html>

input系列标签：自闭合形式的标签

<html>

<head>

        <title> </title>

</head>

<body>

    <input type="checkbox" checked="checked"/><!--复选框:checked默认为选中状态-->

    <p>男<input name="1" type="radio"/></p><!--单选框：name相同才能是互斥的:例：性别-->

    <p>女<input name="1" type="radio"/></p>

    <input type="text" value="默认的文字"/><!--文本框-->

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

    <input type="button" value="button按钮上的文字"/>   <!--简单的按钮-->

    <input type="submit" value="submit按钮上的文字"/>   <!--提交表单的按钮-->

    <input type="file" value="选择上传文件的按钮"/>   <!--选择电脑上的文件-->

　　 <textarea>iii(默认数据)</textarea><!--多行文本框-->

</body>

</html>

submit按钮 / form表单提交：

<html>

    <head>

            <title> </title>

    </head>

    <body>

        <!--from 表单提交-->

        <form action="http://www.baidu.com"><!--提交到其他地方必须要用这个标签-->

        <input type="text">

        <input type="button" value="button提交"/>

        <input type="submit" value="submit提交"/><!--submit 才是提交到后台的按钮-->

        </form>

        <form action="http://www.baidu.com"><!--提交到其他地方必须要用这个标签-->

            <div>

                主机名：<input name="host" type="text"/>

            </div><!--name 用于服务器识别客户端传入的数据-->

            <div>

                端口：<input name="port" type="text"/>

            </div>

            <div>

                类型：<input name="type" type="text"/>

            </div>

            <div>

                用户：<input name="user" type="text"/>

            </div>

            <input type="button" value="button提交"/>

            <input type="submit" value="submit提交"/><!--submit 才是提交到后台-->

        </form>

    </body>

</html>

lable标签for属性对应的id : 对文本进行操作就可以操作文本所对应的文本框或者单选框

<html>

    <head>

        <title> </title>

    </head>

    <body>

        <label for="hh">例:点我点我</label>

        <input id="hh" type="textarea"/>

        <label for="xx">也点我也点我</label>

        <input id='xx' type='checkbox'/>

    </body>

</html>

列表：

<html>

    <head>

            <title> </title>

    </head>

    <body>

        <ul><!--前面是小黑点的列表形式--

            <li>1111</li>

            <li>111</li>

            <li>11</li>

            <li>1</li>

        </ul>

        <ol><!--前面是数字的列表形式-->

            <li>wwww</li>

            <li>www</li>

            <li>ww</li>

            <li>w</li>

        </ol>

        <dl>

            <dt>标题1</dt>

            <dd>内容1</dd>

            <dd>内容1</dd>

            <dt>标题2</dt>

            <dd>内容2</dd>

            <dd>内容2</dd>

        </dl>

    </body>

</html>

table标签(表格) : 其中，<thead></thead> <tbody></tbody> 可省略

<html>

    <head>

            <title> </title>

    </head>

    <body>

        <table border="1"><!--border 设置边框-->

            <thead><!--表头-->

                <tr><!--行-->

                    <th>第一列</th><!--列-->

                    <th>第二列</th>

                    <th>第三列</th>

                </tr>

            </thead>

            <tbody>

                <tr><!--行-->

                    <td colspan="2">111111</td><!--colspan 占两列的位置（横的）-->

                <!--    <td>111</td>  -->

                    <td>111</td>

                </tr>

                <tr><!--行-->

                    <td rowspan="2">222333</td><!--rowspan 占两行的位置（竖的）-->

                    <td>222</td>

                    <td>222</td>

                </tr>

                <tr><!--行-->

                <!--    <td>333</td>  -->

                    <td>333</td>

                    <td>333</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

fieldset 标签 : 在线框上插入文本

<html>

    <head>

            <title> </title>

    </head>

    <body>

    　　<fieldset>

       　　 <legend>我是框上的字</legend>

      　　  <p>用户名:<input type='text' value='请输入用户名'/></p>

      　　  <p>密   码:<input type='text' value='请输入密码'/></p>

   　　 </fieldset>

    </body>

</html>

属性总结：

　　公共属性：id ,name (一般只是提交数据的时候用)，style,class

　　私有属性：

　　　　input : text, password

　　　　input : button, submit
　　　　　　<input type="submit" value="sub">
　　　　　　<input type="checkbox" checked="checked"> : checked 表示默认为选中状态

　　　　input : radio 其中，name 的命名可作为选项互斥
　　　　　　<input name="1" type="radio" checked="checked"> : checked 表示默认为选中状态
　　　　　　<input name="1" type="radio">

　　　　form : action ,如果想要提交文件，需要在其所在form标签中特地添加enctype='multipart/form-data' method='POST'
　　　　　　<form action="提交到某一地址">要提交的所有标签</form>：
　　　　　　<form action="提交到某一地址" enctype='multipart/form-data' method='POST'>
　　　　　　　　<input type="text"/>
　　　　　　　　<input type="file"/>
　　　　　　</form>
　　　　注：textarea 要提交到后台也需要使用name属性


参考博客：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

其中，空格符为： 

html_基础标签的更多相关文章

HTML基础标签入门
HTML基础标签昨天学习了一些HTML的基本标签以及基本属性: HTML是一种超文本标记语言,其中PHP是世界上最好的语言(增加学习的动力荣誉感). HTML文档里包含三部分: <html&g ...
HTML常用基础标签
HTML常用基础标签带有语义的标签 <em> </em> 强调 <strong> </strong> 比em强调级别高 <abbr> &l ...
IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签
指引网页中的信息主要是以文本为主的,可以通过字体.大小.颜色.底纹.边框等来设置文本的属性.文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<body>标记 ...
HTML&CSS基础-标签的属性
HTML&CSS基础-标签的属性作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...
HTML基础标签图片文本超链接列表表格介绍
1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格 ...
HTML基础标签学习
HTML基础学习前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...
HTML基础标签
[HTML写法标签][HTML字体段落标签][锚点][有序无序列表][表格] 一.HTML写法标签:双标签:<标签名>内容</标签名>单标签:<标签名内容/> 二 ...
HTML基础-- 标签、表格
<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...
html基础标签-1-pre预格式标签
pre预格式标签 code,tt标签 1 <!doctype html> 2 <html lang='zh-cn'> 3 <head> 4 <meta cha ...

随机推荐

Android NDK(C++) 双进程守护
双进程守护如果从进程管理器观察会发现新浪微博.支付宝和QQ等都有两个以上相关进程,其中一个就是守护进程,由此可以猜到这些商业级的软件都采用了双进程守护的办法. 什么是双进程守护呢?顾名思义就是两个进程 ...
【XSY3147】子集计数 DFT 组合数学
题目大意给定一个集合 $\{1,2,\ldots,n\}$,要求你从中选出 $m$ 个数,且这 $m$ 个数的和是 $k$.问方案数 $\bmod 998244353$ \(0\ ...
【BZOJ5502】[GXOI/GZOI2019]与或和（单调栈）
[BZOJ5502][GXOI/GZOI2019]与或和(单调栈) 题面 BZOJ 洛谷题解看到位运算就直接拆位,于是问题变成了求有多少个全$0$子矩阵和有多少个全$1$子矩阵. 这两个操 ...
题解 AT2390 【Games on DAG】
题目大意给出一个n个点m条边的DAG,记为G. 可以删掉若干条边成为G′,显然有 2m 种不同的G′. 连边保证:若有 (xi →yi) 边,则 xi < yi . 初始点1和点2有一个标 ...
驱动调试(一)-printk
目录驱动调试(一)-printk 引入框架入口console_setup add_preferred_console register_console s3c24xx_serial_initco ...
python django(forms组件)
forms组件最大的作用,就是做数据校验. 普通做法,一个一个写校验规则,没有解耦.校验规则,都在视图函数里面. 网页校验修改urls.py,增加路径addbook from app01 impor ...
Django的admin视图的使用
要现在admin.py文件中将你要视图化操作的类进行注册: from django.contrib import admin from api import models # Register you ...
redis发布/订阅
发布订阅简介 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息,消息之间通过channel传递. 准备工作两台安装了redis的机器(虚拟 ...
jQuery AJAX 方法 success()后台传来的4种数据
JAVA中的四种JSON解析方式详解 jQuery AJAX 方法 success()后台传来的4种数据 1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper ...
[再寄小读者之数学篇](2014-06-23 积分不等式 [中国科学技术大学2013年高等数学B 考研试题])
设 $f(x)$ 在 $[a,b]$ 上一阶连续可导, $f(a)=0$. 证明: $$\bex \int_a^b f^2(x)\rd x\leq \cfrac{(b-a)^2}{2}\int_a^b ...

html_基础标签

html_基础标签的更多相关文章

随机推荐

热门专题