学习笔记201702十,HTML伍常用竹签及特种字符表

By admin in 4858美高梅 on 2019年4月4日

4858美高梅 1

HTML列表:

在html中,列表共分为三种:有类别表,严节列表和自定义列表

有系列表:有连串表中的各类列表都以有各样的。有类别表从<ol>先河,</ol>甘休。ol全写(ordered
list),li即(list)应合作ol一起行使,不可单独采用

平昔语法:

<ol>

       <li>有系列表</li>

</ol>

冬季列表:暗中同意情形下,列表符号是●  ,ul严节列表,全写(unordered 
list),用法跟有系列表壹样,只可以协作li使用。冬日列表是最常用的壹种列表.

学习笔记201702十,HTML伍常用竹签及特种字符表。概念列表:dl即(definition  list)定义列表,dt即(definition 
term)定义名词,dd即(definition 
description)定义描述。该语法中,<dl>  标记和
</dl>标记分别定义了定义列表的开端和得了;dt标签用于添加要诠释的名词;而dd标签用于添加该名词的求实表明。

语法:

<dl>

     <dt>HTML </dt>

     <dd>制作网页的正规语言,控制网页的构造</dd>

</dl>

冬辰列表

怎么着是列表标签

列表标签的功能
给一群数据添加列表语义,约等于告诉搜索引擎告诉浏览器这一群数据是二个完完全全

HTML 中列表标签的分类

  • 冬季列表(最多):unordered list
  • 有系列表(最少):ordered list
  • 概念列表(其次):definition list

冬天列表的功用

给一群数据添加列表语义,并且这一批数据中持有的数量都未曾先后之分

  • 怎么叫有条有理之分
    比如排名榜
  • 何以叫未有先后之分
    譬如说中中原人民共和国有何样城市

冬季列表的格式

<ul>
  <li>需要显示的条目内容
  </li>
</ul>

li 其实是英文里 list item 的缩写
list 是列表
item 是条目
重组起来就是列表条目

注意点

  • 自然要牢记 ul
    标签是用来给一群数据添加列表语义的,而不是给他们添加小圆点的
  • ul 标签和 li 标签是三个全体1个组合,所以一般景色下 ul 标签和 li
    标签都是一起出现的,不会单个出现,约等于说不会独自行使四个 ul
    标签可能独立选择三个 li 标签,都以构成一起行使
  • 鉴于 ul 标签和 li 标签是3个组成,所以 ul
    标签中不推荐包罗其余标签,也即是说以往您在 ul 标签中只相会到 li 标签

严节列表应用场景

情报列表
商品列表
4858美高梅,导航条

<h2>中国的城市有哪些</h2>
<ul>
      <li>广州</li>
      <li>北京</li>
      <li>上海</li>
      <li>武汉</li>
</ul>

**
强调
固然如此经过标签属性也能修改样式,然而在店铺费用中相对不要这么干
**

  • ul 中最棒只放 li 标签,不过在同盟社开发中,li
    标签中的内容大概会很复杂,所以我们得以持续在 li
    标签中添加别的的标签来丰盛大家的界面
  • 冬日列表中的 li
    标签中除了能够添加任何标签来拉长大家的界面以外,还能添加 ul
    标签来足够大家的界面,也正是说 ul 中有 li,li 中又有什么不可有 ul
  • 在 webstorm 中怎么样高效编写二个 ul 格式

ul>li

意义:生成1对 ul 标签,然后在那对 ul 标签中再生成壹对 li 标签

ul>li*3

意义:生成一对 ul 标签,然后在那对 ul 标签中再生成3对 li 标签

总结

  • 毫无疑问要铭记在心 ul 标签中最佳只放 li 标签
  • 只是 li 标签中还是能够一连抛弃何标签

列表

 

HTML表格:

html中,三个报表一般会分为以下七个部分构成:

表格:<table>    </table>

行:<tr>  </tr>

单元格:<td>    </td>

报表的标题:<caption>   
</caption>一个表格只可以有一个标题,就是不得不有一个caption。

表头单元格:使用th标签

