HTML总结

最新推荐文章于 2024-07-24 14:22:29 发布

shiki神尾

最新推荐文章于 2024-07-24 14:22:29 发布

阅读量85

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_45846068/article/details/114903441

版权

HTML学习总结

简介

HTML初步认识

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言
HTML 是构建网页的基础，用于区分网页的各个区域，以及每个位置的划分

HTML结构

<html>
<head>
<title>当前网页</title></head> 

<body>
    <h1>第一个网页</h1>
    <p> 2333</p>

</body>
</html>

各种标签属性

空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如br，hr, input, img, a等等。我们称其为空元素

br	换行
hr	当内容的主题发生变化时，使用 hr 标签进行分隔
input	输入框
img	图片
a	引入链接
lable	标签

嵌套

及为复合的使用各种标签，例如：

<html>
<head>
<title>当前网页</title></head>

<body>
    <h1>第一个<br>网页</h1>
    <p> 2333</p>
</body>
</html>

之间使用了一个空元素的标签

链接、文本框的引入

<html>
<head>
<title>当前网页</title></head>

<body>
    <h1>第一个<br>网页</h1>
    <p> 2333</p>
<label >第一个输入框     </label><input type="text"><br>

<label >第二个输入框    </label><input type="password"><br>
<a href="https://www.baidu.com/"> 搜索</a>
</body>
</html>

插入图片

使用标签

注：<>里面才表示元素的属性，<> </>之间表示的内容

<html>
<head>
<title>当前网页</title></head>

<body>
    <h1>第一个<br>网页</h1>
    <p> 2333</p>
<label >第一个输入框     </label><input type="text"><br>  

<label >第二个输入框    </label><input type="password"><br>
<a href="https://www.baidu.com/"> 搜索</a>
</body>
</html>

插入图片

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="logo">

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

表格以及列表

表格 Table

表格一行一行展示

<table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>学校</th>
    </tr>
    <tr>
      <td>王二</td>
      <td>15</td>
      <td>大学名</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>16</td>
      <td>学校名</td>
    </tr>
  </table>

标签
br	行
td	表示行中的单元
table	表格标签

列表 list

无序列表

标签为
- ,默认为实心圆作为每一项的标志，也可以使用实心方块

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>

实心方块需要添加方块属性。
- Coffee
- Tea
- Milk

有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

标签为

,默认为使用数字作为每一项的标志，可以用A a 罗马数字表示，加上相应的属性即可。

表单 Form

表单常用于调查问卷，获取用户信息，建议等

用户输入框以及年龄选择

<form >

<label for="">username</label> <input type="text"><br>
<label for="">password</label><input type="password">
<br>
年龄 <input type="number" min="18" value="18"><br>
</form>

下拉表

<select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select>

注意一定要标记属性

多选框

<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>

属性加上checkbox

选择日期

  <input type="date"><br>

打开本地文件

 <input type="file" name="photo"><br>

文字输入框

<textarea name="message" rows="20" cols="50">
   输入的内容
  </textarea><br><hr>

注：rows 表示高度和 cols 表示宽度单位为字符

表单的提交

<input type="submit" value="提 交">
 <input type="reset" value="重 置">

注：表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理

shiki神尾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML总结

HTML学习总结文章目录HTML学习总结简介HTML初步认识HTML结构各种标签属性空元素嵌套链接、文本框的引入插入图片表格以及列表表格 Table列表 list无序列表有序列表表单 Form用户输入框以及年龄选择下拉表多选框选择日期打开本地文件文字输入框表单的提交简介HTML初步认识HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言HTML 是构
复制链接

扫一扫