HTML学习记录

和尚1105

已于 2023-09-07 17:43:39 修改

阅读量37

点赞数

文章标签： html 学习前端

于 2023-09-06 21:40:05 首次发布

本文链接：https://blog.csdn.net/m0_74073576/article/details/132722770

版权

HTML的结构包括“头部”（head）和“主题“（body）,"头部”提供关于网站的信息，“主题”提供网页的具体内容。

<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<!--html根标签-->
<html>
<!--head标签：网页头部-->
<head>
<!--meta描述性标签，用来描述我们网站的一些信息-->
<!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="荷包蛋">
    <meta name="description" content="我来啦！！">
<!--title标签：网页标题-->
    <title>我的第一个网页</title>
</head>

<!--body标签：网页主体-->
<body>
<!--字体设置-->
<font color="#ff00ff" face="宋体"  size="30">字体设置</font>
hello,World!
</body>
</html>

常用标签：

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

<!--标题标签 align：对齐方式 -->
<hn 属性="属性值" >标题文本</hn>
<h1 align="center">一级标签</h1>
<h2 align="left">二级标签</h2>
<h3 align="right">三级标签</h3>
<h4>四级标签</h4>

<!--段落标签-->
<h1 align="center">怀化学院</h1>
<p >怀化学院（Huaihua University）位于湖南省怀化市，是由湖南省人民政府举办、湖南省教育厅主管的全日制普通本科院校，由湖
    南农业大学对口支援。</p>
<p >怀化学院前身为1958年创办的黔阳师范专科学校，历经怀化师范专科学校、怀化师范高等专科学校等阶段；2002年，学校升格为全日
    制普通本科院校，更名为怀化学院；2004年获得学士学位授予权；2021年获批硕士学位授予立项建设单位。</p>

<!--水平线标签-->
<hr/>

<!--文本格式化标签-->
<!--加粗-->
<strong>强调加粗</strong>
<!--强调斜体-->
<em>强调斜体</em>
<!--下标文本-->
<sub>下标文本</sub>
<!--上标文本-->
<sup>上标文本</sup>
<!--加删除线-->
<del>加删除线</del>
<!--加下划线-->
<ins>加下划线</ins>


<!--换行标签-->
<br/>

<!--特殊符号-->
空格
空&nbsp;&nbsp;格

<br/>
&gt;大于号
<br/>
&lt;小于号
<br/>
&copy;版权符号

</body>
</html>

图像标签：

三种图片格式：

1.jpg格式：为照片图像设计的文件格式，一般来显示色彩丰富的图像。

2.png格式：最大优点体积小，支持alpha(全透明，半透明，全不透明)。

3.gif格式：最大特点支持动画，处理动画效果的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--图片标签
src:指定图像文件的路径和文件名的属性，引用图片的地址
alt:图片显示不出时的提示文字
title：鼠标移动到图片上的提示文字
border：图片边框宽度
align：布局
-->
<img src="../resources/image/图1.jpg" alt="图片1"title="悬停文字"width="800"height="500">

<a name="end"></a>
</body>
</html>

链接标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--a标签
  herf ：必填，表示要跳转到的页面
  target:表示窗口在那里打开
    _blank:在新标签中打开
    _self:在自己的网页中打开
    _top:在顶层框架中打开链接
    _parent:在当前框架的上一层打开链接
  -->
<a href="3.图像标签.html"target="_blank">跳转</a>
<br>
<a href="https://www.baidu.com">点我跳转百度</a>
<br>
<a href="1.我的第一个网页.html">
    <img src="../resources/image/图1.jpg" alt="图1（图片名字）"title="点击跳转到第一个网页（悬停文字）"width="600"height="200">
</a>


<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a name="top">开头</a>
<br/>
<a href="#top">返回开头</a>
<br/>
<a href="3.图像标签.html#end">跳转到图像标签的结尾</a>


<!--功能链接
    邮件链接：mailto
-->
<a href="mailto:heshang00.d@qq.com">点击联系我</a>

</body>
</html>

列表标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答
type取值决定前面的数字/字母
-->
<ol>
  <li>尉儿</li>
  <li>耀儿</li>
  <li>赐儿</li>
  <li>方宇</li>
  <li>宇哥</li>
  <li>聚儿</li>
  <li>燚哥</li>
</ol>

<!--水平分隔线-->
<hr/>

<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
<!--  只能嵌套<li><li/>-->
  <li>尉儿</li>
  <li>耀儿</li>
  <li>赐儿</li>
  <li>方宇</li>
  <li>宇哥</li>
  <li>聚儿</li>
  <li>燚哥</li>
</ul>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
  <dt>帅气逼人组合</dt>
  <dd>尉儿</dd>
  <dd>耀儿</dd>
  <dd>燚哥</dd>
  <dd>赐儿</dd>
</dl>

</body>
</html>

表格标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格标签table
行 tr rows
列 td
border:边框的宽度
-->

<table border="1">
<!--表格标题-->
    <caption>天气预报</caption>
  <tr>
<!--    跨列colspan-->
    <td colspan="3">1.1</td>
      <th colspan="3"> 天气情况</th>
  </tr>

  <tr>
<!--    跨行rowspan-->
    <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>



</body>
</html>

内联标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--iframe内联框架
src:地址
w-h：宽度高度
-->
<iframe src="" name="框架标识名"
        width="1000" height="800"></iframe>

<a href="3.图像标签.html" target="框架标识名">跳转</a>

</body>
</html>

表单标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h1 >注册</h1>
<!--表单from
 action: 表单提交的位置，可以是网站，也可以是一个请求处理的地址
 method: post , get 提交方式
 target:提交地址的打开方式
 -->
<from  method="post" action="D:\java\HTML\HTML\html\3.图像标签.html" >

<!--文本输入框 ： input  type  =  "text"  -->
      <p>名字: <input type="text"  name ="username" >  </p>
<!--密码输入框 ： input type = "password" -->
      <p>密码: <input type="password" name ="pwd" > </p>

    性别: <input type="radio" name="sex" id="man">
    <label for="man">男</label>
    <input type="radio" name="sex" id="woman">
    <label for="woman">女</label>
   <p>
       <input type="submit" value="提交">
       <input type="reset" value="重置">
       <input type="image" src="../resources/image/图1.jpg" width="100" height="50">
       <input type="file" >
    </p>
</from>
<textarea rows="20" cols="100" >多行文本框内容</textarea>
<select>
    <optgroup label="前端">
    <option>HTML</option>
    <option selected>CSS</option>
    <option>JS</option>
    </optgroup>
</select>
</body>
</html>