欢迎光临
我的个人博客网站

前端基础——HTML(二)


HTML标签

  • 标题标签<h1>、<h2>、<h3>、<h4>,标题标签之间是不能嵌套的,下一级标题与上级标题之间通过同级

    关于书写,下级标题解释说明的是前面距离最近的上一级标题

  • 权重
    <h1>在整个HTML中的权重非常高,内部应该html中最重要的内容。<h1>权重大于<h2>
    如果一个页面出现多个<h1>,反而降低权重,往往会约定,一个页面出现一个<h1>就够了。

换行标签

<br/> (breaking)标签作用是换行,是一个单标签
<p>不同的是,<br>没有建立新的段落的语义,只是简单的进行强制换行<br>
这是br换行标签使用<br>

段落标签

 一对<p></p>标签的内部元素为一个完整的段落<br>  <p>这是标签的使用emmmm</p>  <p>这是标签的使用emmmm</p>  <p>这是标签的使用emmmm</p> 
  • 文本格式化的标签均为双标签,且文本级标签内部只能写文字

    标签             描述  b             定义粗体文本,bold  big           定义大写字体  em            定义着重文字,emphasis,自带斜体效果  i             定义斜体字,italic  small         定义小号字  strong        定义加重语气,自带加粗效果  sub           定义下标字,subscript  sup           定义上标字,suprscript  ins           定义插入字,自带下划线效果,insert  del           定义删除字,delete  s             不赞成使用,使用del代替就可以了  strike        不赞成使用,用del就好    u             定义下划线,不赞成使用,后期让css添加样式即可 

图像标签

  • <img>标签进行定义,在指定的位置插入一张图片,是一个单标签
  • <img>常用属性展示,通过属性进行相关的图像设置
代码示例: <img src="picture.ipg" border="1" alt="图片1">     属性名            描述    src          表示图片的路径    width        表示图片的宽度    height       表示图片的高度    border       边框属性,可以设置边框的粗细    title        设置提示文本    alt          设置图像没有找到时候的替换文本 
  • 引入图像需要填写路径,这里路径分为相对路径、绝对路径、相对路径
  • 相对路径查找文件时,需要从HTML文件本身出发,根据相对位置进行查找,包含三种方向:
  • 同级查找:当目标文件与和HTML文件位于同一级,直接写 文件名.后缀

    <img src="picture.jpg">

  • 子集查找:目标文件在与HTML文件同一级的文件夹里面,这时就需要先找文件夹的名称,
    然后通过关闭符号/进入文件夹查找里面的文件

    <img src="img/picture.jpg">

  • 上级查找:目标文件在HTML文件所在的文件夹的更上一级,需要跳出当前文件夹到上一级,路径则利用

        &nbsp ../表示跳出一级,若跳出多级,写多次../ 直到找到文件

  • 绝对路径
  • 绝对路径查找文件时,不需要从和和HTML文件出发,直接从电脑的盘符出发查找,或者使用网址形式查找
  • 盘符查找: <img src="C:UsersxiaomiDesktoppicture.jpg">
  • 网址形式:<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2443910753,1558982167&fm=26&gp=0.jpg">
  • 缺点:盘符出发的路径不可移动,不可移植
    若路径中有中文,易出错

音频控制条属性

  • 音频加载后不会自动显示播放器的控制条,设置controls属性值为conntrols即可

    <audio src=""music.mp3" controls="controls">

视频标签

  • <video>是双标签,支持的格式.mp4、.ogg、.webm
    设置方法与音频类似

    <video src="video.mp4" controls="controls"><video>

超级链接标签

  • a 全称anchor,锚的意思,为双标签,<a>标签在指定的位置添加链接,提供用户进行点击和跳转
  • <a>标签可以实现两种跳转:跨页面跳转、页面内跳转
  • herf超文本引用,用于规定链接的目标地址

    属性值:链接目标的路径地址,可以使用相对路径或网址形式的绝对路径

  • targte属性
    可以定义被链接的文档在何处跳转显示
  属性值             描述   _blank       在新的窗口打开链接   _self        默认,在相同的框架中打开被链接文档  _parent      在父级框架集中打开被链接文档   _top         在整个窗口中打开被链接文档   framename    在指定的框架中打开被链接文档 

无序列表标签

  • 无序列表需要两个标签参与,<ul><li>
  • ul:定义一个无序列表的大结构
  • li:列表项,定义的是无序列表内的某一项
  • <ul>、<li>是嵌套关系,快捷键ul>li
  • 注意:
  • <ul>内部只能嵌套<li><li>标签不能脱离<ul>单独书写
  • <li>标签是经典的容器级标签,内部可以放置任意内容
  • 无序列表的作用只是搭建列表结构,没有添加样式前缀的功能,样式是由css负责

