分类 小白学前端 下的文章

基础知识了解

什么是网页?

网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一页,是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。

什么是HTML?

HTML译为超文本标记语言,用来制作网页的一种标签语言,自己有对应的标签,文件后缀为.HTML。

什么是浏览器

国际常用:

IE、谷歌Chrome、Edge、苹果Safar、欧朋OPera. 火狐。

谷歌最大,前端专用,使用的是webkit分支的Blink内核,
非常好用,属于二次开发的,借用别人的好处,出生于2008年。

浏览器中的浏览器内核

浏览器内核的作用:用来读取内容,整理信息。

什么是Web标准

是由W3C(万维网联盟)标准组成,包括结构HTML、表现CSS、行为JS三部分组成。

作用:


在使用不同的浏览器下保证网页内容正常统一展示,不乱不错。

Web标准的构成

标准作用
结构结构用于对网页元素进行整理和分类,主要指的是HTML
表现表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
行为行为是指网页模型的定义及交互的编写,主要指的是Javascript

第一章语法规则

1. html语法规则

所有双标签存在闭合关系,及存在双标签的开头那么它必须要有结尾

闭合标签:

由开始标签和结束标签共同组成,成对出现常见的闭合标签有<div></div><p></p>、<span></span>等。标签之间的关系可以存在并列及嵌套关系。

单标签:

指没有内容的标签,在开始标签中自带闭合标识符。常见的单标签有<img/>、<hr/>、<link/>、<meta/>、<input/>、<br/>等。


所有的标签都要包裹在一对尖扣号中 “<> ”.

大部分都要标签都要成对出现,成对出现的标签称为 “双标签”: <开始标签> </结束标签>

少部分没有结束标签的称为“单标签”:< 单标签 / >

标签关系分为:包含关系(父子关系) 和 并列关系(兄弟关系)
二、 HTML文档结构基本组成与标签关系

    <HTML>        // 最大的标签称为“根标签”  与 "<head><tile><body>" 标签为包含关系,是父亲其他是儿子关系
      <head>      // 文档头部  与<HTML>是包含关系,与<body>标签是并列关系,
         <tile>文档标题是我</tile>         // 标题标签 与<head>标签是包含关系
      </head>
      <body>     // 文档的主体   与<head>标签是并列关系,与<HTML>是包含关系
        我是整个文档的主体
      </body>
    </HTML>

三、关于vscode自动生成 HTML文档结构 的说明

   
<!DOCTYPE html>  <!--声明为HTML5文档 文档类型声明标签,告诉浏览器用那种HTML版本进行编写显示网页的-->
                 <!--不属于HTML标签,要写在HTML文档最最最顶端-->
<html lang="en">   <!--当前文档显示语言,告诉浏览器或搜索引擎以哪种语言展示网页-->
    <head>    <!--定义了HTML文档的开头部分.它们之间的内容不会在浏览器的文档窗口显示.包含了文档的元(meta)数据-->
        <meta charset="UTF-8">  <!--使用charset字符集和UTF-8万国码声明编码,全国通用不会产生乱码--> 
                          <!--设置GBK为默认编码,则你需要设置为 <meta charset="gbk">-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!--告诉IE以最高级模式渲染文档-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">   <!--移动端适配-->
        <title>css样式优先级</title>  <!--定义了网页标题,在浏览器标题栏显示-->
    </head> 
    <body>     <!--文档的主体,与<head>标签是并列关系,与<HTML>是包含关系-->
        我是整个文档的主体
    </body>
</html>

四、HTML常用标签
标签的语义就是标签的含义,用来干什么的,就是让页面结构更清晰的。

1.head标签内的常用标签

<title></title> 定义网页标题

<style></style> 定义内部样式表

<script></script> 定义JS代码或引入外部JS文件

<link/> 引入外部样式表文件

<meta/> 定义网页原信息

<base/> 页面中所有链接默认的链接目标地址
  • Meta标签介绍:
  • 元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
  • 标签位于文档的头部,不包含任何内容。
  • 提供的信息是用户不可见的。
  • meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
    1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址,注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性:主要用于描述wangye,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

base定义了所有链接的URL,使用 定义页面中所有链接默认的链接目标地址。

<base href="https://www.runoob.com/images/" target="_blank">

第二章 标签讲解

1.标题标签

当作标题使用的,依据重要递减。 特点: 文字加粗、独占一行、从重到轻。

<h1>一级标题我最大,只能有我自己,利于搜索引擎优化 </h1>

<h2> 二级标题 </h2>

<h3> 三级标题 </h3>

<h4> 四级标题 </h4>

<h5> 五级标题 </h5>

<h6> 六级标题 </h6>

2.段落标签

把文本分成若干份。 特点: 会自动换行、段与段之间有较大的空隙、每行为独占一行或多行在一起称为一段。

