html(1)

菜鸟笔记 2020-02-27

提示:由于水平有限，如发现有疑问或错误的地方请毫不客气的提出、讨论,我会在第一时间回复,感谢在先

参考地址:
NDN WEB
HTML
CSS

单标签 <自闭标签>

 换行(上下不会生成空白行)
 水平线

<img src="" alt="" height="" width="" title="">

src: 图片来源

alt: 图片不显示时候交互文字

width、height,只设置一个能够保持不失真

title:获取焦点时候显示的文字,鼠标放在图片上的时候显示的内容;

图片没有设置宽高的时候，图片按照百分之分白显示;如果更改高或者宽，那么图片等比例缩放;

实体 特殊符号
HTML 对空格,回车，TAB不感冒；书写多个也只会显示一个;而且对于特殊字符是无法显示出来的比如 网页中显示
 这个标签

&nbsp;


&lt  <;


&gt >;


&copy;


注意最后的分号不要忘记

双标签
 段落(段落上下自动生成空白行)

 
 
 
 
 
 

一个页面只能出现一次
文本标签
 &      (建议使用strong)
 & 文字倾斜  (建议使用em)
 &  删除线 (建议使用del)
 &  下划线 (建议使用u)
语义化使用可读性更强!

 锚点

<a href="http://www.baidu.com" title="touch me" target="_self">打开百度地址!

href :要打开的路径

title: 鼠标放到上面显示的内容

target:_self(默认值):在自身页面打开

_blank:在新的标签页中打开 blank:中文为空白的含义


一种超链接优化写法:

<base target="_blank"> 让所有的超链接都在新的标签页中打开.


设置锚点:eg <p id="maodian">

设置超链接到锚点: <a href="#maodian">点击我回到锚点

路径
利用绝对路径或者相对路径找到图片(一般情况下图片不会用绝对路径来做索引)
- html文档和图片在同一个目录中,使用图片的时候可以直接写图片名
- html文档和图片的父文件夹在同一个目录中,使用图片的时候可以写 文件夹名/图片名
- html文档和图片所在父文件夹的子文件夹在同一个目录中,使用图片的时候可以写 ../图片名
空链
  : "有链接，但是不知道链接路径的时候使用空链" 回到网页顶部的操作

<a href="#faq">常见问题 导航到本页面id="faq"的地方


<a href="#botton-section">去底部 导航到本页面id="botton-section"的地方


<a href="#">回到页面顶部

/记住这种用法  跳转到其他界面的特定IDfaq/

<a href="http://abc.com/course/202#faq"&gt;常见问题 


在移动设备上使用的时候可以打电话

<a href="tel:13663788334">打电话

列表
ul是一个组标签,一定是一坨一坨的出现,也就是说li标签不能单独存在,必须包裹在ul里面

由于ul和li是一个整体,所以ul里面不推荐包裹其它标签,永远记住ul里面最好只写li标签


虽然ul中推荐只能写li标签,但是li标签是一个容器标签,li标签中可以添加任意标签,甚至可以添加ul标签


无序列表

    
    
    张三        list item; list item ; list item; list item;
        
  • 李四
    • 
        
  • 王五
    • 
    


<p>有序列表</p>
<!-- type: a,A,I,i   start:列表开始的位置 -->
<ol type="I" start="3"&gt;
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
</ol>

<p>自定义列表</p>
<dl>
    <dt>这是自定义列表</dt>   define title
    <dd>这是自定>义列表</dd>  define description 
    <dd>这是自定>义列表</dd>
</dl>

自定义列表的展示形式:
first
    1
    2
    3
second
    4
    5
    6


dl也是一组标签,一般和dt dd 一起使用,一般dl里面除了 dt  dd 不会包含其他的标签,一般的形式是 一个dt下面有多个dd

上标与小标标签
23 = 8; 2的3次方等于8
log28 = 3; 8的log等于3
h5快捷键
!tab  html5代码块
meta && link 标签
    meta 的属性有两种：name和http- equiv
    name属性主要用于描述网页，对应于content（网页内容）
