ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端三件套——HTML基础知识笔记

2022-07-10 18:04:33  阅读:158  来源: 互联网

标签:HTML 定义 标签 默认 基础知识 三件套 文档 type 属性


HTML

关系

嵌套关系----父子关系
并列关系----兄弟关系

创建

创建:后缀名为.html

创建基本结构:英文状态键! ------enter

<!DOCTYPE html>  
<html lang="en">  //定义html的语言
<head>  //定义关于文档的信息  
<meta charset="UTF-8">  //定义文档的编码格式
<meta name="viewport" content="width=device-width,initial-scale=1.0"> //定义视口信息
<title>Document</title>  //定义文档标题
<link rel="#" href="#">  // 定义文档与外部资源之间的关系
<script src="#"></script> //定义客户端脚本
<style> </style>   //定义文档的样式信息
</head>
<body>
	
</body>
</html>

语法

  • 注释: <!-------html注释内容------>
  • 标签(标记): 尖括号 括起来的关键词
  • 单标签:
  • 双标签:[内容]
  • 元素:<htm 属性名=’属性值’>[内容]

常用标签

  • DIV标签 无语义化 盒子
 <div>

 </div>   

宽度默认撑满整个父级元素  高度默认自适应 默认垂直显示 默认背景色为透明
  • img标签: 图片标签

    <img src="图片路径" alt="替换文本">
    	特点:换行或空格会被解析;默认水平排列,一行排不下 自动换行
    src属性:属性值可以是绝对地址(带着协议的完整路径)、相对路径(下一级目录 image/pic1.jpg 打开images文件夹,找到其中的pic.jpg)
    alt属性:替换文本
    
  • ul标签:无序列表,第一级子元素只能是li

    <ul>  列表容器
        <li>item1</li>  列表项
        <li>item2</li>
        <li>item3</li>
    </ul>
    
    特点: 自带列表符 自带margin 自带padding 默认宽度撑满整个父元素、默认高度有内容撑开 独立成行(垂直显示)
    
    ul {
      margin: 0 // 去掉 自带外间距 属性值为0 后面的单位可以省略
      padding: 0 // 去掉自带内填充
    }
    li {
    list-style: none;  ///去掉自带列表符
    }
    
  • ol标签 有序列表

  <ol >
        <li>宝宝</li>
        <li>版本</li>
        <li>尺寸</li>
    </ol>
  • dl标签 自定义列表
 <dl>
        <dt>包包</dt>
        <dt>一个物体</dt>
        <dt>1</dt>
        <dt>一个数字</dt>
    </dl>
  • h系列标签 标题标签

    <h1>
        文字
    </h1>
    特点:自带margin属性 默认撑开整个父元素 默认高度由内容撑开 独立成行 自带文字加粗效果
    
  • p标签 段落标签

    <p>
        文字
    </p>
    特点: 自带margin 默认宽度撑满整个父元素 默认高度由内容撑开 独立成行
    
  • span标签
    HTML 元素是内联元素,可用作文本的容器。与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。
    来组合行内元素,以便通过样式来格式化它们

<p class="tip"><span>提示:</span>... ... ...</p>

HTML文本格式化

双标签
<u>     定义下划线
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。下划线
<del>	定义删除字。
<abbr>	定义缩写。 The <abbr title="hello world ">HW</abbr> is NB
<acronym>	定义首字母缩写。<acronym title="World Wide Web">WWW</acronym>
<address>	定义地址。
<bdo>	定义文字方向。<bdo dir="rtl">Here is some text</bdo>
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。
<pre>  对空行和 空格进行控制

单标签
<hr> 水平分割线
<br> 换行

HTML超链接

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
我们通过使用 标签在 HTML 中创建链接。

<p><a href="#C4">查看 Chapter 4</a></p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
  • HTML超链接——target属性
    使用target属性可以定义被链接的文档在何处显示
    例如下面target可以从新窗口打开文档:
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

HTML的表单元素

  • 表单
    1.作用:主要负责数据采集功能,例如用户提交个人信息、账号密码等
    2.构成
    * 最外侧容器:表单标签form
    输入框--单行输入框input
    多行输入框/文本域textarea
    3.属性
    1)type属性
    作用:控制控件类型
    2)单选/多选按钮的默认选中checked属性
    语法:checked="checked"或者checked
    4.常见的type控件类型
    1)type="text"普通文本
    2)type="password"密码类型,输入的内容不会明文显示,而是显示为实心圆点或者**
    3)type="number"纯数字类型
    4)type="tel"手机号码
    5)type="file"文件类型
    6)type="radio"单选按钮
    7)type="checkbox"多选按钮 注意:多选需要保证同组name值的一致
    5.单选互斥
    1)给同组的单选按钮添加name值
    2)保证同组互斥元素的name值一致
   <form>
        用户名:<input type="text" name="username"><br>
        密码:<input type="password"><br>
        年龄:<input type="number"><br>
        手机号:<input type="tel"><br>
        头像:<input type="file"><br>
        <!-- 快速编辑多行Ctrl+D,可以选中同样的元素,从而快速编辑 -->
        性别:
            男<input type="radio" name="sex" checked="checked">
            女<input type="radio" name="sex">
            未知<input type="radio" name="sex">
        <br>
        <!-- 注意:多选需要保证同组name值的一致 -->
        爱好:
            游泳<input type="checkbox" name="hobbies" id="">
            爬山<input type="checkbox" name="hobbies" id="">
            唱歌<input type="checkbox" name="hobbies" id="">
            跳舞<input type="checkbox" name="hobbies" id="">
            rap<input type="checkbox" name="hobbies" id="">
            篮球<input type="checkbox" name="hobbies" id="">
        <br>
        个人评价:
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        普通按钮:<input type="button"><br>
        提交按钮:<input type="submit"><br>
        重置按钮:<input type="reset"><br>
    </form>

表格属性

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义列)。字母 td 指表格数据,即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
 <table border="1" width="600" height="300">
        <caption>
            <h3>优秀学生信息表</h3>
        </caption> <!-- 定义表格标题 -->
        <tr>  ///tr标签 定义行
            <th>年级</th> <!-- th是表格首行单元格 表头 -->
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高一</td> <!-- rowspan 跨行居中 -->
            <td>阳光</td> <!-- td表格单元格 -->
            <td>170</td>  ///td标签定义列 有几个td就有几列
            <td>三年二班</td>
        </tr>
        <tr>
            <td>林娜</td>
            <td>175</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td> <!-- colspan跨列居中 -->
        </tr>
    </table>
<table border="1" cellpadding="100">
    </table>  ///cellpadding设置单元格边距
如果向表格添加图像或颜色要在Table之下,单元格要在对应的td属性内定义
表格单元格内容的排列方式:align;

标签:HTML,定义,标签,默认,基础知识,三件套,文档,type,属性
来源: https://www.cnblogs.com/miracle520/p/16463371.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有