<p>这里写内容</p>

3.图像标签

展示图片。 特点:是单标签、其中src属性是必填属性,共6个属性,属性以 [ 键值对 ]形式:属性=“属性值” 即key=“value”

<img src="imgs/01.jpg" alt="图片未显示用我来提示" title="我是图片的标题" width="100" height="100" border="20"/>

所有属性都要写在img后面,6个属性不分先后顺序,多个属性之间用空格隔开,属性是以键值对形式:key=“value” 即:属性=“属性值 ”
属性具体细化为:

  • src=“图片名称和图片路径”
  • alt=“替换文本” 图像无法显示的时候使用文字代替
  • title="提示文本“ 鼠标悬停在图片上显示的文字
  • width=“图片宽度” 指定图片的宽度,不指定高度的时候,宽度会等比缩放,指定宽度不恰当时图片会变形,故只设置一个值即可
  • height=“图片高度” 指定图片的高度,不指定款度的时候,高度会等比缩放,指定高度不恰当时图片会变形,故只设置一个值即可
  • border=“图片边框粗细” 不需要加单位p x , 该属性文字会显示白色,不常用,在CSS中设置更好。

4.换行标签

强制换行 特点:单标签、 会另起一行、行与行之间的间距很紧密。

<br />

5.文本格式化标签

突出文字重要性。特点:都是双标签

<strong></strong> 加粗

<em></em> 倾斜

<del></del> 删除

<ins></ins> 下划线

6.水平线标签

一条横线贯通整个页面。 特点:单标签

  <hr />

7.音频标签

播放音乐。 特点:谷歌浏览器禁用自动播放音乐,需要调出播放控件方可。

<audio src="音频路径" controls loop></audio>**

属性具体细化为:

src=“音频路径”
autoplay 自动播放,但是谷歌浏览器禁用自动播放功能需要调用controls属性,完成自动播放。
controls 调用播放控件。
loop 循环播放
当属性🟰属性值的时候,就写属性就行。例:controls=“controls”

8.视频标签

播放视频。 特点:谷歌浏览器禁用自动播放音乐,需要调出播放控件方可


<video src="视频路径" controls loop muted ></video>

属性具体细化为:

src=“视频路径”
autoplay 自动播放,但是谷歌浏览器禁用自动播放功能需要调用controls属性,完成自动播放。
controls 调用播放控件。
loop 循环播放
muted 在谷歌浏览器上自动静音播放
当属性🟰属性值的时候,就写属性就行。例:controls=“controls”

9.div标签

无语义,指的就是大盒子 布局网页的。 特点:一行只能用一个盒子,独占一行。

<div> 这里可以包含任何标签 </div>

10.span标签

无语义,指的就是小盒子 布局网页的。 特点:一行内可以有多个,横着水平显示。

<span> 这里可以包含任何标签 </span>

11.超链接标签

跳转页面的 。 特点:双标签,有2个属性 ,href为必填属性,target属性默认值为self。

<a href="跳转的目标" target="打开窗口的方式"> 跳转需要的文字内容 </a>
  • href属性代表=“跳转的目标”
  • target属性代表=“打开窗口的方式”:打开窗口的方式有2个值可选:1是self代表当前窗口打开,2是_blank代表新窗口打开。

href属性的属性值将链接分类为6种:

1.外部链接: 在当前去别的地址,必须以http://开始。 ️herf="http://www.baidu.com "

2.内部链接: 网站内部页面之间的相互链接。 直接写内部链接的文件名字即可 , herf="home.html"

3.空链接: 不确定跳转目标时,用 # 代替。 herf=“#”

4.下载链接:链接的是一个文件或者压缩包,点击后会自动下载 herf=“img.zip”

5.网页元素链接:可以包裹 文字、图片、视频、音频等标签当作链接进行跳转。

6.锚点链接:快速定位到页面中的某个位置, 举例:

2个步骤:

01:在链接文本的href属性中设置属性值为#文件名, <a href="#go">去指定的位置</a>

02:找到要跳到位置的标签,在标签中添加一个 ID属性 = 刚才的名字, <h2 id="go">就跳到我这个位置来></h2>

12.HTML注释

vscode快捷键:ctrl+/ 行注释。 < !-- --> ,只给程序员自己看,代码不会显示到网页中 .。

13.表格标签

表格用于显示和展示数据的

1.表格的基本语法

<table>  //定义表格的标签
    <tr>   //表格中的每一行,必须包含在<table>标签内。
      <td> 单元格 </td>   //表格中每一行里的单元格,必须包含在<tr>标签内
  </tr>
</table>

2.表格的标签

