web前端学习日志2

---

前言

跳转链接、跳转锚点、特殊符号、无序列表、有序列表、定义列表、嵌套列表、表格标签、表格属性、表单input标签、表单相关标签、表格表单组合实例、div和span、css语法表格

---

提示：以下是本篇文章正文内容，下面案例可供参考

1、链接标签

a->双标签   <a></a>

      href属性：链接的地址

       target属性：可以改变链接打开的方式，默认情况下：在当前页面打开_self  新窗口打开  _blank

base->单标签：作用就是改变链接的默认行为的。

 代码如下：

<a href="./html/list.html">列表页</a>

    <img src=".images/1.jpg"alt="">

<a href="./detail.html">详情页</a>

    <img src="../images/2.jpg"alt="">

<a href="../index.html">返回首页</a>

    <img src="../images/3.jpg"alt="">

 

2、跳转锚点

实现一

#号

id属性

实现二

#号

name属性

代码如下：

<a href="">HTML</a>

    <a href="">CSS</a>

    <a href="">JavaScript</a>

    <h2>HTML超文本标记性语言</h2>

    <p>段落</p>
 

   

    <h2>CSS层叠样式表</h2>

    <p>段落</p>

 

    <h2>JS脚本</h2>

    <p>段落</p>

3、特殊符号

1、特色类
字符    实体名称    实体数字    描述
©    &copy;    &#169;    版权标志
|        &#124;    竖线，
·    &middot;    &#183;    圆点，有时被用来作为菜单分隔符
↑    &uarr;    &#8593;    上箭头，常用作网页“返回页面顶部”标识
€    &euro;    &#8364;    欧元标识
²    &sup2;    &#178;    上标2，数学中的平方，在数字处理中常用到，例如：1000²
½    &frac12;    &#189;    二分之一
♥    &hearts;    &#9829;    心型，用来表达你的心
2、常用类
字符    实体名称    实体数字    描述
&nbsp;    &#160;    空格
&    &amp;    &#38;    and符号，与
“    &quot;    &#34;    引号
©    &copy;    &#169;    版权标志
®    &reg;    &#187;    注册标志
™    &trade;    &#153;    商标标志
“    &ldquo;    &#147;    左双引号
”    &rdquo;    &#148;    右双引号
‘    &lsquo;    &#145;    做单引号
’    &rsquo;    &#146;    右单引号
«    &laquo;    &#171;    左三角双引号
»    &raquo;    &#187;    右三角双引号
‹    &lsaquo;    &#8249;    左三角单引号
›    &rsaquo;    &#8250;    右三角单引号
§    &sect;    &#167;    章节标志
¶    &para;    &#182;    段落标志
•    &bull;    &#149;    列表圆点（大）
·    &middot;    &#183;    列表圆点（中）
…    &hellip;    &#8230;    省略号
¦    &brvbar;    &#166;    断的竖线
–    &ndash;    &#150;    短破折号
—    &mdash;    &#151;    长破折号
3、货币类
字符    实体名称    实体数字    描述
¤    &curren;    &#164;    一般货币符号
$        &#36;    美元符号
¢    &cent;    &#162;    分
£    &pound;    &#163;    英镑
¥    &yen;    &#165;    人民币元
€    &euro;    &#8364;    欧元
4、数学类
字符    实体名称    实体数字    描述
<    &lt;    &#60;    小于号
>    &gt;    &#62;    大于号
≤    &le;    &#8804;    小于等于号
≥    &ge;    &#8805;    大于等于号
×    &times;    &#215;    乘号
÷    &divide;    &#247;    除号
−    &minus;    &#8722;    减号
±    &plusmn;    &#177;    加/减 号
≠    &ne;    &#8800;    不等于号
¹    &sup1;    &#185;    上标1
²    &sup2;    &#178;    上标2
³    &sup3;    &#179;    上标3
½    &frac12;    &#189;    二分之一
¼    &frac14;    &#188;    四分之一
¾    &frac34;    &#190;    四分之三
‰    &permil;    &#8240;    千分率
°    &deg;    &#176;    度
√    &radic;    &#8730;    平方根
∞    &infin;    &#8734;    无限大
5、方向类
字符    实体名称    实体数字    描述
←    &larr;    &#8592;    左箭头
↑    &uarr;    &#8593;    上箭头
→    &rarr;    &#8594;    右箭头
↓    &darr;    &#8595;    下箭头
↔    &harr;    &#8596;    左右箭头
↵    &crarr;    &#8629;    回车箭头
⌈    &lceil;    &#8968;    左上限
⌉    &rceil;    &#8969;    右上限
⌊    &lfloor;    &#8970;    左下限
⌋    &rfloor;    &#8971;    右下限
6、其它
字符    实体名称    实体数字    描述
♠    &spades;    &#9824;    黑桃
♣    &clubs;    &#9827;    梅花
♥    &hearts;    &#9829;    红桃，心
♦    &diams;    &#9830;    方块牌
◊    &loz;    &#9674;    菱形
†    &dagger;    &#8224;    匕首
‡    &Dagger;    &#8225;    双剑号
¡    &iexcl;    &#161;    反向感叹号
¿    &iquest;    &#191;    反向问号

