HTML总结

最新推荐文章于 2024-03-16 16:59:41 发布

原创最新推荐文章于 2024-03-16 16:59:41 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #列表 #html5

前端学习专栏收录该内容

15 篇文章

订阅专栏

本文主要总结了HTML的基本概念，包括超文本、网页和标记/标签，并详细介绍了HTML5中常用的文章标签如标题、段落、换行，超链接、图片、表格、列表、表单以及嵌入内容的使用方法和相关属性，如img的width和height，表格的border、cellspacing和cellpadding等。

概念

HTML（Hyper-text Markup Language）是一种超文本标记语言，不是编程语言。

超文本

不仅仅是文本，指网页能展示的内容，比如：音频、视频、文字、图片、超链接、框、按钮等。

网页

指用户通过互联网获取资源的一种方式。

标记/标签

指利用固定的多个标签用来表示超文本。

HTML常用标签

文章

标题标签

<h1>标题内容</h1>
...
<!--数字越大字体越小,但都是粗体-->
<h6>标题内容</h6>

段落标签

段落文本独行显示，即每个段落换行显示。

<p>标题名称</p>

换行标签

<br>

超链接

<a href="网页地址">显示的文字</a>

href是用来表示该超链接要跳转的网页地址。
默认情况下<a>不换行。

图片

img

<img src="" width="" height="" title="" alt="">

title:给图片创建名称，当鼠标移动在图上上时，名称会显示。
alt:图片加载不出来时设置的替代文字。

表格

<table border="" cellspacing="" cellpading=""> 
        <tr>
        	<th></th>
            <td></td>
        </tr>

    </table>

cellspacing：设置单元格之间的间隙，默认为1。
cellpading：设置单元格内容和边框之间的间隙。

通用属性

width
height
align
bgcolor

其他属性

table

border
cellspacing
cellpading

td

合并单元格

colspan
rowspan

列表

无序列表

<ul>
        <li></li>
    </ul>

有序列表

 <ol reversed>
        <li></li>
    </ol>

reversed表示降序。

定义列表

 <dl>
       <dt>
           <dd></dd>
       </dt>
   </dl>

dt：列表项名字
dd：列表项名词解释

表单

form

<form action=""></form>

action:表示提交网页的地址。

表单元素

input输入框基本type

  <!-- 输入框 -->
  <input type="text">
  <!-- 密码框 -->
  <input type="password">
  <!-- 单选框 -->
  <input type="radio">
  <!-- 多选框 -->
  <input type="checkbox">

input type HTML新增

 <!-- 日期 -->
    <input type="date">
    <!-- 数字 -->
    <input type="number">
    <!-- 电子邮箱 -->
    <input type="email">
    <!-- 颜色 -->
    <input type="color">
    <!-- 范围 -->
    <input type="range" min="最小" max="最大" step="数字间隔">

select

<!-- 下拉列表 -->
<select >
       <option ></option>
   </select>

button（按钮）

<button></button>

如果button按钮在form表单内，那么按钮会自动拥有提交表单功能。

textarea（文本域）

 <textarea  cols="30" rows="10"></textarea>

cols：设置文本域列数，即间接设置宽度。
rows：设置文本域行数，即间接设置高度。

通用属性

name
value
disabled:表示不可更改
required:表示必填项

其他属性

checked:表示单选框、多选框默认按钮
selected:表示下拉列表默认按钮

嵌入内容

iframe

 <!-- 利用iframe来实现三栏式布局 -->
  <iframe src="" width="" height="" scrolling=""></iframe>
	```
	scrolling：默认按钮yes，可以改为no，表示设置嵌入页面是否有滚动条。