table
Table

    
        <tr&gt;
        <td align="center"&gt;张</td&gt;
        <td align="center"&gt;18</td&gt;
        <td align="center"&gt;挖掘机</td&gt;
        <td align="center"&gt;1</td&gt;
    </tr&gt;

    <tr&gt;
        <td align="right"&gt;码流</td&gt;
        <td align="right"&gt;20</td&gt;
        <td align="right"&gt;大前段</td&gt;
        <td align="right"&gt;2</td&gt;
    </tr&gt;

    <tr&gt;
        <td&gt;3</td&gt;
        <td&gt;3</td&gt;
        <td&gt;3</td&gt;
        <td&gt;3</td&gt;
    </tr&gt;

</table&gt;


  <table align="center" width="300" height="200" bgcolor="red"  cellspacing=1px>
    <thead align="left" bgcolor="white"&gt;
        <tr&gt;
            <th colspan="4"&gt; header</th>        <!--  和并列 -->
        </tr&gt;
    </thead>
    <tbody bgcolor="white" align="center"&gt;
        <tr&gt;
            <td&gt;a</td&gt;
            <td&gt;b</td&gt;
            <td&gt;c</td&gt;
            <td&gt;d</td&gt;
        </tr&gt;
        <tr&gt;
            <td&gt;a</td&gt;
            <td&gt;b</td&gt;
            <td&gt;c</td&gt;
            <td&gt;d</td&gt;
        </tr&gt;
    </tbody>
</table&gt;

thead,tbody,tfoot 是table的组成部分,架构;
th 主要是在thead中;起到强调,加粗的作用;其次如果 某一行或者列具有 总起,总领， 说明性,纲领性的文字,就可以使用th
th 和 td 相同 一般也是写在tr 中
</code></pre>
注释
下拉列表

    
下拉列表

    省:

<br>
<br>

省份:<select name="省份:" id="" multiple>
     <option value="河南省"&gt;河南省</option>
     <option value="河北省"&gt;河北省</option>
     <option value="湖南省"&gt;湖南省</option>
 </select>

市:<select name="市区" id=""&gt;
    <option value="开封市"&gt;开封市</option>
    <option value="兰考市"&gt;兰考市</option>
    <option value="周口市"&gt;周口市</option>
    option
</select>

县：<select name="县" id=""&gt;
     <!-- 分组功能 -->
     <optgroup label="开封市"&gt;
         <option value="尉氏县"&gt;尉氏县</option>
      <!-- 设置默认选中 -->
     <option value="杞县" selected=""&gt;杞县</option> 
     <option value="通许县县"&gt;通许县</option>
     </optgroup>

     <optgroup label="海河市"&gt;
         <option value="宴岗村"&gt;宴岗村</option>
         <option value="通州村"&gt;通州村</option>
         <option value="海河村"&gt;海河村</option>
     </optgroup>
</select>


form内容重新设置



input type

            input type

    <!-- 输入内容必须是url格式 -->
    <!-- <input type="url"&gt; -->


     <!-- 选择日期date -->
    <!-- <input type="date"&gt; -->

    <!-- 选择时间time -->
    <!-- <input type="time"&gt; -->

    <!-- 输入内容email形式 -->
    <!-- <input type="email"&gt; -->

    <!-- 输入内容必须是数子 step可以设置步长-->
    <!-- <input type="number" step="2"&gt; -->

    <!-- 滑块类型 -->
    <input type="range"&gt;
    <input type="submit"&gt;

    </fieldset>
</form></code></pre>


输入框和文字绑定


 有时候我们想要点击输入框前面的文字的时候想要让这个输入框聚焦怎么办？
 例如：账号：账号输入框   密码：密码输入框
 可以使用label标签来实现:
 1 用label将字体 账号,密码  包括起来;
 2 利用label的for属性将 label中的文字和输入框绑定起来(for ="输入框的ID") 从而实现绑定效果
 
  


textarea标签