宗旨语法如下:

        <table>

              <caption>表格标题</caption>

                <tr>

                          <th>表头单元格</th>

               </tr>

                <tr>

                       <td>表行单元格</td>

                </tr>

       </table>

     
合并行:能够使用rowspan属性来合并行。所谓的合并行,指的是将“纵向的N个单元格”合并。

语法:<td   rowspan=”跨越的行数”></td>

     
合并列:可以用colspan属性来合并列。所谓的合并列,指的是将“横向的N个单元格”合并

  语法:<td  colspan=”跨越的列数”></td>

1如既往列表

什么样是一动不动列表
逐步列表的效果
给一群数据添加列表语义,并且这一群数据中存有的多寡都层次鲜明之分
不变列表的格式

<ol>
      <li></li>
</ol>

别的用法和 ul 都差不离,也便是接纳场景/注意点和 ul 大概

冬季列表

  • 严节列表:用来表示3个列表的语义,并且每一个档次和类型里面是不分先后的
  • ul: unordered list 冬季列表
  • li: list item 列表项
  • 冬季列表是1组标签
  • li 标签是容器级标签,能够嵌套任何标签

  <h3> 中国的城市</h3>
    <!-- 无序列表 -->
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
        <li>广州</li>
        <li>郑州</li>
    </ul>


ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的

4858美高梅 2

九冬列表.jpeg

*
*
*
*

HTML超链接:

一,能够应用a标签来促成超链接。

语法:<a href=”链接地址”>文本或图片</a>

贰,也得以将文件设置为超链接,那么些号称“文本超链接”。还足以将图纸设置超链接,叫做“图片    
超链接”。

三,能够行使target属性定义超链接打开窗口的艺术。壹般在骨子里付出中,大家只会用到”_blank”(在新窗口打开链接)那多少个值。

语法:<a href=”链接地址” target=”打开药格局”></a>

④,内部链接:超链接有二种,1种是“外部链接”,另壹种是“内部链接”。

外部链接指向的是“外部网址的页面,而里边链接”指向的是“本人网址的页面”。

5,锚点链接:其实是中间链接的一种,连接的地点(也便是href)指向的是眼前页面包车型大巴有个别部分。

大致说正是点击有个别超链接,就会跳到“当前页面”的某一有的。

福寿齐天锚点链接,须求定义多少个:

一,指标成分的id

二,a标签的href属性指向该id

概念列表

概念列表的功用

  • 给一批数据添加列表语义
  • 先通过 dt 标签定义列表中的全数标题,然后再经过 dd
    标签给各类标题添加描述音讯

概念列表的格式

<dl>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
</dl>

实际 dt 和 dd 皆以英文的缩写,dt是英文 definition title的缩写,dd 是
definition discription 的缩写, dt 的意义就是用来定义列表中的标题,dd
的意思正是用来定义标题对应的讲述

概念列表的应用场景

  • 做网址尾巴部分的相关新闻
  • 做图像和文字混排

概念列表的注意点

  • 和 ul/ol 1样, dl 和 dt/dd
    是一个完全,所以他们一般情状下不会单独出现,都以同台出现
  • 和 ul/ol1样,由于 dl 和 dt/dd 是三个重组标签,所以 dl 中国建工总公司议只放 dt
    和 dd 标签
  • 1个 dt 能够未有对应的 dd ,也足以又多个照应的 dd ,
    不过无论有恐怕尚未 dd 都不引进应用,推荐一个 dt 对应1个 dd
  • 和 li 标签一样,当须求足够界面时,我们得以在 dt 和 dd
    标签中继续添加任何的竹签

<dl>
        <dt>北京</dt>
        <dd>中国首都</dd>
        <dt>上海</dt>
        <dd>富人集中地</dd>
</dl>

不变列表

  • 一如既往列表

 <ol>
        <li>我爱你中国</li>
        <li>月亮</li>
        <li>中国风</li>
        <li>歌曲</li>
        <li>问月</li>
    </ol>

4858美高梅 3

冬辰列表.jpg


报表标签的焦点选取

实际在过去表格标签用的百般万分的多,绝抢先5二%的网址都是使用表格标签来制作的,相当于说表格标签是三个时代的象征

