html 学习笔记----基本标签

时间：2022-11-18 08:04:10
标题：<h1></h1>    # h1---h6
段落：<p></p>
换行：<br/>
水平线：<hr/>
注释：<!--这是注释-->
             
 

文本格式：

字体：<font size='3' color='blue' face='verdana'> </font>

加粗：<b></b> 

倾斜：<em></em> or <i></i>

强调：<strong></strong> #默认是对字加粗

字体变大：<big></big>  字体变小：<small></small>

上标：<sup></sup> 下标：<sub></sub>

预格式文本：<pre></pre>  #保存了中间的空格和换行

文字缩写：<abbr></abbr>  or  <acronym></acronym> #鼠标知道出现，例子

                  <abbr titile="caokun"> CK </abbr>

引用： 长引用：<blockquote></blockquote> 

            短引用：<q></q>

删除字和下划线字：<del></del>   <ins></ins>

外部样式表：关联css文件

内部样式表：#嵌入html里的css代码

名字：class #classname的简称

样式：<style type="text/css"></style>

分区：<div></div>

组合行内元素：<span></span>

链接：<a href="http://www.w3school.com.cn" style="text-decoration:none">
           This is a link</a>
            #text-decoration:none：没有下划线

           锚：#本页链接到相应位置，源地址  1 

                                                       链接2        

          用图像作为链接：<a href="/example/html/lastpage.html">
                                       <img border="0" src="/i/eg_buttonnext.gif" />
                                       </a>

           在新窗口打开：target="_blank"    例如：
                                   <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

 

图片：< img src="C:\Documents and Settings\YukunCao\桌面\1.gif"

              width="300" 

              height="120"

              alt="Big Boat"   />

             替换文本 : 在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像   

表格：  显示格式不好，看链接

文本框：各个类型前后都要加<form></form>

                 用户：<input type="text" name="user">
                 密码：<input type="password" name="password">

                 单选框：

                <input type="radio" name="sex" value="male" /> Male                <br />                <input type="radio" name="sex" value="female" /> Female

                 复选框：             

                <input type="checkbox" name="bike" /> 
                I have a bike 
                <br /> 
<input type="checkbox" name="car" /> 
                I have a car

                  表单输入，获取值：链接底部

框架：

             水平：

                       <frameset rows="25%,50%,25%">

                             <frame src="/example/html/frame_a.html">
                             <frame src="/example/html/frame_b.html">

                       </frameset>

            垂直：

                       <frameset cols="25%,50%,25%">

                             <frame src="/example/html/frame_a.html">
                             <frame src="/example/html/frame_b.html">

                       </frameset>

            其它框架： 链接

            内联框架：iframe

                             <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>

                             <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.</a> </p>

                             <p>注释：由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

 背景：

            设置颜色：

                 <body bgcolor="#000000">                 <body bgcolor="rgb(0,0,0)">                 <body bgcolor="black">
      设置图片：
                 <body background="clouds.gif">                 <body background="http://www.w3school.com.cn/clouds.gif">

            提示：如果你打算使用背景图片，你需要紧记一下几点：

      • 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
      • 背景图像是否与页面中的其他图象搭配良好。
      • 背景图像是否与页面中的文字颜色搭配良好。
      • 图像在页面中平铺后，看上去还可以吗？
      • 对文字的注意力被背景图像喧宾夺主了吗？

颜色：颜色表

参考表：链接






标签：

相关文章