HTML学习

2022/1/10 23:08:07

编程Tag： 标签标题 html 链接 id 定义学习序列表

本文主要是介绍HTML学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

声明：老规矩,不完整，就是学了做着玩玩的

1.基础模板

<!DOCTYPE HTML>           //声明html语言和版本
<html> 

  <!--头部-->
  <head>                    
    <meta charset="utf-8">    
    <tittle>这是一个标题</tittle>  
  </head>

  <!--内容-->
  <body>
      <h1>第1级标题（共可设6级标题）</h1>
      <p>段落</p>
        <!--这是一个链接-->
        <a href = "www.baidu.com">这是一个链接</a>
        <!--这是一张图片-->
        <img ……>
  </body>

</html>

2.一些知识点（不重要）

换行：<br/>

换行与段落的区别，段落会产生一段额外的垂直距离
<br/>中的/表示自封

水平线：<hr/>

3.文本格式化（不重要）

加粗：<b> 斜体：<i>
电脑自动输出：<code>(代码)</code>
上标：sup 和下标：sub

4.链接

HTML使用<a>中的href属性来添加链接,即:

<a href="url">链接文本</a>
<!--子文件夹最好加上/，否则访问时会自动加上/,致使产生两次请求-->

(？但是只打开了一个页面？)

定义id
<a id="……">文本</a>
类似类的调用，里边内容填前面定义好的类名,
类名被id调用后，不能再被调用.
当多个定义语句同时出现时，权重：
inline(不引用，直接写)>id>class>type(整体一起定义的,如定义4级标题是蓝色)

5.<head>头部标签

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为:<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

<tittle>:<tittle>抬头名</tittle>
即抬头，这个页面的名字。
<base>:< href="url" target="_blank">
设置默认的地址链接,后半部分表示链接会在一个新页面打开。

6.列表和表格

无序列表

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

有序列表

<ol>
  <li>有序列表1</li>
  <li>有序列表2</li>
</ol>

表格
table分为标题和内容

<table>

  <thead>
    <tr>
      <th>号码</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>123</th>
    </tr>
  </body>

</table>

结果如下：

号码
123

7.表单

外格式需要用:
<form>……</form>嵌套

<!--小框-->
<label>标签1</label>
<input type="text">
或者
<!--大框-->
<label>标签2</label>
<textarea></textarea>
或者
<!--选择框-->
<label>性别</label>
 <option value="male">男</option>
 <option value="female">女</option>
 <option value="other">其他<option>

结果如下：
标签1

标签2

(选择项无法正常显示)

表单默认为横排列，若是向竖着排列，可在外加：
<div>……</div>

8.按钮和图片

<button>这是一个按钮</button>