让前端飞Web前端之路

Html快速讲解

2020-06-28  本文已影响0人  warabc

什么是HTML

HTML(Hyper Text Marked Language)称为超文本标记语言，是一种标识性的语言。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。百度百科

HTML是网页的骨架，是开始学习制作网页的第一步，它是由一堆标签组合起来的

必需了解

块元素和行内元素

简单了解，下面会详细介绍

后期可通过css把这两个互换

基本定义参考自百度百科

基本文件结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
这是内容主体
</body>
</html>

常用的标签

标题标签

只有六级，如果定义了其他级的，就会被复原成普通文本大小

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

效果：

常用的没有实际意义的标签

没有实际意义，就是不会产生效果

<!--常用操作-->
<div>
    <p>这是一个段落</p>
    <p>这是<span>第二</span>段</p>
</div>

效果：

没啥实际意义

其他

标签名 介绍
<header> 头部信息
<nav> 导航栏
<aside> 侧边栏
<main> 内容区域
<footer> 底部信息
<article> 文章详情
<section> 页面分区

特殊标签

这是换行<br/>标签

这是
<hr/>
分割线标签

效果：

这是换行
标签

这是


分割线标签

文本样式标签

这些均可以用css实现

name 用法
<b> 加粗
<i> 斜体
<sub> 下标
<del> 删除线 
<b>这是加粗的文本</b><br />
<i>这是斜体</i><br />
带下标 X<sub>3</sub><br />
<del>带删除线</del><br />
带上标 X<sup>2</sup>

效果：

文本样式

列表标签

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
<br />
<ul>
  <li>列表项4</li>
  <li>列表项5</li>
  <li>列表项6</li>
</ul>

效果：

列表项

超链接标签

用于从一个网页跳转到另一个网页

<a href="http://www.baidu.com/" target="_blank">点我跳转到百度</a>

简书不太好演示效果，就不展示了

媒体标签

<!--图片标签-->
<img src="Test.png"/>

<!--视频标签-->
<video src="Test.mp4" controls>如果浏览器不支持，将显示这段话</video>

<!--音频标签-->
<audio src="Test.mp3" controls>如果浏览器不支持，将显示这段话</audio>

表格

<table align="center" border="1px" width="400px" height="200px">
      <thead>
      <tr>
        <th >1-1</th>
        <th>1-2</th>
        <th>1-3</th>
      </tr>
      </thead>
      
      <tfoot>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
      </tr>
    </tfoot>
    
    <tbody>
      <tr>
      <td colspan="2">3-1</td>
      <td>3-2</td>
      </tr>
      <tr>
        <td rowspan="2">4-1</td>
        <td>4-2</td>
        <td>4-3</td>
      </tr>
      <tr>
        <td>5-2</td>
        <td>5-3</td>
      </tr>
    </tbody>
    
</table>

效果：

表格

表单

用于收集用户数据

<!--这里用了表格的一些标签帮助美化表单-->
<form action="www.hellowar.club" method="post">
      <table align="center">
        <tr>
          <td>用户名：</td>
          <td><input  type="text" value="默认输入" name="username"/></td>
        </tr>
        
        <tr>
          <td>密码：</td>
          <td><input  type="password" name="password"/></td>
        </tr>
        
        <tr>
          <td>确认密码：</td>
          <td><input  type="password"/></td>
        </tr>
        
        <tr>
          <td>性别：</td>
          <td>
            <input type="radio" name="sex" checked="checked" value="boy"/>男
              <input type="radio" name="sex" value="girl"/>女
          </td>
        </tr>
        
        <tr>
          <td>兴趣爱好：</td>
          <td>
            <input type="checkbox" value="java" name="hobby"/>Java
            <input type="checkbox" value="c" name="hobby"/>C
            <input type="checkbox" value="js" name="hobby"/>JavaScript
          </td>
        </tr>
        
        <tr>
          <td>国籍：</td>
          <td>
            <select name="county">
              <option selected="selected" value="null">—请选择国籍—</option>
              <option value="China">中国</option>
              <option value="Japan">日本</option>
              <option value="USA">美国</option>
            </select>
          </td>
        </tr>
        
        <tr>
          <td>自我评价</td>
          <td>
            <textarea rows="10" cols="20" name="docs">这里是默认值</textarea>
          </td>
        </tr>
        
        <tr>
          <td><input type="reset"/></td>
          <td><input type="submit"/></td>
        </tr>
        
      </table>
</form>

从这里往上的定义的value的值均为输入框的默认值或按钮显示的文字

表单没有正确提交给服务器的原因：

效果：

iframe内联框架

在一个网页中显示另一个网页，不常用

<iframe src="http://www.baidu.com" width="300px" height="300    px"></iframe>

效果：

内联框架

转义字符

字符 转义字符
空格 &nbsp;
＜ <
＞ >

很多请看字符对照表

HTML实例

<!DOCTYPE html>
<html>
    <head>
        <title>第一个网页</title>
    </head>
    <body>
        <nav>
            <a href="/">首页</a>
            <a href="/about/index.html">关于</a>
        <nav>
        <header>
          头部信息，欢迎来到我的博客
        </header>
        <aside>
          侧边栏
        </aside>
        <main>
          <section>
              <article>这是一篇博客</article>
            </section>
            <section>
              <div>
                  <p>这是一些描述</p>
                    <p>不知道写啥</p>
                </div>
            </section>
        </main>
        <footer>
        底部信息
        </footer>
    </body>
</html>

效果：

差不多就这样了~~~

上一篇下一篇

猜你喜欢

热点阅读