HTML学习1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--meta标签描述了一些基本的元数据
    通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
    元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务-->
    <meta name="keywords" content="为搜索引擎定义关键词">
    <meta name="description" content="描述网页内容">
    <meta name="author" content="网页作者">
    <meta http-equiv="refresh" content="300">
    <!--每300秒刷新当前网页-->
    <title>html learn</title>
    <base href="" target="_blank">
    <!--base标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接-->
    <link rel="stylesheet" type="text/css" href="htmltest1.css">
    <!--link标签定义了文档与外部资源之间的关系-->
    <style type="text/css">
        body{
            background: ;
        }
        p{
            color: blue;
        }
    </style>
    <!-- style标签定义了HTML文档的样式文件引用地址-->
    <script type="text/javascript">script标签用于加载脚本文件,如: JavaScript</script>
    <!---->
</head>
<body>
    <!-- HTML学习 -->
    <h1>h1 标题</h1>
    <h2>h2 标题</h2>
    <h3>h3 标题</h3>
    <h4>h4 标题</h4>
    <h5>h5 标题</h5>
    <h6>h6 标题</h6>
    <p>p 段落</p>
    <a href="https://mo.fish">a 链接</a><br>
    <img src="./image1/img1.jpg"><br>img 图片<br>
    <p>hr 水平线</p>
    <hr>
    <!-- HTML注释 -->
    <p>html 会省略代码  中多余的   空白字符</p>
    <hr>
    <h3>HTML文本格式化标签</h3>
    <b>b 加粗文本</b><br>
    <i>i 斜体文本</i><br>
    A<sub>sub下标</sub><br>
    B<sup>sup上标</sup><br>
    <em>em 着重文字</em><br>
    <small>small 小号文字</small><br>
    <strong>strong 加重语气</strong><br>
    <ins>ins 插入字</ins><br>
    <del>del 删除字</del><br>
    <hr>
    <h3>HTML计算机输出标签</h3>
    <code>code 计算机代码</code><br>
    <kbd>kbd 键盘码</kbd><br>
    <samp>samp 计算机代码样本</samp><br>
    <var> var 变量</var><br>
    <pre>pre 预格式文本</pre><br>
    <hr>
    <h3>HTML引文,引用,及标签定义</h3>
    <abbr>abbr 缩写</abbr><br>
    <address>address 地址</address><br>
    <bdo>bdo 文字方向</bdo><br>
    <blockquote>blockquote 长的引用</blockquote><br>
    <q>q 短的引用</q><br>
    <cite>cite 引用、引证</cite><br>
    <dfn>dfn 一个定义项目</dfn><br>
    <hr>
    <h3>HTML链接</h3>
    <a href="https://mo.fish" target="_blank" rel="noopener no referrer">a 链接 新页面打开</a><br>
    <hr>
    <p>HTML图像,src 指 "source"。源属性的值是图像的 URL 地址。<br>
        alt 属性用来为图像定义一串预备的可替换的文本。<br>
        height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
    </p>
    <img src="image1/img2.jpg" alt="liverpool">
    <hr>
    <p>HTML表格 table,行 tr,单元格 td,表头 th,表格标题 caption</p>
    <table border="1">
        <caption>Empolyee Information</caption>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
        </tr>
        <tr>
            <td>Gini</td>
            <td>29</td>
            <td>男</td>
        </tr>
        <tr>
            <td>Mane</td>
            <td>28</td>
            <td>男</td>
        </tr>
    </table>
    <hr>
    <h3>HTML列表</h3>
    <ol>
        <li>有序列表 ol,列表项目使用数字进行标记</li>
        <li>列表项 li</li>
    </ol>
    <ul>
        <li>无序列表 ul,列表项目使用粗体圆点(典型的小黑圆圈)进行标记</li>
        <li>列表项 li</li>
    </ul>
    <dl>
        <dt>自定义列表不仅仅是一列项目,而是项目及其注释的组合</dt>
        <dd>自定义列表以 dl 标签开始</dd>
        <dt>每个自定义列表项以 dt 开始</dt>
        <dd>每个自定义列表项的描述以 dd 开始</dd>
    </dl>
    <hr>
    <hr>
    <h3>HTML区块</h3>
    <div>
        <p>大多数 HTML 元素被定义为块级元素或内联元素。<br>
            块级元素在浏览器显示时,通常会以新行来开始(和结束)。<br>
            HTML内联元素在显示时通常不会以新行开始。</p>
    </div>
    <div>
        div 定义了文档的区域,块级 (block-level)
        <p>这是<span style="color: red">span元素</span>用来组合文档中的行内元素, 内联元素(inline)</p>
    </div>
    <hr>
    <h3>HTML表单</h3>
    <p>form 表单,input 输入元素</p>
    <form name="information" action="https://mo.fish" method="get">
        文本框1<input type="text" name="name"><br>
        文本框2<input type="text" name="age"><br>
        textarea 文本框<textarea>输入</textarea><br>
        密码字段<input type="password" name="pwd"><br>
        单选按钮<input type="radio" name="bodyindex" value="healthy">健康
        <input type="radio" name="bodyindex" value="injured">受伤<br>
        复选框<input type="checkbox" name="company" value="taobao">TB
        <input type="checkbox" name="company" value="pingduoduo">PDD
        <input type="checkbox" name="company" value="jingdong">JD<br>
        <label for="b">B</label>
        <input type="radio" name="char" id="b" value="B">
        <label for="a">A</label>
        <input type="radio" name="char" id="a" value="A">
        <select name="select1">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C" selected>C</option>
            <option value="D">D</option>
        </select>
        <input type="submit" name="提交">
    </form>
    <br>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
        <input type="range" id="a" value="50">100 +
        <input type="number" id="b" value="0"> =
        <output name="x" for="a b">50</output>
    </form>
    <br>
    <hr>
    <h3>HTML框架 iframe</h3>
    <iframe src="https://mo.fish" width="800" height="300"></iframe>
    <iframe src="https://s.weibo.com/top/summary?cate=realtimehot" width="800" height="300"></iframe>
    <br>
    <hr>
    <h3>HTML颜色 三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。<br>
        141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124).<br>
        17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。
    </h3>
    <pre>
        颜色值由十六进制来表示红、绿、蓝(RGB)。
        每个颜色的最低值为 0(十六进制为 00),最高值为 255(十六进制为FF)。
        十六进制值的写法为 # 号后跟三个或六个十六进制字符。
        三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。
    </pre>
    <ol>
        <li style="color: #000000">#000000</li>
        <li style="color: #FF0000">#FF0000</li>
        <li style="color: #00FF00">#00FF00</li>
        <li style="color: #0000FF">#0000FF</li>
        <li style="color: #FFFF00">#FFFF00</li>
        <li style="color: #FF00FF">#FF00FF</li>
        <li style="color: #00FFFF">#00FFFF</li>
        <li style="color: #FFFFFF">#FFFFFF</li>
        <li style="color: #888888">#888888</li>
    </ol>
    <hr>
    <h3>HTML 脚本</h3>
    <script type="text/javascript">
        document.write("javascript脚本")
    </script>
    <noscript>
        只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容
    </noscript>
    <hr>
    <h3>HTML 字符实体</h3>
    <p>HTML 中的预留字符必须被替换为字符实体。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
    如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)</p>
    <p>A&nbsp;&nbsp;1&lt;2,5&gt;3,&nbsp;&amp;&nbsp;&quot;&nbsp;&apos;&nbsp;
    &cent;&nbsp;&pound;&nbsp;&yen;&nbsp;&euro;&nbsp;&sect;&nbsp;&cpoy;&nbsp;
    &reg;&nbsp;&trade;&nbsp;&times;&nbsp;&divide;&nbsp;</p>
    <hr>
    <h3>HTML URL 统一资源定位器</h3>
    <p>URL(Uniform Resource Locators) 是一个网页地址。</p>
    <pre>
        一个网页地址语法规则:
        scheme://host.domain:port/path/filename

        例子:http://www.nowcoder.com/html/html-tutorial.html
        说明:
        scheme - 定义因特网服务的类型,最常见的类型是 http。
        host - 定义域主机(http 的默认主机是 www)。
        domain - 定义因特网域名,比如 nowcoder.com。
        port - 定义主机上的端口号(http 的默认端口号是 80)。
        path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
        filename - 定义文档/资源的名称。

        常见的 URL Scheme:
        http    超文本传输协议        以 http:// 开头的普通网页。不加密。
        https    安全超文本传输协议    安全网页,加密所有信息交换。
        ftp        文件传输协议            用于将文件下载或上传至网站。
        file                        您计算机上的文件。

        URL 字符编码:
        URL 只能使用 ASCII 字符集 。
    </pre>



    <br><br>
</body>
</html>
全部评论

相关推荐

评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务