Opritalxy
Opritalxy

前端入门基础

一、HTML简介

1.web标准

Web标准：网页主要由结构、表现和行为三部分组成

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

2.什么是HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

3.HTML基本结构

标签名 定义 说明
HTML标签 页面中最大的标签，即根标签
文档头部 注意在head标签中必须要设置的标签是title
文档标题 让页面拥有一个属于自己的网页标题
文档主体 元素包含文档的所有内容 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今天是个好日子title>
head>
<body>
    遇到困难睡大觉
body>
html>

 文档类型声明标签 告诉这个页面采用html5版本来显示页面
 告诉浏览器或者搜索引擎这是一个英文网站，本页面采用英文来显示
 采用UTF-8保存文字，如果不写就写乱码

二、HTML常用标签

1.HTML标签参考手册*

HTML 标签参考手册 (w3school.com.cn)

2.注释

注释：在开始标签中有一个惊叹号，但是结束标签中没有。

浏览器不会显示注释，但是能够帮助记录 HTML 文档。

CSS注释与HTML注释不同

/* CSS注释 */

3.基础标签

标签 说明
< h1 > - < h6 > 定义标题
< p > 定义段落
< br / > 换行

段落标签和换行标签：

  1. 文本会根据浏览器大小自动换行

  2. 段落和段落之间有空隙

  3. 换行标签只是简单地开始新的一行，段落之间会插入一些垂直地距离

4.文本格式化标签

标签 描述
< b > 定义粗体文本。
< big > 定义大号字。
< em > 定义着重文字。
< i > 定义斜体字。
< small > 定义小号字。
< strong > 定义加重语气。
< sub > 定义下标字。
< sup> 定义上标字。
< ins > 定义插入字。
< del > 定义删除字。

5.盒子标签

< div >与< span >标签没有语义，相当于一个装载内容的盒子

div单独占据一行，span在一行可以有多个

标签 描述
< div > 定义文档中的分区或节（division/section）
< span > 定义span，用来组合文档中的行内元素

6.图像标签

  • src：必填属性，用于指定图像文件的路径和文件名

  • alt：替换文本属性，当图片加载不出来的时候，就会出现替换文本文字

  • title：悬浮文字，鼠标放在图片上显示的文字

  • width：设置图像的宽度

  • height：设置图像的高度

  • border：设置图像的边框粗细

注：

  1. 图像的属性必须写在标签名之后

  2. 属性不分先后顺序，属性之间用空格隔开

  3. 采用键值对的形式，属性=属性值

1.相对路径：以引用文件所在位置为参考基础，而建立出的目录文件

简单来说，就是图片相当于HTML页面的位置

前端入门基础_第1张图片

2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

如：D:\前端\图片.jpg

7.超链接标签

<a href="URL" target="_self">链接文字a>

  • href：必需属性，指定连接的URL地址

  • target：指定打开方式，默认当前页面打开，_blank表示从新的页面打开链接资源

  • name：规定锚的名称，当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了

<body>
    <a href="#我的命名">点击这里进行跳转a>
    <br>
    <br>
    <a name="我的命名">成功跳转到这里a>
body>

链接分类：

  1. 外部链接：从一个网站跳转到另一个网站，以http://www开头

  2. 内部链接：网站内部页面之间相互链接，如index.html，路径为同一级

  3. 空链接：#，表示链接为空

  4. 下载链接：href里面是一个文件或者压缩包

  5. 网页元素链接：在网页中的各种网页元素，如文本、图像、白哦个、音频、视频等都可以添加超链接

  6. 锚点链接：点击链接，可以快速定位到页面的某个位置，需要使用name属性

8.表格标签

表格的基本语法

 <table>
        <tr>
            <th>表头单元格内的文字td>
        tr>
        <tr>
           <td>普通单元格内的文字td>
           <td>普通单元格内的文字td>
        tr>
    table>
  1. 是定义表格的标签
    3. 用于定义表格中的行
    4. 用于定义表格中的单元格，有几个单元格该行就有几列
    		5. 用于定义表头单元格，常用于表格第一行，表头单元格里面的文字会加粗居中显示

    合并单元格

    • 跨行合并（竖向）：rowspan=‘合并单元格的个数’ 最上侧单元格为目标单元格，写合并代码
    • 跨列合并（横向）：colspan=‘合并单元格的个数’ 最左侧单元格为目标单元格，写合并代码

    9.表单标签

    表单用于收集信息

    在网页中，也需要跟用户进行交互，收集用户资料，这时候就需要表单

    前端入门基础_第2张图片

    表单域

    <form action="URL" method="提交方式" name="表单域名称">
    密码：<input type="password">
