HTML基础

HTML基础

目录

  • HTML基础
    • 基础概念和语法
    • 标签
        • 注释`<--! -->`
        • 标题`h1-h6`
        • 段落`p`
        • 换行`
          `
        • 格式化
        • 图片`img`
        • 超链接`a`
        • 表格`table`
        • 列表`ul li` 、`ol li`
        • 表单`form`

基础概念和语法

HTML结构由注释<--! -->,根元素,头,主体以及其他部分组成

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
   <h1>你好h1>
div>
body>
html>

标签

注释<--! -->

注释信息不会作为代码执行

<body>
    hello world    
body>

结果:

image-20240201151548048

标题h1-h6
<body>
<h1>这是h1h1>
<h2>这是h2h2>
<h3>这是h3h3>
<h4>这是h4h4>
<h5>这是h5h5>
<h6>这是h6h6>
body>

结果:

HTML基础_第1张图片

段落p
<body>
<p>你好p>
body>

结果:

image-20240201153302937

换行
<body>
<p><br>p>
body>

结果:

image-20240201153338347

格式化
  • 加粗 strong 标签 和 b 标签
  • 倾斜 em 标签 和 i 标签
  • 删除线 del 标签 和 s 标签
  • 下划线 ins 标签 和 u 标签
<body>
<p><strong>加粗strong><b>加粗b>p>
<p><em>倾斜em><i>倾斜i>p>
<p><del>删除线del><s>删除线s>p>
<p><ins>下划线ins><u>下划线u>p>
body>

结果:

HTML基础_第2张图片

图片img

sec:表示这个图片的路径

alt:当图像无法显示时显示替代文本

width/height:图片的宽和高

可以使用相对路径和绝对路径

<body>
相对路径
<img src="pyimg.png" alt="" width="480" height="270">
<br>
绝对路径
<img src="D:\Users\Desktop\LnhStudy\前端\pyimg.png" alt="显示失败" width="480" height="270">
<br>

结果:

HTML基础_第3张图片

超链接a
<body>
<a href="https://www.baidu.com">点我进入百度a>
body>

结果:

image-20240201155434638

表格table
  • table 标签: 表示整个表格

  • tr: 表示表格的一行

  • td: 表示一个单元格

  • th: 表示表头单元格. 会居中加粗

  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

  • tbody: 表格得到主体区域.

  • table 包含 tr , tr 包含 td

<body>
<table border="1"> 
    <thead> 
    <th>姓名th>
    <th>年龄th>
    <th>性别th>
    thead>

    <tbody> 
    <tr>    
        <td>张三td><td>18td><td>td>
    tr>

    <tr>    
        <td>李四td><td>21td><td>td>
    tr>

    <tr>    
        <td>陈五td><td>22td><td>td>
    tr>
    tbody>
table>
body>

结果:

HTML基础_第4张图片

列表ul liol li
<body>
<h2>无序列表h2>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>
<h2>有序列表h2>
    <ol>
        <li>1li>
        <li>2li>
        <li>3li>
    ol>
body>

结果:

HTML基础_第5张图片

表单form

action表示将数据传入何处,method为请求方式

<form action="https://www.baidu.com" method="get">
        
    form>
  • text:文本信息
  • password:密码
  • radio:单选框
  • checkbox:复选框
  • file:文件标签
  • date:日期
  • color:颜色
  • select:下拉菜单
  • submit:提交按钮
  • reset:重置按钮
  • button:自定义按钮
<form action="https://www.baidu.com"
      method="get">
    姓名<input type="text"><br>
    密码<input type="password"><br>
    性别 <input type="radio" name="sex" value=""><input type="radio" name="sex" value=""><input type="radio" name="sex" value="保密">保密 <br>
    爱好 <input type="checkbox">听歌
    <input type="checkbox">看书
    <input type="checkbox">跑步 <br>
    城市 <select>
    <option>北京option> 
    <option>上海option>
    <option>深圳option>
select>
    头像 <input type="file"> <br>
    日期 <input type="date"> <br>
    颜色 <input type="color">
    <input type="reset">
    <input type="submit">
    <input type="button" value="自定义按钮">
form>

结果:

HTML基础_第6张图片

你可能感兴趣的:(前端,html,前端)