<!--
html标签 特征:
1.空白折叠现象
2.对空格和换行不敏感
3.标签要严格封闭
p标签的嵌套 多注意!!!!!!
html中:
1.行内标签(不换行)
(1)在一行内显示 span strong em i del a
(2)不能设置宽高 默认的宽和高 是内容填充
1.1 行内块标签 img input
(1) 在一行内显示
(2) 可以设置宽高
2.块级标签 div p h1~h6
(1)独占一行
(2)可以设置宽高,如果不设置宽和高,默认的宽是父亲的100%。高度是内容的高度
(3)p标签不能装容器级的标签可以装的标签: strong em i u del a span img不可以装的标签:h1~h6 div p
三种定义样式的方法:
1 style外部定义
2 外部css定义
3 行内定义 如:<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p> --> <!DOCTYPE html>
<html lang="en">
<head>
<!--网站配置-->
<meta charset="UTF-8"> <!--收索网站 未点开时显示内容-->
<meta name="Keywords" content="未点开时显示内容 梗概" /> <!--网页标题-->
<title>王晓东真帅</title> <!--移动端优先 视口设置-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--设置 网页图标-->
<link rel="shortcut icon" href="E:\面授\python\视频_学习\day36 html\课上代码\day36\fd039245.jpg">
<!--css的作用修饰标签 静态资源 link 语法-->
<link rel="stylesheet" href="./index.css"> <!--匹配body中 所有h2格式的 内容 此处设置颜色为蓝色-->
<!--在 style 标签直接写就行 .代表class #代表id 可以单独设置属性-->
<style type="text/css">
h2{
color : blue;
}
span{
color: red;
}
<!--这个.表示class-->
.123{
color:red
}
#top{
color:gray
}
</style> </head> <body>
<!--span方法修饰 与del-->
<h3><span>9.9元</span> <del>79</del></h3>
<!--当div中还有成员的时候设置一个id-->
<div id="top">
<!--在内存的div设置一个类-->
<div class="top-1">左边区域</div>
<div class="shoping_car">购物<span>车</span></div>
</div> <!--h1~ h6 六种字体标签-->
此处为空白字 无特殊格式
<h1><span class="123">大胖子</span></h1>
<h2>蓝胖子</h2>
<!--分隔线hr 单闭合标签-->
<hr />
<h3>h3号字</h3>
<h4>死胖子</h4>
<!--以下方法没有换行-->
<!--underline 给文本设置下划线-->
<u>下划线</u>
<!--斜体 两种方法 em i-->
<i>斜体i</i>
<em>斜体em</em>
<!--2在5的上方看起来像 平方 sub 在下方--><sup>2</sup>
<!--p标签不能装容器级的标签
可以装的标签: strong em i u del a span img
不可以装的标签:h1~h6 div p
-->
<p>
<strong>pppp加粗</strong>
<span>p中的span</span>
</p>
<!--超链接标签a #号叫做锚点:锚点作用是点击不跳转其他页面一般用于调试 或者跳回网页顶端或者低端-->
<p>
<a href="#" id="anchor" class="anchor" title="百度云">设置锚点点击一下</a>
</p>
<div>
<a href="https://www.baidu.com/" id="111" class="111">a标签链接——点击一下</a>
</div>
<!--图片链接-->
<!--img标签为单标签 src:图片路径 alt:当找不到图片或图片错误无法显示的时候会显示alt中的内容 -->
<!--width:设置图片宽 height:设置图片高 图片都是自动按大小缩放,所以宽高尽量只设置一个 -->
<img src="http://pic.58pic.com/58pic/13/86/02/97958PICtWN_1024.jpg" alt="网络图片加载失败显示内容" height="300" > <!--form 标签:带有两个输入字段和一个提交按钮的 HTML 表单 type:表示类型如文本、按钮 name:用作外部io操作 value:默认值一般不写 -->
<form action="https://www.baidu.com/s">
<input type="text" name="pwd" value="12306">
<input type="submit" value="搜索">
</form> </body>
</html>

