• HTML基础标签

    目录

    1.HTML作用

    2.HTML 文件基本结构

    3.标签层次结构

     4.HTML常见标签

    标题标签: h1-h6

    段落标签: p

    换行标签: br

    格式化标签

    图片标签: img

    格式化标签

    示例代码：

    img 标签的其他属性

    超链接标签: a

    链接的几种形式:

    表格标签

    列表标签

    表单标签

    input 标签

    label 标签

    select 标签

    textarea 标签

    无语义标签: div & span

    1.HTML作用

    在报纸中可以看到的文档表现形式，用HTML都可以表示出来（排版）

    2.HTML 文件基本结构

    MDNHTML  W3Cschool

    • html 标签是整个 html 文件的根标签(最顶层标签)
    • head 标签中写页面的属性.
    • body 标签中写的是页面上显示的内容
    • title 标签中写的是页面的标题.

    3.标签层次结构

    • 父子关系
    • 兄弟关系 
    1. <html>
    2.    <head>
    3.        <title>第一个页面title>
    4.    head>
    5.    <body>
    6.       hello world
    7.    body>
    8. html>
    其中 :
    • head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
    • title 是 head 的子标签. head 是 title 的父标签.
    • head 和 body 之间是兄弟关系.
    标签之间的结构关系, 构成了一个 DOM 树

     4.HTML常见标签

    标题标签: h1-h6

    有六个, 从 h1 - h6. 数字越大, 则字体越小. 
    1.     <h1>这是一个标题h1h1>
    2.     <h2>这是一个标题h2h2>
    3.     <h3>这是一个标题h3h3>
    4.     <h4>这是一个标题h4h4>
    5.     <h5>这是一个标题h5h5>

    段落标签: p

    • p 标签之间存在一个空隙
    • 当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
    • 自动根据浏览器宽度来决定排版.
    • html 内容首尾处的换行, 空格均无效.
    • 在 html 中文字之间输入的多个空格只相当于一个空格.
    • html 中直接输入换行不会真的换行, 而是相当于一个空格.

    换行标签: br

    • br 是一个单标签(不需要结束标签)
    • br 标签不像 p 标签那样带有一个很大的空隙.

    • 是规范写法. 不建议写成

    格式化标签

    • 加粗: strong 标签 和 b 标签
    • 倾斜: em 标签 和 i 标签
    • 删除线: del 标签 和 s 标签
    • 下划线: ins 标签 和 u 标签

    行级标签，块级标签

    图片标签: img

    img 标签必须带有 src 属性. 表示图片的路径
    此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中 . 
    <img src="相对路径">

    格式化标签

    • 加粗 : strong 标签 和 b 标签
    • 倾斜 : em 标签 和 i 标签
    • 删除线 : del 标签 和 s 标签
    • 下划线 : ins 标签 和 u 标签

    示例代码：

    1.         strong 加粗
    2.  
    3.         b 加粗
    4.  
    5.         倾斜
    6.  
    7.         倾斜
    8.  
    9.         删除线
    10.  
    11.         删除线
    12.  
    13.         下划线
    14.  
    15.         下划线

    • img 标签的其他属性

    • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
    • title: 提示文本. 鼠标放到图片上, 就会有提示.
    • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
    • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

    超链接标签: a

    href: 必须具备, 表示点击后会跳转到哪个页面.
    target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

    链接的几种形式:

    外部链接: href 引用其他网站的地址 
    1. <img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
    2. alt="">
    内部链接: 网站内部页面之间的链接. 写相对路径即可 .
    • table 标签: 表示整个表格
    • tr: 表示表格的一行
    • td: 表示一个单元格
    • th: 表示表头单元格. 会居中加粗
    • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
    • tbody: 表格得到主体区域. 
    1. <table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
    2. height="500">
    3.     <tr>
    4.         <td>姓名td>
    5.         <td>性别td>
    6.         <td>年龄td>
    7.     tr>
    8.     <tr>
    9.         <td>张三td>
    10.         <td>男td>
    11.         <td>10td>
    12.     tr>
    13.     <tr>
    14.         <td>李四td>
    15.         <td>女td>
    16.         <td>11td>
    17.     tr>
    18. table>

    列表标签

    主要使用来布局的. 整齐好看.
    • 无序列表[重要] ul li , .
    • 有序列表[用的不多] ol li
    • 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的. 
    1. <h3>无序列表h3>
    2. <ul>
    3.     <li>咬人猫li>
    4.     <li>兔总裁li>
    5.     <li>阿叶君li>
    6. ul>
    7. <h3>有序列表h3>
    8. <ol>
    9.     <li>咬人猫li>
    10.     <li>兔总裁li>
    11.     <li>阿叶君li>
    12. ol>
    13. <h3>自定义列表h3>
    14. <dl>
    15.     <dt>我的老婆们dt>
    16.     <dd>咬人猫dd>
    17.     <dd>兔总裁dd>
    18.     <dd>阿叶君dd>
    19. dl>

    表单标签

    表单是让用户输入信息的重要途径.
    分成两个部分:
    • 表单域: 包含表单元素的区域. 重点是 form 标签.
    • 表单控件: 输入框, 提交按钮等. 重点是 input 标签

    input 标签

    各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
    • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
    • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
    • value: input 中的默认值.
    • checked: 默认被选中. (用于单选按钮和多选按钮)
    • maxlength: 设定最大长度.
    1) 文本框
    2) 密码框
    3) 单选框
    注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.
    4) 复选框 
    1. <input type="text">
    2. <input type="password">
    3. 性别: 
    4. <input type="radio" name="sex">男
    5. <input type="radio" name="sex" checked="checked">女
    6. 爱好:
    7. <input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
    8. 打游戏
    5) 普通按钮
    当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究).
    6) 提交按钮
    提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
    7) 清空按钮 
    1. <input type="button" value="我是个按钮">
    2. <input type="button" value="我是个按钮" onclick="alert('hello')">
    3. <form action="test.html">
    4.     <input type="text" name="username">
    5.     <input type="submit" value="提交">
    6. form>
    7. <form action="test.html">
    8.     <input type="text" name="username">
    9.     <input type="submit" value="提交">
    10.     <input type="reset" value="清空">
    11. form>

    label 标签

    搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
    for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的) 
    <label for="male">男label> <input id="male" type="radio" name="sex">

    select 标签

    下拉菜单
    option 中定义 selected="selected" 表示默认选中. 
    1. <select>
    2.     <option>北京option>
    3.     <option selected="selected">上海option>
    4. select>
    注意! 可以给的第一个选项, 作为默认选项 
    1. <select>
    2.     <option>--请选择年份--option>
    3.     <option>1991option>
    4.     <option>1992option>
    5.     <option>1993option>
    6.     <option>1994option>
    7.     <option>1995option>
    8. select>

    textarea 标签

    1. <textarea rows="3" cols="50">
    2.     
    3. textarea>

    无语义标签: div & span

    div 标签, division 的缩写, 含义是 分割
    span 标签, 含义是跨度
    就是两个盒子. 用于网页布局
    • div 是独占一行的, 是一个大盒子.
    • span 不独占一行, 是一个小盒子.
  • 相关阅读:
    鸿蒙架构之AOP
    Doing Homework HDU - 1074
    20_数组的常见操作
    BeanUtils.copyProperties的使用场景
    登录认证，登录校验
    Git推送和拉取Github
    里奥哈大使撰文 | 来一场云旅行吧，盘点里奥哈那些美轮美奂的酒庄～
    elementplus el-table当表格的长度大于容器的宽度导致剩下的无法显示出来
    Flink的状态一致性
    WPF —— 动画
  • 原文地址：https://blog.csdn.net/m0_57248981/article/details/130901214