<!-- 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 在下方--> 5<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基本标签介绍及应用
猜你喜欢
转载自www.cnblogs.com/Mr-wangxd/p/9655654.html
今日推荐
周排行