day1——html基本概念梳理

最新推荐文章于 2023-08-07 00:26:25 发布

ice_bear-

最新推荐文章于 2023-08-07 00:26:25 发布

阅读量246

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/93910317

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

前端入门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>

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

<meta  name="keywords" content="icebear的网页"/>

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
超链接

<a href="链接目标地址" target="目标窗口"></a>

目标窗口：_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

全角和半角的区别
全角：ｓｄｓｄ
半角：sdsd
切换：shift+space
网页空格输入方式
1、全角空格
2、 
文本输入格式

b 加粗
strong 加粗
del 删除线
i 倾斜
em 倾斜
sub 下标
sup 上标
small 变小
pre 预格式化（在pre里输入什么就在网页中显示什么）
图片输入格式

<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

表格
table表格
tr行
th标题行
td单元格
表格属性：border 边框线 width宽度 bgcolor背景色
cellpadding 单元格填充 cellspacing 单元格间距
合并列 colspan
合并行 rowspan
Caption表头
表单元素<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 表示在父级窗口中打开页面,注意不能少了前面的下划线

下拉菜单：

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

下拉列表

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

预定义控件

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

按钮：

   <input type="submit"/>
   <input type="reset"/>
   <input type="button" value="确定"/>
   <button>取消</button>

特殊情况：

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

常见行内元素:

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

常见块级元素：

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

切换方式

Display:inline/block/inline-block

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

ice_bear-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录