HTML大纲

1.快捷键:单词+TAB
2.初始代码
    <!DOCTYPE html> 文档声明
    <html lang="en">
    <head>
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title> 
    </head>
        <body>
        </body>
    </html>
3.文本修饰标签:
    强调: <strong></strong>  加粗
            <em></em> 斜体
        strong的强调性更强
    下标:<sub></sub>
    上标:<sup></sup>
    删除文本、插入文本:(一般需要配合使用)
        <del></del>
        <ins></ins>
4.图片标签和图片属性:
    <img>   (单标签)
        属性: src:引入图片地址
               alt:当图片有问题时提示友好的文字
               title:提示信息
               width、height:图片的大小
5.引入文件的路径:
    相对路径:
        .当前路径
        ..上级路径
    绝对路径:
6.跳转 <a></a>标签
    属性:href、target
        href:链接的地址
        target:改变链接的打开方式,在当前页面打开 _self  新窗口打开 _blank 
        例如:<a href="  " target="_blank"></a> 
        base  控制作用  <base target="_blank">,所有链接都在新窗口打开
    跳转锚点:
        方式一:# 配合id 例如:
        <a href="#html">HTML</a>
        <a href="#css">CSS</a>
        <a href="#java">JAVA</a>
        <h2 id="html">HTML</h2>
        <p>超文本标记语言</p>
        <p>超文本标记语言</p>
        <p>超文本标记语言</p>
        <p>超文本标记语言</p>
        <p>超文本标记语言</p>
        <h2 id="css">css</h2>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <h2 id="java">JAVA</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        方式二:# 配合 name 例如:
        <a href="#html">HTML</a>
        <a href="#css">CSS</a>
        <a href="#java">JAVA</a>
        <a name="html">
        <h2>HTML</h2>
        <p>超文本标记语言</p>
        <p>超文本标记语言</p>
        <p>超文本标记语言</p>
        <p>超文本标记语言</p>
        <p>超文本标记语言</p>
        <a name="css">
        <h2>css</h2>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <p>层叠样式表</p>
        <a name="java">
        <h2 >JAVA</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
        <h2>编程语言</h2>
7.特殊符号
    &+字符
8.无需列表:
    ul li  之间不允许有其他标签,li中可以有其他标签
        <ul>
            <li></li>
            <li></li>
        </ul>
    <ul type=""> 可以设置,但是样式一般在css设计
9.有序列表:
    <ol>,<li> 之间不允许有其他标签,li中可以有其他标签,一般不常用,无需列表可以代替有序列表。支持type属性,样式一般在css控制
10.定义列表:<dl>,<dt>,<dd>  分别定义列表;定义名词;对名词进行解释。例如:
    <dl>
        <dt>css</dt>
        <dd>层叠样式表<dd>
    </dl>
11.嵌套列表:
12.表格标签:
    <table>
    <tr> 表格行
    <th> 表头
    <td> 定义表格单元   
    <caption> 定义表格标题  
    要符合嵌套规范
    语义化标签,<tHead>,<tBody>,<tFood>,在一个table中,只能有一个<tHead><tFood>
13.表格属性:
    border:
    cellpadding:
    cellspacing:
    rowspan:
    colspan:
    align:
    valign:
14.表单标签:
    form、input..
        input(单标签)的type属性,决定
            text、password、checkbox、radio、file、submit、reset
    <textarea> 多行文本框
    <select><option> 下拉菜单
    <lable> 辅助表单
15.div和span
    div:区域快
    span:对文字进行修饰的内联

1.快捷键:单词+TAB2.初始代码<!DOCTYPE html> 文档声明<html lang="en">

<head>

<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body></body></html>3.文本修饰标签: 强调: <strong></strong> 加粗<em></em> 斜体 strong的强调性更强 下标:<sub></sub> 上标:<sup></sup> 删除文本、插入文本:(一般需要配合使用)<del></del><ins></ins>4.图片标签和图片属性:<img> (单标签) 属性: src:引入图片地址 alt:当图片有问题时提示友好的文字 title:提示信息 width、height:图片的大小5.引入文件的路径: 相对路径: .当前路径 ..上级路径 绝对路径:6.跳转 <a></a>标签 属性:href、target href:链接的地址 target:改变链接的打开方式,在当前页面打开 self 新窗口打开 _blank 例如:<a href=" " target="blank"></a> base 控制作用 <base target="_blank">,所有链接都在新窗口打开 跳转锚点: 方式一:# 配合id 例如:<h2 id="html">HTML</h2><p>超文本标记语言</p><p>超文本标记语言</p><p>超文本标记语言</p><p>超文本标记语言</p><p>超文本标记语言</p><h2 id="css">css</h2><p>层叠样式表</p><p>层叠样式表</p><p>层叠样式表</p><p>层叠样式表</p><p>层叠样式表</p><p>层叠样式表</p><h2 id="java">JAVA</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2> 方式二:# 配合 name 例如:<a name="html"><h2>HTML</h2><p>超文本标记语言</p><p>超文本标记语言</p><p>超文本标记语言</p><p>超文本标记语言</p><p>超文本标记语言</p><a name="css"><h2>css</h2><p>层叠样式表</p><p>层叠样式表</p><p>层叠样式表</p><p>层叠样式表</p><p>层叠样式表</p><p>层叠样式表</p><a name="java"><h2 >JAVA</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2><h2>编程语言</h2>7.特殊符号 &+字符8.无需列表: ul li 之间不允许有其他标签,li中可以有其他标签<ul><li></li><li></li></ul><ul type=""> 可以设置,但是样式一般在css设计9.有序列表:<ol>,<li> 之间不允许有其他标签,li中可以有其他标签,一般不常用,无需列表可以代替有序列表。支持type属性,样式一般在css控制10.定义列表:<dl>,<dt>,<dd> 分别定义列表;定义名词;对名词进行解释。例如:<dl><dt>css</dt><dd>层叠样式表<dd></dl>11.嵌套列表:12.表格标签:<table><tr> 表格行<th> 表头<td> 定义表格单元 <caption> 定义表格标题 要符合嵌套规范 语义化标签,<tHead>,<tBody>,<tFood>,在一个table中,只能有一个<tHead><tFood>13.表格属性: border: cellpadding: cellspacing: rowspan: colspan: align: valign:14.表单标签: form、input.. input(单标签)的type属性,决定 text、password、checkbox、radio、file、submit、reset<textarea> 多行文本框<select><option> 下拉菜单<lable> 辅助表单15.div和span div:区域快 span:对文字进行修饰的内联

相关推荐