HTML标记元素整理

最新推荐文章于 2022-11-30 18:49:32 发布

甜甜圈Zoe

最新推荐文章于 2022-11-30 18:49:32 发布

阅读量396

点赞数

分类专栏： Html 文章标签： Html

本文链接：https://blog.csdn.net/qq_42305945/article/details/86191191

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//html最初是一种排版言语，是用来表达是什么，不用来表达样式格式

//告诉浏览器html遵循哪个规范 html5只写html

<html> //标记html页面的开始

    <head> //配置、选项、代码（不是正文，是html源代码的头）
        <title>标题</title>
        <meta charset=utf-8> //通常设置字符编码为utf-8
    </head>
    <frameset cols="25%,*,25%">
      <frame src="frame_a.htm">
      <frame src="frame_b.htm">
      <frame src="frame_c.htm">
      <noframes>
        <body>
          <p>对不起，您的浏览器不支持“框架”！</p>
        </body>
      </noframes>
    </frameset> //框架标记

    <body> //正文的开始

段落样式：

    <hgroup>
    <h1> 章节标题1 </h1> //第一级标题，级数越大，字体越小，而且单独成行
    <h2> 章节标题2 </h2>
    </hgroup> //用来告诉浏览器这里放连续两个标题
    <br> 或者<br />//用来分行，没有结束的标志
    <wbr>英文词</wbr> //指定这个单词需要的话可以分行
    <p> //用来表明自然段的开始
     一个自然段
    </p>

字体样式：（html 5中遗留下的表示格式的符号）

    <b>词</b> //加粗
    <i>词</i> //斜体
    <tt>词</tt> //等宽的西方字体
    <small>词</small> //把字体变小
    <del>原词</del><ins>替换词</ins> //用后面的词替换前面的词
    <s>词</s> //表示过时的词
    a<sup>2</sup>+b<sub>0</sub> //上标和下标:a^2+b0
    <mark>词</mark> //用来标亮或高亮字体

短语格式：（在内容中表达一种意思）

    <em> </em> //强调
    <strong> </strong> //着重
    <dfn> </dfn> //定义
    <code>代码</code> //表示代码，但不是大段源代码
    <samp>例子代码</samp> //表示例子代码
    <kbd>用户输入</kbd> //表明这是用户输入的
    <var>变量</var> //表明变量
    <cite>引用</cite> //表明引用

特殊格式：

    <address> //表明地址，被浏览器认识，可以被检索
    <blockquote> //使之间的文字缩进而且可以嵌套
    地址或多行地址
    </blockquote>
    <q> </q> //一种小引用
    <pre> </pre> //预格式化的，写在html里是什么样的，显示在浏览器上就什么样
    </address>

属性：

    <hr> //分割线
    <hr width=50%> //水平线宽度变为50%
    <hr width=50> //水平线变为50个像素点
    <hr width=50% align=left size=10> //宽度靠左边变为50%,水平线变粗10个像素点
    <abbr title="中华人民共和国">PRC</abbr> //将PRC缩写，鼠标放到PRC上有“中华人民共和国”的浮云
    <bdo dir=rtl>一句话</bdo> //将文字倒序，使其从右向左排
    <bdi> </bdi> //使倒序的文字再次正序过来
    a&lt;2 //小于
    2&gt;1 //大于
    &amp; //&
    &nbsp; //不可打断的空格
    L&uuml; //Lü
    L&Uuml; //大写的ü

列表：

 <ul> //用小黑点标示的列表
    <li> <li> //表示列表的每一项目
 </ul>
 <ol start=2> </ol> //用1234标示的列表,从2开始递增
 <dl> //字典的列表
    <dt>词条</dt>
    <dd>对词条的解释说明</dd>
 </dl>

图片：（在html中被当做一种字符）

 <img>或<img />
 <img src="mama.jpg" alt="mama" width=50%或200 height=200/> //图片加载不出来用alt来替换,通用的图片格式：jpg\gif\png，src后放图片地址
 <iframe src="http://news.163.com"></iframe> //与img类似，把东西从另一处取过来，插入一个小窗口

链接：

    <a href="http://news.163.com或者当前目录下的html">网易新闻</a> //超链接
    <a href="#">链接文字</a> 空链接
    <a href="//www.w3cschool.cn/" target="_blank">Visit W3CSchool!</a> 默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。
    <p id="here"> //给段落取名
    <a href="#here或you.html#here">网易新闻</a> //目的地可以是一个段落
    <a href="http://news.163.com target=_blank">网易新闻</a> //打开一个新的窗口来看链接
    <img src="mama.jpg" width=100 height=100 usemap="#map" /> //在这张图片上建立张地图
    <map name="map">
      <area shape="rect" coords="0,0,50,50" href="http://news.163.com" alt="news" /> //矩形 左上角坐标为（0,0）
      <area shape="rect" coords="75,75,25" href="http://news.163.com" alt="home" /> //圆
    </map>

表格：

<table border="1"> //有border="1"就有格子线
   <caption>表格名称<caption>
   <tr> //为一行
      <th>表头</th>
   </tr>
   <tr> //为一行
      <td colspan="3">格子</td> 列
   </tr>
   <thead> </thead> //指明表的头
   <tbody> </tbody> //指明中间内容
   <tfoot> </tfoot> //指明脚注
</table>

表单：

<form    method="post/get"   action="save.php">
    <label for="username">用户名:</label>
    <input type="text" name="username" />
    <label for="pass">密码:</label>
    <input type="password" name="pass" />
</form>

文本域：

<textarea  rows="行数" cols="列数">文本</textarea>

划分区块：

   <div id="版块名称">  </div>

单选框、复选框：

  <form>
    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/> 当type="radio"时，控件为单选框 当 type="checkbox" 时，控件为复选框
  </form>                                                                          当设置 checked="checked" 时，该选项被默认选中
                                                                                     同一组的单选按钮，name 取值一定要一致

下拉框：

<form action="save.php" method="post" >
    
       <label>爱好:</label>
    
       <select multiple="multiple">
      
           <option value="看书"  selected="selected">看书</option>
 value向服务器提交的值
           <option value="旅游">旅游</option>

       </select>

</form>

按钮：

<input   type="submit"   value="提交">value：按钮上显示的文字
<input   type="reset" value="重置">

标签：

<label for="控件id名称">标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
</body> //body的结束
</html> //标记html页面的结束

甜甜圈Zoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标记元素整理

//html最初是一种排版言语，是用来表达是什么，不用来表达样式格式 //告诉浏览器html遵循哪个规范 html5只写html&amp;amp;lt;html&amp;amp;gt; //标记html页面的开始 &amp;amp;lt;head&amp;amp;gt; //配置、选项、代码（不是正文，是html源代码的头） &amp;amp;lt;title&amp;amp;gt;标题&amp;amp;lt;/t
复制链接

扫一扫