1月30日Django学习日记—HTML常用标签

Dou_Huanmin

已于 2023-01-30 15:41:04 修改

阅读量112

点赞数

分类专栏： Django学习文章标签：学习 html 前端 css3

于 2023-01-30 15:32:12 首次发布

本文链接：https://blog.csdn.net/douhuanmin123/article/details/128803517

版权

Django学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

HTML介绍

HTML介绍

HTML不是编程语言，是一种标记语言，本博客不对HTML做事无巨细的文章，只介绍一些常见的标签

图片标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h1>图片</h1>
<br/>
<a id="mv1"></a>
<!--src是图片的本地路径或者url，alt可以给这个图片指定一个名字，在图像无法显示的时候会替代文本，title在你的鼠标对准这个图片会给个提示-->
<img src="./images/11.png" alt="蝴蝶忍1" width="200" />
<a id="mv2"></a>
<img src="./images/22.jpg" alt="蝴蝶忍2" title="这是蝴蝶忍😋" width="200" />
</body>
</html>

文本标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  h1-h6就是标签的大小，跟markdown差不多-->
<u>下划线</u>
<b>加粗标签</b>
<strong>强调加粗标签</strong>
<i>斜体标签</i>
<em>em强调斜体标签</em>
<br/>
<!--br/是一个换行标签-->
<cite>引用</cite><br/>
H<sub>2</sub>O
2<sup>4</sup> = 64
<!--上标下标-->
</body>

</html>

格式化标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>自然段</p>
<p>自然段2</p>
无序列表
<ul type="circle">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
有序列表
<ol type="1">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
自定义列表
<dl>
    <dt>你是一个一个什么</dt>
    <dd>我是田所浩二</dd>
    <dt>年龄是什么，在做什么工作</dt>
    <dd>24岁，是学生</dd>
</dl>
<div>可以通过CSS对这些元素进行格式化</div>
<span>可以CSS和JavaScript操作</span>
<div>div标签自动换行</div>
</body>
</html>

超链接标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">这是百度</a>
<!--target用法是修改打开方式，默认是在当前页面打开，blank可以新窗口打开,parent父窗口，self本窗口，top顶级窗口，framename窗口名字-->
锚点链接
<a href="./图片标签.html#mv1" target="_blank">这是蝴蝶忍😋</a>
<a href="./图片标签.html#mv2" target="_blank">这也是蝴蝶忍</a>
</body>
</html>

表单标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--action是目标地址-->
<!--get提交是明文提交-->
<!--post提交是不可见的密文提交-->
<form action="图片标签.html.html" method="post">
<!--  类型type默认是输入，submit是一个提交按钮,text是明文，password是密文-->
<!--  value可以自动给文本框输入一些字-->
  姓名：<input type="text" name="uname" placeholder="你是谁" value=""/><br/>
  密码：<input type="password" name="upass"  placeholder="请输入密码" value=""/><br/>
  <input type="submit" value="登录">
  爱好：<input type="radio" name="1" value="1"/>男
      <input type="radio" name="1" value="0"/>女<br/>
  头像：<input type="file" name="pic" /><br/>
  你喜欢的运动：<br/>
<!--  在name前面加一个checked就是默认选中的意思-->
    <input type="checkbox" name="likes"/>跑步<br/>
    <input type="checkbox" name="likes"/>打球<br/>
    <input type="checkbox" name="likes"/>踢足球<br/>
    <input type="checkbox" name="likes"/>唱跳rap篮球<br/>
<!--  file是上传文件类型 radio是单选类型 checkbox是多选类型-->
  年龄:<br/>
    <input type="number" placeholder="真实年龄" min="0" max="90" name="pic"/><br/>
  邮箱：<br/>
    <input type="email" placeholder="请输入邮箱" name="pic"/><br/>
  日期：<br/>
    <input type="date" name="pic"/><br/>
  学历:<br/>
    <select name="教育" id = "学历">
      <option value="1">大专</option>
      <option value="2" selected>本科</option>
<!--      加了selcted就是默认被选-->、
    </select><br/>
  简介：<br/>
    <textarea rows="10" cols="100" name="contents" >Helloworld!</textarea>
  <br/><br/>
  datelist是可选的数据列表
  <datalist></datalist>
  <iframe src="图片标签.html" name="myframe" frameborder="1" ></iframe>
</form>
</body>
</html>

##表格标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>表格</h1>
<!--border是否有表格线 cellspacing表示的是线段之间的空格 cellspadding就是字体距离上下左右的距离-->
<table border="1" cellspacing="2" cellpadding="3" width="500">
    <caption><h2>居中作为表格的标题</h2></caption>
    <thead>
    <tr>
<!--        一个tr就是一行，一个th表示数据类型，一个td表示里头的数据-->
<!--        thead是表头，tbody是表体，tfoot是表尾-->
        <th width="80">学号</th>
        <th>姓名</th>
<!--        rowspan是向下合并几个区域-->
        <th rowspan="2" align="center">年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1001</td>
        <td>dou</td>
        <td>sdjla</td>
    </tr>
    </tbody>
</table>
</body>
</html>