有序列表标签

  • 有序列表需要两个标签参与,<ol><li>
  • <ol>定义一个有序的列表的大结构
  • <li>定义的是有序列表的每一项,<ol><li>是嵌套关系,快捷键:ol>li
  • 注意:
  • <ol>内部只能嵌套<li><li>标签不能脱离<ol>单独书写
  • <li>标签是经典的容器级标签,内部可以放置任意内容
  • 有序列表的列表项<li>之间,存在顺序先后之分

定义列表标签

  • 自定义列表不仅仅是一列项目,而是项目及其注释的组合
  • <dl>、<dt>、<dd>组成
  • dl:定义一个自定义列表的大结构
  • dt:定义自定义列表中的一个主题或术语
  • dd:定义解释项,表示描述或解释前面的定义主题
  • <dl>内部只能嵌套<dt>、<dd>,<dt>和<dd>是同级关系
代码示例:             <dl>          <dt>主题<dt>          <dd>解释<dd>       </dl>  注意:1.<dl>内部只能嵌套<dt>和<dd>,<dt>和<dd>标签不能脱离<dl>单独书写        2.<dl>内部可以存放多组dt和dd,每个dd解释说明的搜索前面距离最近的一个dt        3.每个dt后面可以有多个dd或者0个        4.后期添加css样式,最好每个dl添加一组dt和dd 

布局标签

  • <div><span>标签常用作布局工具,俗称为盒子
  • <div> 俗称大盒子,双标签,容器级标签,多用于划分网页区域,进行结构布局。
  • <span> 俗称小盒子,双标签,容器级标签,不改变整体效果的情况下,可以辅助进行局部调整

HTML基本语法–表格基础

  • <table> border —- 边框属性值
  • 设置border表格的单元格之间有默认的空隙,会导致双边框线
  • border-collapse:collapse—–表示边框塌陷(单边框线)
 样式css   <style type="text/css">        table      {      border-collapse:collapse;      }        table, td, th      {      border:1px solid black;      }        </style> 

……………………………………………………………………………………………………………………………………………………………………………………

  表格table        <table>            <th colspan="2">这是表头</th>         <tr>             <td>第一行第一列</td>             <td>第一行第二列</td>                       </tr>          <tr>             <td>第二行第一列</td>             <td rowspan="2">第二行第二列</td>                        </tr>          <tr>              <td>第三行第一列</td>           </tr>           <tr>              <td colspan=”2“>第四行第一列</td>           </tr>         </table> 

rowspan:跨行合并,上下的合并

colspan:跨列合并,左右的合并

HTML基本语法–表单元素

  • 表单的作用就是收集数据;由表单元素和表单的控件元素组成;其功能就是负责显示、收集、提交数据到服务器上

  • <form>标签通过对应属性规定提交数据的方法和提交位置

    属性名 属性值 描述
    action url 指定接收并处理表单数据的服务器程序的url地址
    method get/post 用于设置表单数据的提交方式
    name 自定义名称 规定表单的名称

  • <form action="xxx.php" method="post/get" name="message">表单区域<from>

<input>标签属性

     属性名      属性值        描述                 text        单行文本框                 password    密码文本框                 radio       单选框                 submit      提交按钮      type       reset       重置按钮                 button      按钮                 image       图像形式按钮,src="../../地址"                 file        定义输入字段和‘浏览’按钮,上传文件                             multiple属性决定是否可以选则多个文件                 checkbox    复选框,默认选中checked                 hidden      定义隐藏的输入字段      name                   定义控件的名称      value                  定义控件的默认文本      size       数字         定义控件的宽度      checked    checked     定义选框控件的默认被选中项      maxlength  数字         定义允许输入的最多字符数 

<textarea>文本域

  • 双标签,多行文本区域
  • rows:行,
  • cols:列,每一行显示的最大字节数

    <textarea rows="10" cols="30">这是一个文本框</textarea>

下拉菜单<select>的分组管理

  • 分组管理使用<optgroup>标签对选项进行分组,<optroup>是一个双标签,该标签也可以设置一个label属性,

  • 表示给这一组选项添加一个分组标签名,分组标签<optgroup>是不能被点击选择的

    代码示例: <select>   <optgroup label="陕西">        <option>西安</option>        <option>安康</option>   </optgroup>   <optgroup label="四川">        <option>成都</option>        <option>绵阳</option>     </optgroup>       </select> 

label标签

  • label标签主要作用就是帮助表单元素定义标注,将<label>与表单控件进行绑定后,

  • 用户点击<label>内的提示内容是时,浏览器会自动将焦点转到和标签相关的表单控件上

     绑定方法一:         <input type="checkbox" name="class" id="classType"/>     <label for="Chinese">语文</label>   绑定服务二:     <label><input type="radio" name"sex">女</label>     简化绑定
赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端基础——HTML(二)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