body里面分为两类标签：块级标签和内联标签。

1、块级标签：<p><h1><table><ol><ul><form><div>

2、内联标签：<a><input><img><sub><sup><textarea><span>

块级标签元素的特点
　　① 总是在新行上开始；
　　② 高度，行高以及外边距和内边距都可控制；
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。
　　④ 它可以容纳内联元素和其他块元素

内联标签元素的特点
　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下 
　　设置宽度width 无效。
　　设置高度height 无效，可以通过line-height来设置。
　　设置margin 只有左右margin有效，上下无效。
　　设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

1、基本标签

　　<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

　　<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

　　<b> <strong>: 加粗标签.

　　<strike>: 为文字加上一条中线.

　　<em>: 文字变成斜体.

　　<sup>和<sub>: 上角标 和 下角表.

　　<br>:换行.

　　<hr>:水平线

　　<div><span>

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="refresh" content="2">

     <meta name="keywords" content="前端,html,网页">

     <title>这是做的第一个网页</title>

 </head>

 <body>

 <h1>yusheng_liang</h1>

 <h2>yusheng_liang</h2>

 <h3>yusheng_liang</h3>

 <h4>yusheng_liang</h4>

 <h5>yusheng_liang</h5>

 <h6>yusheng_liang</h6>

 <hr>

 <p>这是第一个段落</p>

 <p>这是第二个段落</p>

 <hr>

 <b>文本字体加粗方法一</b>

 <br>

 <strong>文本字体加粗方法二</strong>

 <hr>

 <p>商品原价：<strike>100</strike>商品活动价：50</p>

 <hr>

 <em>我是一个斜体字标签</em>

 <hr>

 <p>2<sup>3</sup>我是一个上角标</p>

 <p>O<sub>2</sub>我是一个下角标</p>

 <hr>

 我是一个大于号：&lt;

 我是一个小于号：&gt;

 我是一个空格：&nbsp;

 </body>

 </html>

结果图示：

2、图形标签<img>

　　src: 要显示图片的路径.

　　alt: 图片没有加载成功时的提示.

　　title: 鼠标悬浮时的提示信息.

　　width: 图片的宽

　　height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<img src="http.png" height="283px" width="531px" title="模拟http请求">

图示：

3、<a>标签：

3.1、超链接标签：

　　href:要连接的资源路径 格式如下: href="http://www.baidu.com"

　　target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

　　name: 定义一个页面的书签.

　　用于跳转 href : #书签名称.

<a href="http://www.baidu.com" target="_blank">百度一下</a>

3.2、锚标签：常用于从网页底部快速回到顶部设置

本页标签跳转，通过定义ID来进行查找到内容

<a href="#a">李白</a>

<div id="a" style="background-color: #197991">床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</div>

4、列表标签：

　　<ul>: 无序列表

　　<ol>:有序列表

　　   <li>:列表中的每一项.

　　<dl> 定义列表

　　   <dt> 列表标题

　　<dd> 列表项

 <p>无序列表：</p>

 <ul>

     <li>无序一</li>

     <li>无序二</li>

     <li>无序三</li>

     <li>无序四</li>

 </ul>

 <hr>

 <p>有序列表：</p>

 <ol>

     <li>有序一</li>

     <li>有序二</li>

     <li>有序三</li>

     <li>有序四</li>

 </ol>

 <hr>

 <p>定义列表:</p>

 <dl>

     <dt>湖南省</dt>

     <dd>长沙</dd>

     <dd>衡阳</dd>

     <dd>张家界</dd>

     <dt>广东省</dt>

     <dd>广州</dd>

     <dd>东莞</dd>

     <dd>深圳</dd>

 </dl>

图示：

5、表格标签: <table>:

　　border: 表格边框.

　　cellpadding: 内边距

　　cellspacing: 外边距.

　　width: 像素 百分比.（最好通过css来设置长宽）

　　<tr>: table row

　　    <th>: table head cell

　　<td>: table data cell

　　rowspan: 单元格竖跨多少行

　　colspan:  单元格横跨多少列（即合并单元格）

　　<th>: table header <tbody>(不常用): 为表格进行分区.

 <table border="1" cellspacing="1" cellpadding="1" style="width: 500px">

     <thead>

         <tr>

             <td>学号</td>

             <td>姓名</td>

             <td>成绩</td>

             <td>备注</td>

         </tr>

     </thead>

     <tbody>

         <tr>

             <td>001</td>

             <td>小梁</td>

             <td colspan="2">70，列合并</td>

         </tr>

         <tr>

             <td>002</td>

             <td>张三</td>

             <td>66</td>

             <td rowspan="2">行合并</td>

         </tr>

         <tr>

             <td>003</td>

             <td>李四</td>

             <td>88</td>

         </tr>

     </tbody>

 </table>

图示：

6、表单标签（django）<form>:

表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

6.1、表单属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

　　action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web　　

　　method: 表单的提交方式 post/get 默认取值 就是 get（信封）

　　get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

　　post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

　　get/post是常见的两种请求方式.

6.2、表单元素

