HTML

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>

2. 无序列表

   导航栏、侧边栏

   <ul>
       <li>java</li>
       <li>C</li>
       <li>C++</li>
   </ul>
   

3. 自定义列表

   公司网站的底部

   <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：正则表达式