一、HTML基本入门_(回答 ) 是用来定义行;td是用来定义单元格;th是用来定义表头。-CSDN博客

本文链接：https://blog.csdn.net/qq_36599530/article/details/122389754

1.基本构成

<!DOCTYPE html>                    
<html>                             --html文档根标签
<head>                             --头标签
<meta charset="utf-8">
<title>第一个页面</title>           --标签标签
</head>
<body>                             --体标签
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

2.文本标签

注释                    ： <!-- 注释内容 -->
<h1></h1> to <h6>       ： 标题标签
<p></p>                 ： 段落标签   换二行
<br> 或<br \>           ： 换行       换一行
<hr>                    ： 水平线||分割线 标签
    属性：
         color：颜色
         width：宽度
         size：高度
         align：对齐方式：center居中 left左对齐 right右对齐
<b>                     ： 字体加粗
<i>                     ： 字体斜体
<font>（已淘汰）                  ：字体标签
        属性：
            color：颜色 rgb（0，0，255） ||  #FF00FF   （00到FF之间）
            size：大小
            face：字体

3.图片标签

<img src="image/jinxuan_3.jpg"/>
<!--
  相对路径：以.开头的路径
          ./ 代表当前目录     ./image/1.jpg
          ../ 代表上一级目录
-->

4.列表标签

<ol type="A"> 有序列表                start="5"    type="I"
  <li>广东</li>        A.广东         E.广东        I.广东
  <li>福建</li>        B.福建         F.福建        II.福建   
  <li>广西</li>        C.广西         G.广西        III.广西  
</ol>
<ul type="A"> 无序列表 type="disc"    type="square" type="circle"
  <li>广东</li>        .广东         ■广东        。广东
  <li>福建</li>        .福建         ■福建        。福建   
  <li>广西</li>        .广西         ■广西        。广西  
</ul>

5.链接标签

<a href="http://www.itcast.cn">点我</a> 跳http链接
<a href="./列表标签.html">列表标签</a>  跳html页面
<a href="mailto:itcast@itcast.cn">联系我们</a>  跳邮箱
<a href="http://www.itcast.cn"><img src="image/jin.jpg"></a>  点击图片跳链接
   定义超链接
    href:指定访问资源的URL
    target:指定打开资源的方式    _self:默认值,在当前页面打开 _blank:在空白页面打开

6.块标签

没有效果,起包裹作用
<span>测试测试</span>         行内标签 内联标签  文本信息在一行展示
<div>测试测试</div>           块级标签  每个div占满一整行

7.语义化标签

html5为了提高程序的可读性,提供了一些标签
<header></header> 头标签
<footer></footer> 尾标签

8.表格标签

table:定义表格
width:宽度
border:边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离,指定为0,则会单元格的线合成一条
bgcolor:背景颜色
align:对齐方式
tr:定义行
td:定义单元格
th:定义表头单元格

<table border="1" width="50%" cellpadding="0" cellspacing="0">
 <tr>
    <th rowspan="2">第一个表格标题</th>
    <th>第二个表格标题</th> 
  </tr>
  <tr bgcolor="#00FF00">
    <td></td> 
    <td></td>
  </tr>
  <tr>
    <td></td> 
    <td colspan="2"></td> 占俩列
  </tr>
</table>

9.表单标签

表单:用于采集用户输入的数据,用于和服务器进行交互
可以定义一个范围,代表采集用户数据的范围
属性:

action:指定提交数据的url
method:指定提交方式 7种,
get:请求参数会在地址栏显示||请求参数大小有限制||不安全
post:请求参数不会在地址栏显示,会封装在请求体中||请求参数大小没有限制||比较安全
表单项元素
input:可以通过type属性,改变元素展示的样式
text:文本输入框,默认值指定输入框提示信息,placeholder
password:密码输入框
radio:单选框 ,多个单选框实现单选效果,其name属性要一样||每一个单选框有value属性标识||checked指定默认值
checkbox:复选框:
select:下拉列表
textarea:文本域

表单项中的数据要想被提交,必须指定name属性

  ...
  <body>
     <form action="#" method="get">
         用户名:<input name="username" placeholder="请输入用户名"><br>
         密码:<input name="password"><br>
         性别:<input type="radio" name="gender" value="male">男
             <input type="radio" name="gender" value="female">女
        
         爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
         <input type="checkbox" name="hobby" value="java"> Java
         图片:<input type="file" name="file">
         隐藏域:<input type="hidden" name="id"> 用于提交一些信息
          <input type="submit" value="登录">
           <input type="button" value="一个按钮">
           <input type="image" src="img/reg.jpg"> 图片提交按钮
           取色器:<input type="color" name="color"> 
           生日:<input type="date" name="birthday">
                <input type="datetime-local" name="birthday">
           邮箱:<input type="email" name="email">
           年龄:<input typt="number" name="age">

           <select name="province">
             <option value="1">北京</option>
             <option value="1">广东</option>
             <option value="1" selected>汕尾</option>  默认选中selected属性
           </select>
           自我描述:
                <textarea cols="20" rows="5" name="des">  cols指定列数,每一行多少个字符,rows指定多少行</textarea>
     </form>
 </body>
  ...