day1——html基本概念梳理

布满荆棘的人生 2021-12-21 01:43 285阅读 0赞

# 前端入门day1（持续更新……） #

### 前端技术简介 ###

对于前端开发来说最核心的三个技术分别是\*\*“HTML,CSS和JavaScript”\*\*

html:全称Hyper Text Markup Language(超文本标记语言）

Css:全称Cascading Style Sheet(层叠样式表）

JavaScript:嵌入到html页面中的脚本语言，由浏览器一边浏览一边执行

对于这三者关系的理解，官方来说是“html是网页的结构，CSS是网页的外观，而JavaScript是网页的行为”我在**绿叶学习网**上看到非常形象的描述是“我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。”

### 关于初次学习的软件，hbuilder和webstorm都特别好用，目前我用的是webstorm,接下来开始详细记录html的学习过程 ###

1.1 它是什么  
HTML不是一门编程语言，而是一门描述性的标记语言。HTML最基本的语法如下：

<标签符>内容</标签符>  
一般情况下标签都是成对出现，个人感觉学习html就是不断练习熟悉记忆，直至熟练掌握各种标签的**语义**

1.2html基本结构（框架）

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    </body>
    </html>

从上面的代码中我们可以看到基本结构主要分为三个标签对，分别是`<html></html>`(告诉浏览器页面的起始）、`<head></head>`（就单词的字面意思，页头，用于定义一些特殊的内容：页面标题，定时刷新等）、`<body></body>`（网页的身体，大部分代码在这里编写）  
再加上一个文档声明  
还有网页标题(唯一的作用）： `<title></title>` 就构成了一个完整的结构  
接下来写一个非常简单的应用：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>一个简单网页</title>
    </head>
    <body>
            <p>这是一个网页</p>
    </body>
    </html>

![在这里插入图片描述][20190627211419576.png]  
1.3 一些基本常用标签  
1.3.1. meta标签——常用的name属性

keywords 网页的关键字（关键字可以是多个，而不仅仅是一个）  
description 网页的描述  
author 网页的作者  
copyright 版权信息

meta标签——http-equiv属性

主要应用为实现页面跳转，如下图：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>一个简单网页</title>
        <meta  http-equiv="refresh" content="5;url=http://www.baidu.com"/>
    </head>
    <body>
            <p>这个页面在5秒之后自动跳转到百度首页</p>
    </body>
    </html>

1.3.2 style标签  
style标签用于定义css中的样式，框架为:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			/*之后在这里补充你的样式*/
    		</style>
    	</head>
    	<body>
    	</body>
    </html>

1.3.3 script标签  
同理，用于定义javascript代码，也可以引入外部部件。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			/*之后在这里补充Javascript代码*/
    		</scrupt>
    	</head>
    	<body>
    	</body>
    </html>

1.3.4 注释符

注释的快捷键是  ctrl+shift+/ 
    浏览：alt+f2

1.3.5 标题  
标题：`h1~h6`

1.3.6  
段落——p  
1.3.7  
超链接

目标窗口：\_blank 新窗口打开  
\_parent 在原窗口打开

1.3.8  
路径：相对路径 ：从当前目录开始的  
绝对路径 ：从根目录开始的  
1.3.9 锚记 跳转至页面的不同位置

1、同一个页面的不同位置  
位置定义名称`〈a id=”name”〉</a>`  
链接<`a href=”#name”></a>`

2、不同页面的不同位置  
位置定义名称`〈a id=”name”〉</a>`  
链接`<a href=”文件名#name”></a>`

邮件 `<a href=”mailto: 邮箱地址”></a>`  
1.5——单标签和双标签  
单标签：  
br 换行符  
hr 水平线

双标签：  
html  
head  
title  
body

1.  全角和半角的区别  
    全角：ｓｄｓｄ  
    半角：sdsd  
    切换：shift+space
2.  网页空格输入方式  
    1、全角空格  
    2、` `
3.  文本输入格式
    
    b 加粗  
    strong 加粗  
    del 删除线  
    i 倾斜  
    em 倾斜  
    sub 下标  
    sup 上标  
    small 变小  
    pre 预格式化（在pre里输入什么就在网页中显示什么）
4.  图片输入格式
    
    <img src=”图片路径” alt=”图片描述” width=”宽” height＝”高” title=”图片标题”/>

图片格式： jpg png gif webp

*  列表
 *  无序列表 `Ul>li`
 *  Type类型：
    
        disc（实心）   square（方形）   circle（圆形）
 *  有序列表 Ol>li
 *  Type类型：
    
        A,a,1,I,i
 *  自定义列表  
    `Dl dt dd`

1.  表格  
    table表格  
    tr行  
    th标题行  
    td单元格  
    表格属性：border 边框线 width宽度 bgcolor背景色  
    cellpadding 单元格填充 cellspacing 单元格间距  
    合并列 colspan  
    合并行 rowspan  
    Caption表头
2.  表单元素`<input>、<textarea>、<select>和<option>`

其中select和option配合使用
        
        <form action=”提交目标地址” method=”get/post”>
        <input type=”text”/>单行文本框
        <input type=”password”/>密码框
        <input type=”radio”/>单选项
        <input type=”checkbox”/>复选框
        <input type=”number”>数值类型
        
        <textarea ></textarea> 多行文本框
        
    <select>
        <option>选项显示的内容</option>
        ……
        <option>选项显示的内容</option>
    </select>//下拉列表
         </form>

常见属性：min (最小值) max（最大值） maxlength （最大长度） size （可见宽度） required （必填项） placeholder （提示信息）

*form标签*——和表格元素放入table标签中的道理一样，表单元素放入form标签中：  
属性:action、method、enctype和target属性  
含义：  
1、表单名称name，不能包含特殊字符和空格。  
2、提交表单action：action用于指定表单数据提交到哪个地址进行处理。  
3、传送方法method  
表单method属性作用是告诉浏览器，指定将表单中的数据使用哪一种HTTP提交方法，取值为get或post。  
get表示，表单数据被传送到action属性指定URL，然后这个新URL被送到处理程序上  
post 表示表单数据被包含在表单主体中，然后被传送到处理程序上  
4、目标显示方式target

标签的target属性跟a标签的target属性一样，都是用来指定目标窗口的打开方式。 \_self 默认值，表示在当前的窗口打开页面 \_blank 表示在新的窗口打开页面 \_parent 表示在父级窗口中打开页面,注意不能少了前面的下划线

1.  下拉菜单：

<select >  
       <option value=”” selected disabled></option>
       </select>
       //selected默认选中  disabled 禁用项

1.  下拉列表

<select multiple size="2">
          <option value=”” selected disabled></option>
        </select>
        Multiple 列表展示    size="2" 展示几行

1.  预定义控件

<input list=”idname”
    <datalist id="name">
                <option value="Internet Explorer">
    </datalist>
    //id和list名称一致

1.  按钮：

1.  特殊情况：

<label for="agree">
        <input type="checkbox" id="agree"/>同意以上协议</label>

--------------------

1.  常见行内元素:

a,span,img，input,,select,strong,label,b

常见块级元素：

p,div,ul,ol,dl,table,h1,form

切换方式

Display:inline/block/inline-block

附录：标签合集  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

[20190627211419576.png]: /images/20211221/d874dbf681804f1288b28c68313bbaea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211221/f439a0309aac41c79ebb3a70c0ca12c5.png