美文网首页web前端
html学习汇总-前端首剑客

html学习汇总-前端首剑客

作者: 宇晨棒棒的 | 来源:发表于2020-05-26 10:26 被阅读0次

    1.标题的语法:  <h1>标题内容<h1>

    注意:

    1.h1,h2h3,h4,h5,h6代表的是标题的字体的大小,标题是黑色字体加粗, 

    2.h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推

    3. 浏览器会自动地在标题的前后添加空行

    2.水平分隔线语法:<hr>

    3.注释语法:  <!-- 这是一个注释 -->

    4.段落语法:<p>段落内容</p>

    注意:

    当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格

    5.换行符语法:<br>(HTML写法)   <br/>(xml写法)   <br />(带有空格-----XHTML为兼容HTML的写法,也是XML写法)

    6.文本格式化标签

    定义粗体文本语法:  <b>粗体文本</b>   或者   <strong>加粗文本</strong>

    定义着重文字或者斜体字语法:<i>斜体字体 </i>  或者 <em>斜体字体 </em>

    定义小号字语法:<small>小号字体</small>

    定义大号字语法:<big> 大号字体</big>

    定义下标字语法:<sub>下标字</sub>

    定义上标字语法:<sup> 上标字</sup>

    定义插入字语法:<ins> 插入字体</ins>

    定义删除字语法: <del>删除字体</del>

    6-1.补充格式化输出------计算机标签

    定义计算机代码语法:   <code>代码语法</code>

    定义键盘码语法:<kbd>键盘输入</kbd>

    定义计算机代码样本语法:<samp>计算机样本</samp>

    定义变量语法:<var>变量</var>

    定义预格式文本:<pre>预处理文字显示多余空格和空行</pre>

    6-2.补充格式化输出------引文, 引用, 及标签定义

    定义缩写语法:<abbr title="World Health Organization">WHO</abbr>,表示一个缩写词或者首字母缩略词

    定义地址语法:<address>china,beijing,haidian</address>

    注意:

    <address> 标签定义文档作者/所有者的联系信息。

    如果 <address> 元素位于 <body> 元素内部,则它表示该文档作者/所有者的联系信息。

    如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者/所有者的联系信息。

    元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。

    定义文字方向语法:<bdo dir="rtl">该段落文字从右到左显示。</bdo>

                                    <bdo dir="ltr">该段落文字从左到右显示。</bdo>

    定义长的引用语法:<blockquote>定义摘自另一个源的块引用</blockquote>

    注意:<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进

    定义短的引用语:<q>短的引用语</q>,浏览器经常会在这种引用的周围插入引号

    定义引用、引证:<cite>作品标题</cite>定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题

    7.超链接语法:<a href="网站地址或者是文件地址"  target=“新窗口打开方式”>链接的名称</a>

    <a href="#指定标签名">链接到指定标签</a>

    新窗口打开方式:_blank(新窗口中打开)  _self(在同一个窗口中打开) _parent(在上一级窗口中打开)

    _top(在浏览器的整个窗口打开)

    8.head标签内使用的元素:

    定义了文档的标题语法:<title>标题</title>

    定义了HTML文档中的元数据语法:<meta  charset="utf-8" >  (指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据)

    定义了页面链接标签的默认链接地址:<base  href="网站地址或者是文件地址"  target=“新窗口打开方式”>

    定义了一个文档和外部资源之间的关系:<link>

    定义了HTML文档的样式文件:<style>样式</style>

    9.img标签语法 :<img src='图片地址' height="图片高度" width="图片宽度" border='图片边框像素'  hspace="图片间水平间距像素" vspace="垂直间距" align="相对文字的对齐方式" alt="图片无法显示时候图片文字说明">

    相对文字的对齐方式

    补充:热点区域

    <img src="图片地址" usemap="#映像图片名称">

    <map name="映像图片名称"><area shape="热区形状" coords=”热区坐标“  href="链接地址"/></map>

    热区形状:rect(矩形)circle(圆形)poly(多边形)

    10.列表标签

    有序列表语法:<ol type="有序类型"><li>列表内容</li><li>列表内容2</li><ol>

    无序列表语法:<ul><li type="disc">列表内容</li><li type="circle">列表内容2</li><li type="square">列表内容3</li></ul>

    自定义列表语法:<dl><td>列表内容</td><dd>解释</dd></dl>

    列表嵌套使用

    11.表格标签

    表格标签

    补充:

    cellspacing:表格内部各个单元格之间的宽度,单位像素

    cellpadding:默认表格文字紧贴表格边框,文字与边框之间的距离,单位像素

    colspan:单元格水平合并

    rowspan:列合并

    valign:垂直对齐方式,top,bottom,middle

    thead:表头标记,tbody:表主体标记,tfoot:表尾标记------>可在这三个标记中统一设置格式

    12.div 和 span介绍

    <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

    <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

    如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

    <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

    HTML <span> 元素是内联元素,可用作文本的容器

    <span> 元素也没有特定的含义。内联元素在显示时通常不会以新行开始

    当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性

    13.在浏览器中嵌套网页

    <iframe src="ceshi.html" name="iframe-ceshi" align="right"

            width="500" height="200" scrolling="auto"

            frameborder="1" marginwidth="100" marginheight="100">

    </iframe>

    属性说明:

    src:嵌套网页源地址,width和height嵌套网页的宽和高

    scrolling:是否存在滚动条,auto根据内容而定,yes显示滚动条,no不显示滚动条

    frameborder:是否存在边框,1存在0不存在

     marginwidth和marginheight:网页内容距边框的宽度和高度(不是浏览器边框)

    13.表单

    表单

    补充知识:

    enctype:编码方式(test/plain---->以纯文本形式传送,application/x-www-form-urlencoded--->默认的编码形式,multipart/form-data---->MINE编码,上传文件的表单必须选择项)  

    multiple(下拉菜单的属性):列表中项目多选

    14.文字滚动

    <marquee direction="down" loop="5">向下滚动</marquee>

    <marquee direction="up">向上滚动</marquee>

    <marquee behavior="scoll" scrolldelay="100">你好-从右往左-循环</marquee>

    <marquee behavior="slide">你好-从右往左-循环一次</marquee>

    <marquee behavior="alternate" scrollmount="10">你好-从右往左-来回交替</marquee>

    补充:loop 滚动次数   scrolldelay:延迟时间  scrollmount:加速时间

    未完待续

    相关文章

      网友评论

        本文标题:html学习汇总-前端首剑客

        本文链接:https://www.haomeiwen.com/subject/xgtmdhtx.html