码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2020-07-11 12:34:05      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:com   播放   c++   cte   meta   herf   模型   文档   css   

HTML

什么是HTML

  • Hyper Text Markup Language(超文本标记语言)

W3C

  • World Wide Web Consortium(万维网联盟)

W3C标准包括

  • 结构化标准(HTML、XML)
  • 表现标准化语言(CSS)
  • 行为标准(DOM(文档规范模型),ECMAScript(JavaScript)

HTML基础语法

标签

meta标签:描述性标签,它用来描述网站的一些信息

p标签:段落标签

br/:换行

hr/:水平线标签

strong:粗体

em:斜体

特殊符号

空格:&nbsp

大于号:&gt

小于号:&lt

版权号:&copy

记忆方式:&开始 ;结束

图片

<image src="" alt=""

src:图片路径

alt:找不到图片时显示的文字

title:鼠标悬停在图片上显示的文字

链接

<a herf="" target=""

herf:表示跳转到哪个页面

target:在哪个页面打开。默认(_self),在新标签打开(——blank)

锚链接:

  1. 需要一个锚标记

  2. 跳转到标记

    <!--在顶部定义一个标记-->
    <a name="top">顶部</a>
    
    <!--在底部定义一个链接跳转到顶部-->
    <a herf="#top">回到顶部</a>
    

功能性链接

邮件链接:mailto

<a herf="mailto:17441164487@qq.com">点击联系我</a>

块元素

  • 无论内容多少,该元素独占一行
  • (p、h1-h6...)

行内元素

  • 内容撑开宽度,左右都是行内元素的可以排在一行
  • (a、strong、em...)

列表

  1. 有序列表

    应用范围:试卷、问答

<ol>
    <li>java</li>
    <li>C</li>
    <li>C++</li>
</ol>
  1. 无序列表

    导航栏、侧边栏

    <ul>
        <li>java</li>
        <li>C</li>
        <li>C++</li>
    </ul>
    
  2. 自定义列表

    公司网站的底部

    <dl>
        <dt>学科</dt>
        
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C</dd>
    </dl>
    

    表格

    <table border="">
        <tr>
            <!--colspan 跨列,rowspan 跨行-->
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
        </tr>
    </table>
    

    媒体元素

    视频

    <!--
    src:资源路径
    controls:控制条
    autoplay:自动播放
    -->
    <video src="" controls autoplay></video>
    

    音频

    <audio src="" control autoplay></audio>
    

技术图片

内联框架

<iframe src="path" name="mainFrame">
    
</iframe>

表单

技术图片

下拉框

<select name="列表的名字">
    <option value="选项的值"></option>
    <!--selected表示默认选中和单选按钮多选按钮中的checked一样-->
    <option value="China" selected>中国</option>
</select>

文本域

<textarea name="" cols="" rows=""></textarea>

文件域

<input type="file" name="files">

邮件验证

<input type="email" name="url">

数字验证

<input type="number" name="num" max="100" step="2">

placeholder:提示信息

<input type="text" placeholder="请输入用户信息">

required:内容不能为空

pattern:正则表达式

HTML

标签:com   播放   c++   cte   meta   herf   模型   文档   css   

原文地址:https://www.cnblogs.com/Lv-orange/p/13282839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!