怎么样是表格标签
报表标签的效能
用来给一群数据增进表格语义,其实表格是1种多少的变现情势,当数据量相当大的时候,表格那种表现方式被认为是最为清晰的一种表现方式

报表标签格式

<table>
          <tr>
                <td>需要显示的内容
                </td>
          </tr>
</table>
  • 事实上表格标签中的 table 代表整个表格,也正是一批数据,table
    标签就是二个报表。其实表格标签中的 tr
    标签代表整表格中的壹行数据,也正是说一对 tr 标签正是表格中的1行
  • 骨子里表格标签中的 td 标签嗲表表格中1行中的3个单元格,也便是会所1对
    td 标签正是单排中的四个单元格

注意点

  • 报表标签有叁个边框属性,那么些天性决定了边框的宽窄,暗许情形下这一个特性的值是0,所以看不到边框

<table border="1">
  • 报表标签和列表标签1样,它是一个构成标签,所以 table/tr/td
    要么一起出现,要么1起不出新,不会单个出现

  • table 标签的几本本性

  • cellspacing 外边距

  • cellpadding 内边距

  • align 对齐格局

  • width 表格宽度

  • height 表格中度

  • tr 的几本性情

  • align 水平对齐

  • valign 垂直对齐

<table border="1" width="500" height="250" align="center" cellspacing="0"
    cellpadding="0">
        <tr valign="top">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td valign="bottom">4</td>
            <td align="right">5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

自定义列表

  • 概念列表也是一组标签
  • dl 表示definition list 定义列表
  • dt表示definition title 定义标题
  • dd表示definition description 定义表述词儿,正是对标题标叙说

<dl>
        <dt>北京</dt>
        <dd>国家首都,政治文化中心</dd>
        <dt>上海</dt>
        <dd>经济发展中心</dd>
        <dt>深圳</dt>
        <dd>经济特区</dd>
        <dt>郑州</dt>
        <dd>中原经济</dd>
    </dl>

 

p 和 span 的理解

p标签是指一个段落,而且默认是一个块级元素,
span是一个行内元素的代表,没有什么意思,一般可以放文字等行内元素

<p>这是一段简介内容这是一段 简介 内容这是一段简介内容这是一</p>

 


 列表

壹、严节列表(列表标签中运用最多的一种,万分重要):unordered list

制作导航条、商品列表、新闻列表等
有序列表能做的,无序列表都能完成

4858美高梅 44858美高梅 5

#1、作用:
制作导航条、商品列表、新闻列表等
#2、组合使用ul>li
    <ul>
        <li>秒杀</li>
        <li>优惠券</li>
        <li>PLUS会员</li>
        <li>闪购</li>
        <li>拍卖</li>
        <li>京东服饰</li>
        <li>京东超市</li>
        <li>生鲜</li>
        <li>全球购</li>
        <li>京东金融</li>
    </ul>

#3、ul标签的属性type(这属于列表的样式,所以了解即可)
type:列表标识的类型
        disc:实心圆(默认值)
        circle:空心圆
        square:实心矩形
        none:不显示标识
可以通过css直接去掉小圆点
<style type="text/css">
            ul {
                list-style: none;
            }
</style>

#4、注意
ul与li是组合标签应该一起出现,并且ul的子标签只应该是li,而li的子标签则可以是任意其他标签

冬辰列表(列表标签中使用最多的1种,十分首要):unordered
list

二、有连串表(极少使用)

4858美高梅 64858美高梅 7

 <h1>智商排名</h1>
    <ol>
        <li>Egon</li>
        <li>刘清正</li>
        <li>武佩奇</li>
        <li>alex</li>
        <li>元昊</li>
    </ol>

    <!--有序列表能干的事,完全可以用无序列表取代-->
    <h1>智商排名</h1>
    <ul style="list-style: none">
        <li>1. Egon</li>
        <li>2. 刘清正</li>
        <li>3. 武佩奇</li>
        <li>4. alex</li>
        <li>5. 元昊</li>
    </ul>

一如既往列表(极少使用)

3、自定义列表(也会不时使用)

4858美高梅 84858美高梅 9