form>

    from：定义表单域，以实现用户信息的收集和传递

    • action：用于指定接受和处理数据的服务器URL地址
    • method：设置表单数据提交方式，其取值为get或post（get效率高但不安全、请求大小有限，post安全、请求大小无限但效率低）
    • name：指定表单名称，以区分同一个页面中的多个表单域

    表单控件

    1.input输入表单元素

    <input type="" />
    • < input / >标签为单标签
    • type属性指定不同的控件类型
    属性值 描述
    button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
    checkbox 定义复选框
    file 定义输入字段和“浏览”按钮，供文件上传
    hidden 定义隐藏的输入字段
    image 定义图像形式的提交按钮
    password 定义密码字段。该字段中的字符被掩码
    radio 定义单选按钮
    reset 定义重置按钮，清除表单中所有数据
    submit 定义提交按钮，把表单数据发送到服务器
    text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

    input其它属性

    1. name：由用户自定义，定义Input属性的名称

    2. value:规定input元素的值，传递给服务器

    3. checked：规定input元素首次加载时被选中，使用语法为checked="checked"

    4. maxlength：规定输入字段中的字符的最大长度

    注：

    • name和value是每个表单元素的属性值，主要给后台人员使用

    • name表单元素的名字，要求单选框和复选框要有相同的name值，表示同一组

    • checked属性主要针对于单选按钮和复选框 一打开页面 就可以默认选中某个表单元素

    label标签

    使用场景：label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

    <label for="sex">男label>
<input type="radio" name="sex" id="sex">

    核心：label标签的for属性应该与相关元素的id属性相同

    2.select下拉表单元素

    <select>
    <option>北京option>
    <option>浙江option>
select>
    • select：定义下拉列表
    • option：定义下拉列表项

    在option中定义 selected="selected" 当前选项即为默认选项

    3.textarea文本域元素

    使用场景：当用户输入内容较多的情况下，就不能使用文本框text标签了，常见于留言板、评论

    <textarea  cols="50" rows="10">textarea>

    注：

    (1)通过textarea标签可以创建多行文本输入框

    (2)cols=“每行中的字符数” rows=“显示的行数” 但我们实际开发中都是用CSS来改变大小

    10.列表标签

    < ol > 定义有序列表。
    < ul > 定义无序列表。
    < li > 定义列表项。
    < dl > 定义定义列表。
    < dt > 定义定义项目。
    < dd > 定义定义的描述。 
    <ul>
    <li>nikoli>
    <li>hunterli>
    <li>monesyli>
ul>

    无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

    同样，有序列表也是一列项目，列表项目使用数字进行标记。

    三、 CSS基础

    1.什么是CSS

    CSS用于页面美化、页面布局。

    • CSS 指的是层叠样式表* (Cascading Style Sheets)
    • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
    • CSS 节省了大量工作。它可以同时控制多张网页的布局
    • 外部样式表存储在 CSS 文件中，只需一个文件就可以改变整个网站的外观

    2.选择器

    CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

    我们可以将 CSS 选择器分为五类：

    • 简单选择器（根据名称、id、类来选取元素）

    • 组合器选择器（根据它们之间的特定关系来选取元素）

    • 伪类选择器（根据特定状态选取元素）

    • 伪元素选择器（选取元素的一部分并设置其样式）

    • 属性选择器（根据属性或属性值来选取元素）

    • 标签选择器：选择一个标签改变属性

    • 类选择器：创建一个类的样式，开头为.类名，调用时class="类名"

    <head>
   <style>
   	 .classname{
    	   color:red; 
   	 }
	style> 
head>

<body>
    <p class="classname" >
        今天是个好日子
    p>
body>
    • id选择器：通过#来定义，只能被唯一调用
    • 通配符选择器：通过*来选择所有标签，自动调用

    3.CSS语法及使用

    前端入门基础_第3张图片

    三种使用CSS的方法

    （1）外部样式表：通过使用外部样式表，只需要一个文件就可以改变整个网站的外观。

    ​ 每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。外部 .css 文件不应包含任何 HTML 标签。

    <head>
    <link rel="stylesheet" href="name.css">
head>

    （2）内部样式表：如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的