1、&+字符

2、解决冲突啊  左右尖括号、添加多个空格的实现

3、&lt;&gt;&nbsp;
 

4、无序列表

<ul>:列表的最外层容器

<li>:列表项

注意：ul和li必须是组合出现的，他们之间是不能有其他标签的，且符合嵌套的规范。

代码如下：

<ul>

        <li>第一项</li>

        <li>第二项</li>

    </ul>

type属性：改变前面标记的样式（一般都是用css去控制）

（http://www.w3school.com.cn/tags/att_ul_type.asp)

代码如下：

  <ul type="circle">

        <li>第一项</li>

        <li>第二项</li>

    </ul>

5、有序列表

<ol>:列表的最外层容器

<li>:列表项

注意:有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。

代码如下:

<ol type="i">

        <li>第一项</li>

        <li>第二项</li>

        <li>第三项</li>

    </ol>

6、定义列表

<dl>:定义列表

<dt>:定义专业术语或名词

<dd>:对名词进行解释和描述

7、嵌套列表

列表之间可以相互嵌套形成多层列表

8、表格标签

<table>:表格的最外层容器

<tr>:定义表格行

<th>:定义表头

<td>:定义表格单元

<caption>:定义表格标题

注意：之前是有嵌套关系的，要符合嵌套规范

代码如下：

 <table>

        <tr>

            <th>日期</th>

            <th>天气情况</th>

            <th>出行情况</th>

        </tr>

        <tr>

            <td>2019年一月一日</td>

            <td><img str="./img/tianqi_1.png" alt=""></td>

            <td>天气晴朗，适合出行</td>

        </tr>

    </table>

语义化标签：<tHead>、<tBody>、<tFood>

注意：在一个table中，tBody是可以多次出现的，但是tHead、tFood只能出现一次。

align:left、center、right

calign:top、middle、bottom

9、表格属性

border:表格边框

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

rowspan:合并行

colspan:合并列

align:左右对齐方式

valign:上下对齐方式

10、表单标签(无严格嵌套规范）

<form>：表单的最外层容器

<input>:单标签，标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

type属性：
text：普通的文本输入框
password： 密码输入框（value可以给输入框输入默认值）

radio：单选框，默认不互斥，想要互斥，要设置name属性为一样的内容。
checkbox：复选框，想要设置默认选中一个框，需要给该框设置checked属性，建议不要省略取值。
button：按钮,value设置按钮内容，image设置图片按钮。
reset：重置按钮，重置表单中的数据，有默认的按钮内容，使用value可以修改。
submit：提交按钮，from中的action属性设置提交的地点，给要提交的内容设置name属性。
hidden：隐藏域，悄悄收集用户数据，不会在网页中显示。
label标签：文字与输入框绑定在一起，文字被label标签包裹起来，给输入框设置id。也可将文字与输入框都放在label内。
datalist：输入框待选项。让内容与输入框绑定。
select：用于定义下拉，selected设置默认值，想要设定下级选项，让下级内容被optgroup包裹。
textarea：定义一个可换行输入框，cols定义行数和列数，可以无限往下输入。默认情况下可以手动拉伸。
fieldset：给表单加上边框
legend：给边框加上边框

代码如下：

<form>

    <h2>输入框:</h2>

    <input type="text">

    <h2>密码框:</h2>

    <input type="password">

    <h2>复选框</h2>

    <input type="checkbox">苹果

    <input type="checkbox">香蕉

    <input type="checkbox">葡萄

    <h2>单选框</h2>

    <input type="radio">男

    <input type="radio">女

  </form>