<input>     type:     text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框

submit 提交按钮

button 按钮(需要配合js使用.) button和submit的区别？

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>form表单实操</title>

</head>

<body>

    <form action="" enctype="multipart/form-data">

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

        <p>密&nbsp;&nbsp;码：<input name="pwd" type="password"></p>

        <p>性别：<input type="radio" name="sex" value="1">男&nbsp;&nbsp;<input type="radio" name="sex" value="2">女</p>

        <p>爱好：</p>

        <p>游泳<input type="checkbox" name="hobby" value="1"></p>

        <p>学习<input type="checkbox" name="hobby" value="2"></p>

        <p>篮球<input type="checkbox" name="hobby" value="3"></p>

        <p>学习的编程语言：

        <select name="lanuage">

            <option>--请选择--</option>

            <option value="1">python</option>

            <option value="2">java</option>

            <option value="3">c#</option>

        </select></p>

        <p>个人相片：<input type="file" name="file_name"></p>

        <p>自我简介：</p>

        <p><textarea></textarea></p>

        <P><input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"></P>

    </form>

</body>

</html>

图示：

html--前端基本标签内容讲解的更多相关文章

  1. head标签详细讲解

    head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...

  2. 从零宽断言说起到用python匹配html标签内容

    版权声明:本文为博主原创文章,转载请附带原文网址http://www.cnblogs.com/wbchanblog/p/7411750.html ,谢谢! 提示:本文主要是讲解零宽断言,所以阅读本文需 ...

  3. 如何在java注解中加入原生html标签内容

    你是否也遇到过类似的事情.想在java注解加入类似于下面这种注释: 结果出来却变成了这样 ,标签被解析了, 这怎么办呢 : 且看分解 我们在注解中直接放入下边这样的代码: <Response&g ...

  4. 前端c标签foreach传值给后台

    前端c标签foreach传值给后台 <div style="margin-bottom: 10px"> <c:forEach items="${good ...

  5. 前端 HTML标签介绍

    那什么是HTML标签呢? 1. 在HTML中规定标签使用英文的的尖括号即"<"和">"包起来,如`<html>`.`<p>` ...

  6. 前端必学内容：webpack3快速入门 1-23节内容参考

    前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...

  7. 点击事件获得li标签内容

    通过点击事件获得li标签内容 Table of contents 随笔 随笔 <li onclick="liClick(this)">数据</li> //点 ...

  8. JavaScript和jQuery改变标签内容

    HTML: <div id="mazey">content</div> JavaScript: var mazey=document.getElementB ...

  9. thinkphp内置标签简单讲解

    thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...

随机推荐

  1. Elasticsearch由浅入深（十）搜索引擎：相关度评分 TF&IDF算法、doc value正排索引、解密query、fetch phrase原理、Bouncing Results问题、基于scoll技术滚动搜索大量数据

    相关度评分 TF&IDF算法 Elasticsearch的相关度评分(relevance score)算法采用的是term frequency/inverse document frequen ...

  2. OIDC-Open ID Connect

    OpenID Connect的简称,OIDC=(Identity, Authentication) + OAuth 2.0.它在OAuth2上构建了一个身份层,是一个基于OAuth2协议的身份认证标准 ...

  3. springcloud(五,多个服务注册中心eureka)

    spring cloud (一.服务注册demo_eureka) spring cloud (二.服务注册安全demo_eureka) spring cloud (三.服务提供者demo_provid ...

  4. Redis（二）特性和学习路线

    Redis是高效的内存数据库或者说缓存.对多种数据结构都支持,每种数据结构都有相应的应用场景. 特性 Redis支持非常多的特性,从用途.性能.高可用.数据安全方面都提供了相应的支持和保障. Redi ...

  5. table布局 常见问题总结

    table实用属性: 属性 值 作用 描述 table-layout auto 自动计算列宽 对table和td.th指定的宽度无效 浏览器会计算所有单元格的内容宽度才能得出一列宽度 (默认值) fi ...

  6. spring boot 连接 Oracle 的 application的简单配置

    server.port=8090 //Tomcat服务端口号spring.datasource.driver-class-name= oracle.jdbc.driver.OracleDriver / ...

  7. SharpImage图像特效和合成类库介绍

    SharpImage是用于.NET(C#.VB)的专业图像特效以及图像合成类库.借助它,您可以快速实现Photoshop滤镜效果以及图层合成. 1.内置50+种图像特效滤镜.(如亮度.对比度.负片.图 ...

  8. Vuex实现状态管理

    Vuex使用总结 1 Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,Vuex抽取了各个组件的共享部分,以全局单例模式进行状态的管理.在原生vue中各个组件之间传值使用的 ...

  9. ES6的常见语法！！

    let : 声明变量 不存在变量提前 拥有局部作用域 (只要有{}出现 则只在该{}范围内生效) (而var只在函数内会产生作用域范围) 不能重复声明 const : 声明常量(常量名从规范上来将 最 ...

  10. HTML Web Workers

    Web worker 是运行在后台的 JavaScript,不会影响页面的性能. 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成. Web work ...