#1、作用分析
选择用什么标签的唯一标准,是看文本的实际语义,而不是看长什么样子
无序列表:内容是并列的,没有先后顺序
有序列表:内容是有先后顺序的
自定义列表:对一个题目进行解释说明的时候,用自定义列表,可以做网站尾部相关信息,网易注册界面的输入框

#2、自定义列表也是一个组合标签:dl>dt+dd
dl:defination list,自定义列表
dt:defination title,自定义标题
dd:defination description,自定义描述
<dl>
    <dt>自定义标题1<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>

    <dt>自定义标题2<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>

    <dt>自定义标题3<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>
</dl>
 #3、注意: 3.1 dl>dt+dd应该组合出现,dl中只应该存放dt和dd,而可以在dt和dd中添加任意其他标签 3.2 一个dt可以可以没有对应的dd,也可以有多个,但建议一个dt对应一个dd

三、自定义列表(也会平时利用)

 


 

 table标签

语义:标记一段数据为表格

#1、作用
表格标签是一种数据的展现形式,当数据量非常大的时候,使用表格的形式来展示被认为是最清晰的

#2、格式
<table>
    <tr>
        <td></td>
    </tr>
</table>

tr代表表格的一行数据
td表一行中的一个单元格

#3、注意点:
表格标签有一个边框属性,这个属性决定了边框的宽度。默认情况下这个属性的值为0,所以看不到边框 

4858美高梅 104858美高梅 11

#1、宽度和高度
    可以给table和td设置width和height属性

    1.1 默认情况下表格的宽高是按照内容的尺寸来调整的,也可以通过给table标签设置widht和height来手动指定表格的宽高

    1.2 如果给td标签设置width和height属性,会修改当前单元格的宽度和高度,只要不超过table的宽高,则不会影响整个表格的宽度和高度


#2、水平对齐和垂直对齐
    水平对齐align可以给table、tr、td标签设置
    垂直对齐valign只能给tr、td标签设置

    ========水平对齐===========
    取值
    align=“left”
    align=“center”
    align=“right”

    2.1 给table标签设置水平对齐,可以让表格在水平方向上对齐
          强调:table只能设置水平方向

    2.2 给tr设置水平对齐,可以控制当前行所有单元格内容都水平对齐

    2.3 给td设置水平对齐,可以控制当前单元格内容水平对齐,tr与td冲突的情况下,以td为准

    ========垂直对齐===========
    取值
    valign=“top”
    valign=“center”
    valign=“bottom”

    2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
    2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐


#3、外边距和内边距
    只能给table设置

    3.1 外边距:单元格与单元格之间的间隔,cellspacing="3px",默认值为2px
    3.2 内边距:单元格边框与文字之间的距离:cellpadding="200px"

表格属性

4858美高梅 124858美高梅 13

#1、方式一
    在标签中,想通过指定外边距为0来实现细线表格是不靠谱的,其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现
<table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>

    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>

    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>
#2、方式二(推荐使用)
 细线表格的制作方式:
        1、给table标签设置bgcolor
        2、给tr标签设置bgcolor
        3、给table标签设置cellspacing="1px"


      注意:
      table、tr、td标签都支持bgcolor属性

<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>

    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>

    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>

二种方法实现细线表格

4858美高梅 144858美高梅 15

#1、水平向上的单元格colspan
    可以给td标签添加一个colspan属性,来把水平方向的单元格当做多个单元格来看待
    <td colspan="2"></td>

#2、垂直向上的单元格rowspan
    可以给td标签设置一个rowspan属性,来把垂直方向的的单元格当成多个去看待

#注意注意注意:
1、由于把某一个单元格当作了多个单元格来看待,所以就会多出一些单元格,所以需要删掉一些单元格
2、一定要记住,单元格合并永远是向后或者向下合并,而不能向前或向上合并

单元格合并


from标签

4858美高梅 16在form内还足以添加1种标签

<fieldset>添加边框
    <legend>注册页面</legend>
    表单控件......
</fieldset>

补充 :

点击radio后的文字选中

