html_基础标签
块级标签： 默认情况会占位一整行
行内(内联)标签：默认只有自己的大小
块级标签如： <div>我是字</div>
<h1>标题1</h1>
<p>段落</p>
行内标签如： <a>我是一串字</a>
<span> 我也是字</span>
<lable></lable> ; <input /> ; <form></form> ; <img />
标签的包含：默认子标签所有内容在父标签里面
部分基础标签：
<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 : 对文本 进行操作 就可以操作 文本所对应的文本框或者单选框
<label for="对应id名">啦啦</label>
<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 type="text" value="123"/>
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 ...
随机推荐
- Nginx-Tomcat搭建负载均衡（转载）
一. 工具 nginx-1.8.0 apache-tomcat-6.0.33 二. 目标 实现高性能负载均衡的Tomcat集群: 三. 步骤 1.首先下载Nginx,要下载稳定版: 2 ...
- 配置启动MySQL的Docker容器
docker run -d -p : --name mysql -e MYSQL_ROOT_PASSWORD= mysql:
- TP5.x——多数据库连接查询
前言 需要到不同的数据库获取不同的表,看了下文档发现有这类方法,就记录下 文档 https://www.kancloud.cn/manual/thinkphp5_1/353998 步骤 配置文件 re ...
- laravel 图片验证码
今天看见一个网站登录页面有个图片验证码,想想自己以前好像真没弄过这个玩意,正好现在有时间,准备用laravel来弄个图片验证码出来,不多BB,直接上代码 1.直接使用别人封装好的,composer下载 ...
- 20175221 《Java程序设计》第5周学习总结
20175221 <Java程序设计>第5周学习总结 教材学习内容总结 接口的定义 接口声明:interface 接口名 接口体中只可以有常量,而没有变量 接口体中只有抽象方法(可省略 ...
- NOI-OJ 2.2 ID:8758 2的幂次方表示
思路 可以把任意一个数转化为2^a+2^b+2^c+...+2^n 例如137的二进制为10001001,这就等效于2^7+2^3+2^0 以上结果如何通过程序循环处理呢?需要把数字n分解为上述公式, ...
- ios打包 上架 了解
苹果开发者中心 https://developer.apple.com/account 上架收费相关了解 https://www.jianshu.com/p/681f00a561ca ios打包 上 ...
- js 数字前自动补零
num为传入的数字,n为需要的字符长度 return (Array(n).join(0) + num).slice(-n); 例如 我想返回两位数 输入6 然后返回06 就可以这样写: return ...
- 高并发秒杀系统--Service接口设计与实现
[DAO编写之后的总结] DAO层 --> 接口设计 + SQL编写 DAO拼接等逻辑 --> 统一在Service层完成 [Service层的接口设计] 1.接口 ...
- redux知识点
1.关于传参 点击跳转 两种 动态路由 url 但是取值需要自己处理 关于动态跳转(js执行跳转) 关于异步加载组件 创建loadable app.js中 在 要加载的异步组件中 (这样接收参数不 ...