html基本标签介绍及应用的更多相关文章

  1. java web学习总结(二十七) -------------------JSP标签介绍

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. 一、JSP标签介绍,自定义标签

    一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...

  4. 前端入门html(标签介绍)

    day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html # web本质 示例 import socket sk = socket.socke ...

  5. 3-[HTML]-head标签介绍

    1.head标签 我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题.编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动 ...

  6. WEB学习-基础知识:列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

    列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...

  7. noscript 标签介绍

    noscript 标签介绍 一.总结 一句话总结: noscript 标签在不支持JavaScript 的浏览器中显示替代的内容. 1.noscript标签使用实例? html标签直接放在noscri ...

  8. template标签介绍和使用

    template标签介绍和使用 1.介绍:template标签是html5新出来的标签,具有3个特点,(1)随意性:可以写在页面中的任何地方.(2)不可见性:它里面的元素都是不可见的.(3)页面也不会 ...

  9. 2、Spring的IOC标签介绍以及实例

    一.Spring_ioc配置文件bean标签介绍 1. bean标签 名称:bean 类型:标签 归属:beans标签 作用:定义spring中的资源,受此标签定义的资源将受到spring控制 格式: ...

  10. html 不常用标签介绍

    文本元素 <wbr> 如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机).英 ...

随机推荐

  1. SpringBoot 获取前端页面参数的集中方式总结

    SpringBoot的一个好处就是通过注解可以轻松获取前端页面的参数,之后尅将参数经过一系列处理传送到后台数据库,前端时间正好用到.大致分为一下几种: 1.指定前端URL请求参数名称与方法名称一致,这 ...

  2. 重写(Override)

    重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即外壳不变,核心重写! 重写的好处在于子类可以根据需要,定义特定于自己的行为. 也就是说子类 ...

  3. SQLServer2008设置开启远程连接

    SQL Server 2008默认是不允许远程连接的,sa帐户默认禁用的,如果想要在本地用SSMS连接远程服务器上的SQL Server 2008,需要做两个部分的配置:    1,SQL Serve ...

  4. 59、常规控件(2)TextInputLayout-让EditText提示更加人性化

    提示语用在显示. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" andro ...

  5. Spinner --- 功能和用法

    第一种方法: 使用Spinner时需要配置选项的资源文件,资源文件为一个string类型的数组 在res下的values文件夹下新建一个xml文件 内容为: <?xml version=&quo ...

  6. SqlBulkCopy 通过泛型数组批量插入

    public void SqlBulkCopy<T>(string tablename, List<T> list) { Type recordType = typeof(T) ...

  7. MVC 发布程序 HTTP 错误 403.14 - Forbidden 及 HTTP 错误 404.2 - Not Found

    新建立的MVC项目发布程序后会浏览网站可能会有问题 这时不要去按照系统提示打开“目录浏览”,而是应该去做一些配置 具体步骤: 1:配置web.Config <system.webServer&g ...

  8. iOS 导航栏rgb值与设置的有差异

    转:http://b2cloud.com.au/how-to-guides/bar-color-calculator-for-ios7-and-ios8/ 计算:http://htmlpreview. ...

  9. 支付宝app支付提示 系统繁忙,请稍后重试

    v2版本的支付宝支付,无论怎么调试返回的都是系统繁忙,请稍后重试提示.经过对给的示例代码的仔细研究,最后发现是由于老版本的sign_type 不加入签名计算,而新版本的支付签名它是加入签名计算的.供大 ...

  10. k8s更新Pod镜像

    实际使用k8s中,如果使用RC启动pod可以直接使用滚动更新进行pod版本的升级,但是我们使用的情况是在pod里面启动有状态的mysql服务,没有和RC进行关联,这样更新的时候只能通过 更新pod的配 ...