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:\Users\xiaomi\Desktop\picture.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>
    简化绑定

前端基础——HTML(二)的更多相关文章

  1. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  2. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  3. html css 前端基础 学习方法及经验分享

    前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...

  4. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  5. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  6. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  7. tableview前端基础设计(初级版)

    tableView前端基础设计 实现的最终效果 操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...

  8. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  9. 前端基础之BOM和DOM day52

    前端基础之BOM和DOM   前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...

随机推荐

  1. 如何在项目中使用composer的相关功能

    最近要在公司的magento项目中引用第三方库,用了composer来进行管理,composer还是非常方便的: 1.在应用的根目录下添加文件:composer.json {    "nam ...

  2. java安全编码指南之:输入校验

    目录 简介 在字符串标准化之后进行校验 注意不可信字符串的格式化 小心使用Runtime.exec() 正则表达式的匹配 简介 为了保证java程序的安全,任何外部用户的输入我们都认为是可能有恶意攻击 ...

  3. B树【Balanced-Tree】

    一.引言 B树是二叉平衡树的一个变种,在学习之前,我们先了解一下二分法,二叉树的一些相关的基本概念,有助于我们更好的理解B树~ 二.二叉树 定义:二叉树即二叉平衡树 意义:通过二分法来进行元素查找,时 ...

  4. linux目录的含义

    /bin (binary)存放linux系统必备执行的命令. /boot存放linux的启动文件和内核 /cdrom存放光驱文件系统的目录,刚安装系统时此文件夹是空的. /dev device存放li ...

  5. ZooKeeper 【不仅仅是注册中心,你还知道有哪些?】

    什么是 ZooKeeper Apache ZooKeeper 是一个开源的实现高可用的分布式协调服务器.ZooKeeper是一种集中式服务,用于维护配置信息,域名服务,提供分布式同步和集群管理.所有这 ...

  6. spring aop 源码分析(三) @Scope注解创建代理对象

    一.源码环境的搭建: @Component @Scope(scopeName = ConfigurableBeanFactory.SCOPE_SINGLETON,proxyMode = ScopedP ...

  7. Python 3 入门,看这篇就够了(超全整理)

    史上最全Python资料汇总(长期更新).隔壁小孩都馋哭了 --- 点击领取 今天和大家分享的内容是Python入门干货,文章很长. 简介 Python 是一种高层次的结合了解释性.编译性.互动性和面 ...

  8. OpenCV 中Scalar

    参考来源: 1.https://blog.csdn.net/Eroslol/article/details/52525541 2.https://www.cnblogs.com/hustdc/p/68 ...

  9. Win10安装MongoDB

    1. 下载安装包:mongodb-win32-x86_64-2012plus-4.2.7-signed.msi 2. 安装,注意选择安装目录 3. 新建配置文件mongo.conf: ​``` #数据 ...

  10. PHP添加新扩展包的步骤

    1.找到PHP解压包,将   php.ini-development   这个文件复制一份,并修改后缀名为  .ini 2.将这个文件打开,将此处注释解开, 3.配置你扩展的该包的位置 4.如果显示不 ...