其他分享
首页 > 其他分享> > HTML学习总结

HTML学习总结

作者:互联网

什么是HTML

  HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。

 "超文本"(hypertext)是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网,并将其与他人创建的页面相链接,你就成为了万维网的积极参与者。

常用的HTML标签

1.<html></html>: <html>元素。这个元素包裹了整个完整的页面,是一个根元素,其它元素都嵌套到其中。
2.<head></head>: <head> 元素。 这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。
3.<meta charset="utf-8">:这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。
4. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标,出现在浏览器标签上。(试一试:你可随意下载一个.ico图标文件到工作目录中)
5. <title></title>: 设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。
6.<body></body>: <body>元素。 包含你能在页面看到的所有内容,包括文本,图片,音频,游戏等等。
7.<a href="https://www.baidu.com/" target="_blank">百度一下</a>:这是超链接语法。href即为要跳转去的地址 URL(Uniform Resorce Locator)。target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)。超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的。
8.<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">:插入图片语法。src属性为要显示图片文件的位置 URL,即图片文件的路径。alt属性当获取图片出现问题时显示的文字(占位符)。可为图片指定高宽度,但不建议(可能导致图片变形)。

HTML网页结构

基本结构

 <html>

   <head>

     <title>第一个HTML示例</title>

   </head>

   <body>  

<!--编辑你的HTML-->
   </body>

 </html>

HTML在浏览器中运行。

HTML是纯文本文件,所以可以使用任何一款文本编辑器编辑。

表单结构

<table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

代码中,表示行, 表示行中的单元, 是表头的单元(将会加粗显示)

无序列表

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

无序列表使用<ul>标签,默认使用实心圆点作为每项的标志,其它的标志可以是空心圆circle,实心方块square以及不出现标志。

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

有序列表

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

有序列表使用<ol>标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A,小写字母a,罗马字母i等。

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

当网站需要获取我们的一些信息如:用户名、密码、选择买什么、买多少、提出意见等等时,我们就需要使用表单(form)来让用户填写或选择。如下:

<form>
  <!-- 文本框,注意有 placeholder 提示符 -->
  用户名:<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码:<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄:<br>
  <!-- 数字输入框,注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别:<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表,注意 selected 属性 -->
  党派:<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具:<br>
  <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>
  <!-- 日期选择器 -->
  您的工作日期:<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域,注意 rows 和 cols 属性 -->
  您的建议:<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮,将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

当提交时,表单中没有name属性的元素将不会提交,比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

HTML 的元素可以以称为区块 或 内联的方式进行显示。

区块元素

区块元素在浏览器显示时,通常会以新行来开始(和结束)。如:<h1>, <pre>, <ul>, <table>,<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素

内联元素相反,他们总是一个接一个进行显示,不会新起一行。如:<span>, <input>, <td>, <a>, <img>等。

<h3>下面的元素将在一行中显示</h3>
<span>姓名:</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

标签:总结,标签,元素,学习,HTML,Tea,Milk,页面
来源: https://blog.csdn.net/qq_45937732/article/details/114783591