<p>性别
        <input type="radio" name="gender" id="ml"><label for="ml">男</label>
        <input type="radio" name="gender" id="fl"><label for="fl">女</label>
        <input type="radio" name="gender" id="bm"  checked="checked"><label for="bm">保密</label>
</p>

 

 


 

特殊字符

特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码
Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915;
Δ &Delta; &#916; Ε &Epsilon; &#917; Ζ &Zeta; &#918;
Η &Eta; &#919; Θ &Theta; &#920; Ι &Iota; &#921;
Κ &Kappa; &#922; Λ &Lambda; &#923; Μ &Mu; &#924;
Ν &Nu; &#925; Ξ &Xi; &#926; Ο &Omicron; &#927;
Π &Pi; &#928; Ρ &Rho; &#929; Σ &Sigma; &#931;
Τ &Tau; &#932; Υ &Upsilon; &#933; Φ &Phi; &#934;
Χ &Chi; &#935; Ψ &Psi; &#936; Ω &Omega; &#937;
α &alpha; &#945; β &beta; &#946; γ &gamma; &#947;
δ &delta; &#948; ε &epsilon; &#949; ζ &zeta; &#950;
η &eta; &#951; θ &theta; &#952; ι &iota; &#953;
κ &kappa; &#954; λ &lambda; &#955; μ &mu; &#956;
ν &nu; &#957; ξ &xi; &#958; ο &omicron; &#959;
π &pi; &#960; ρ &rho; &#961; ς &sigmaf; &#962;
σ &sigma; &#963; τ &tau; &#964; υ &upsilon; &#965;
φ &phi; &#966; χ &chi; &#967; ψ &psi; &#968;
ω &omega; &#969; ϑ &thetasym; &#977; ϒ &upsih; &#978;
ϖ &piv; &#982; &bull; &#8226; &hellip; &#8230;
&prime; &#8242; &Prime; &#8243; &oline; &#8254;
&frasl; &#8260; &weierp; &#8472; &image; &#8465;
&real; &#8476; &trade; &#8482; &alefsym; &#8501;
&larr; &#8592; &uarr; &#8593; &rarr; &#8594;
&darr; &#8595; &harr; &#8596; &crarr; &#8629;
&lArr; &#8656; &uArr; &#8657; &rArr; &#8658;
&dArr; &#8659; &hArr; &#8660; &forall; &#8704;
&part; &#8706; &exist; &#8707; &empty; &#8709;
&nabla; &#8711; &isin; &#8712; &notin; &#8713;
&ni; &#8715; &prod; &#8719; &sum; &#8722;
&minus; &#8722; &lowast; &#8727; &radic; &#8730;
&prop; &#8733; &infin; &#8734; &ang; &#8736;
&and; &#8869; &or; &#8870; &cap; &#8745;
&cup; &#8746; &int; &#8747; &there4; &#8756;
&sim; &#8764; &cong; &#8773; &asymp; &#8773;
&ne; &#8800; &equiv; &#8801; &le; &#8804;
&ge; &#8805; &sub; &#8834; &sup; &#8835;
&nsub; &#8836; &sube; &#8838; &supe; &#8839;
&oplus; &#8853; &otimes; &#8855; &perp; &#8869;
&sdot; &#8901; &lceil; &#8968; &rceil; &#8969;
&lfloor; &#8970; &rfloor; &#8971; &loz; &#9674;
&spades; &#9824; &clubs; &#9827; &hearts; &#9829;
&diams; &#9830;   &nbsp; &#160; ¡ &iexcl; &#161;
¢ &cent; &#162; £ &pound; &#163; ¤ &curren; &#164;
¥ &yen; &#165; ¦ &brvbar; &#166; § &sect; &#167;
¨ &uml; &#168; © &copy; &#169; ª &ordf; &#170;
« &laquo; &#171; ¬ &not; &#172;   &shy; &#173;
® &reg; &#174; ¯ &macr; &#175; ° &deg; &#176;
± &plusmn; &#177; ² &sup2; &#178; ³ &sup3; &#179;
´ &acute; &#180; µ &micro; &#181 " &quot; &#34;
< &lt; &#60; > &gt; &#62;   &#39;

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有