<table>  //定义表格标签
  <caption>    // 表格的大标题 
     <h3>表格的大标题</h3>
  </caption>
  <thead> //表格头部标签
    <tr>   //行标签
           <th> 1 </th>  //表头单元格 
      <th> 2 </th> 
    </tr>
  </thead>
  <tbody>  //表格主体
    <tr>   
          <td> 单元格 </td> 
      <td> 单元格 </td>
  </tr>
  </tbody>
</table>

3.表格属性

  • align —— 表格对齐方式 left center right
  • border ——表格边框 1 或 " "
  • cellpadding ——单元边与内容之间的空白 默认1像素。
  • cellspacing—— 单元格与单元格之间的空白 默认2像素。
  • width—— 表格宽度 单位为px 或 %

4.合并单元格

三要素:

1.搞清楚跨行(垂直方向) 跨列(水平方向)

2.找到合并的单元格

3.在第一个单元格上跨行 rowspan=“合并的数量” 跨列 colspan=“合并的数量” 不要的单元格 删除掉(注释掉)

14.列表 标签

列表是用来布局的。

特点:整齐、整洁、有序。

分三类: 无序列表 / 有序列表 / 自定义列表

无序列表 <ul> <li></li> </ul>

特点:无顺序、并列的、ul只能嵌套li,但li可以潜逃任何标签,有自己的样式,实际中使用c s s设置样式。

有序列表 <ol> <li></li> </ol>

特点:有顺序、ol只能嵌套li,但li可以潜逃任何标签,有自己的样式,实际中使用c s s设置样式。

自定义列表 <dl> <dt></dt> <dd></dd> </dl>

特点:dl只能包含 dt和dd , dt和dd个数没有限制,一个d t对应多个d d可以放任何标签。

15.表单标签

HTML 表单用于收集用户的输入信息。

将表单域区域的内的内容发送到 Web 服务器。

表单域 表单元素(控件 ) 提示信息 三部分组成。

表单域

就是包含表单元素的区域。

<form> </form>表单域
    使用<form>标签包裹内的表单元素会提交给服务器。
    name是用来给表单元素起名称的,区分不同的表单元素,每个表单元素都应有自己对应的name属性。
    value 的值 要传到服务器上去的 
    action 收集的信息提交给那个文件处理

  <form action="1.php">
    姓名: <input type="text" name="username">
    <br><br>
    密码: <input type="password" name="pwd">
    <br><br>
    性别: <input type="radio" name="sex" value="man"> 男 
          <input type="radio" name="sex" value="women"> 女
    <br><br>
    <input type="submit" value="提交按钮">
  </form>

表单元素

元素分三类: input输入select下拉菜单textarea文本域

input输入 (input是个单标签。)

<input type=" ” name=" " > 收集用户信息的。
  • 有type|name|valve|checked|maxlength|label属性
  • type属性有10个属性值
  • text 用户输入文本框的,默认20个字符。
  • password 用户输入密码框,默认字符被掩码。
  • placeholder 占位符,提示用户输入内容的文本。
  • radio 单选按钮。
  • checkbok 多选按钮,属性值:checked 默认选中。
  • submit 提交按钮,把表单域form中表单元素里面的值提交给后台服务器。同时可以通过value属性设置 提交按钮的name。
  • reset 重置按钮,点击后恢复表单默认值。
  • button 普通按钮,配合j s的点击事件使用 。
  • file 文件上传 属性值:multiple多文件选择 。
  • hidden 隐藏输入字段的。
  • image 图像格式的提交按钮。
  • name属性 表示input表单元素的名字,使用多选或者单选元素时所以的name的属性值要统一,才可以实现多选一,属性值用户自定义,value值可以不相同(只在单选和多选值name值要一致)。
  • value属性表示input表单元素的默认值, 属性值用户自定义(只在文本框中有值),要传到服务器上的。
  • checked属性 表示input表单元素首次加载默认选中,属性值只有一个为checked
  • maxlength属性 表示输入字段最大长度,属性值必须为正整数,用户最多输入几个字符。

label标注标签,不属于表单标签,但是常和input标签一起使用,会扩大点击范围浏览器会自动对焦,增强用户体验。

使用方法①:

1.将文字使用

select标签在网页中提供多个选择项的下拉菜单表单控件,是个双标签。

<form>
  <select>  
    <option>上海</option>  
    <option selected=“selected” >北京</option>  
    <option>深圳</option>  
    </select>
</form>

使用规则:

select标签中至少包含一个标签
在option标签中添加 属性 selected=“selected” 表示默认选中
要包含在form表单域中
3.textarea文本域在网页中提供可输入多行文本的表单控件,常用做留言板等

​ 有两个属性 cols=“一行字内的个数”与rows=“行数”

​ 也要包含在form表单域中

代码演示:

<form>
  <textarea cols="100" rows="10">我是默认的提示文字信息</textarea>
</form>

使用规则:

右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置