首页 > 代码库 > 认识html标签

认识html标签

2024-10-26 23:16:39   208人阅读

1.!DOCTYPE 文档结构类型

2.<html>开始标记
</html>闭合标记

3.charset 字符编码集

常用字符集：UTF-8、GB2312、GBK等

4.<meta>单标记

5.<h1>h1到h6的标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>

6.<p>段落

7.<ul>无序列表

  • 不要独自驾车去山区
  • 不要跟别人的男朋友驾车去山区
  • 不要跟别人的老婆驾车去山区
  • 不要跟带别人的狗驾车去山区
    <ul>
        <li>不要独自驾车去山区</li>
        <li>不要跟别人的男朋友驾车去山区</li>
        <li>不要跟别人的老婆驾车去山区</li>
        <li>不要跟带别人的狗驾车去山区</li>
    </ul>

8.<ol>有序列表

  1. 不要独自驾车去山区
  2. 不要跟别人的男朋友驾车去山区
  3. 不要跟别人的老婆驾车去山区
  4. 不要跟带别人的狗驾车去山区
<ol>
    <li>不要独自驾车去山区</li>
    <li>不要跟别人的男朋友驾车去山区</li>
    <li>不要跟别人的老婆驾车去山区</li>
    <li>不要跟带别人的狗驾车去山区</li>
</ol>

9.<dl>定义列表

名字
是一个人的标识
<dl>
    <dt>名字</dt>
    <dd>是一个人的标识</dd>
</dl>

10.<pre>预格式

11.<blockquote>大引用

这是一个大引用
<blockquote>这是一个大引用</blockquote>

12.<q>小引用

这是一个小引用

<q>这是一个小引用</q>

13.<span>跨越多个字符

这是一个红色的词

<p>这是一个<span style="color:blue;">红色</span>的词</p>

14.<a>超链接

<a href="http://www.mamicode.com/链接" target="_blank">

15.<img>图片

<img src="" alt="提示" />

16.<div>区块

17.<strong><b>加粗

加粗

<strong>加粗</strong>

18.<em><i>斜体

斜体

<em>斜体</em>

19.<sup>上标

22

2<sup>2</sup>

20.<sub>下标

log2

log<sub>2</sub>

21.<abbr>缩写

DOTA

<abbr title="Defend Of Ancient">DOTA</abbr>

22.<figure>定义说明

 

技术分享 图片

 

<figure>
    <img src="http://www.mamicode.com/XXX" alt="图片">
    <figcaption>图片</figcaption>
</figure>

23.<audio>音频

<audio src="http://www.mamicode.com/XXX" controls autoplay></audio>

controls使可控 autoplay自动播放

24.<video>视频 支持格式：MP4 webm ogg

<video src="" controls autoplay loop></video>

loop循环播放

25.<table>表格

1-1 1-2
2-1 2-2 2-3
3-2 3-3 
<table border="1">
    <tr>
        <td colspan="2">1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

tr表示表格行，td表示表格数据，table-row，border设置边框线粗细，

colspan合并行，rowspan合并列

th表头，加粗 caption大表头

26.<style>样式控制 置于head标签中

table{
    border-collapse: collapse;
}

为表格添加上边框

27.<form>表单







  
班长 学委 纪委

<form action="XXX" method="get">
    <input type="text" placeholder="请输入账号" />
    <input type="password" maxlength="6" />
    <input type="button" value="http://www.mamicode.com/点击我" />
    <input type="reset" value="http://www.mamicode.com/清空" />
    <input type="submit" value="http://www.mamicode.com/提交" />
    <button>新的提交按钮</button>

    <label for="male">男</label>
    <input type="radio" name="sex" id="male" />
    <label for="female">女</label>   
    <input type="radio" name="sex" id="female" />

    班长<input type="checkbox" />
    学委<input type="checkbox" checked />
    纪委<input type="checkbox" />

    <select name="" id="">
        <option value="">北京</option>
        <option value="">南京</option>
        <option value="">东京</option>
        <option value="">西京</option>
    </select>

    <textarea name="" id=""></textarea>
</form>

action提交外部链接 method提交方式：get post

input类型：文本框(text)，密码框(password)；点击按钮(button)，重置按钮(reset)，提交按钮(submit)；单选(radio)；多选(checkbox)

placeholder：预定义文本框内容；maxlength:最大输入限制；value：文字内容；name：命名，用于表单提交数据；for：ID选择；checked：默认选择

<lable>可以增强用户体验

<select>创建下拉栏，使用<option>编辑选项

<textarea>一个可以多行输入的文本框

28.<mark>高亮

<p>我是<mark>中国人</mark></p>

29.<nav>导航栏

 

科技 体育 军事

 

<nav>
    <a href="http://www.mamicode.com/XX">科技</a>
    <a href="http://www.mamicode.com/XX">体育</a>
    <a href="http://www.mamicode.com/XX">军事</a>
</nav>

30.<header><footer><article><section><aside>等h5新语义标签

header页眉 footer页脚 article内容 section区块 aside侧边栏

31.行内元素，块级元素

行内：

块级：

inline-block行内块

认识html标签


联系
我们