一起入门前端(一)

初入web前端,一些学习知识同大家分享下:

首先,web前端主要学习三个部分:HTML、CSS、JavaScript。今天要讲的主角是HTML:

先po出一张HTML文件结构图:

接着,咱们聊聊HTML是个what?

HTML是用来描述网页的一种语言,指的是超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,使用标记标签来描述语言。标签是由尖括号包围的关键词,通常是成对出现的。

介绍下常用的关键词:

        HTML标题:是通过H1-H6等标签定义的。ps:具体想呈现在浏览器需要在编辑器中编写完整的html,格式如下,将其保存为.html,使用浏览器打开即可查看效果,下文中不再详细赘述。

<html>

<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

   HTML段落 :HTML 段落是通过 <p> 标签进行定义的。

<p>This is is a paragraph.</p>

HTML链接:HTML 链接是通过 <a> 标签进行定义的,最常用的两个属性:href目标链接地址,target被链接的文档显示位置。

<a href="http://www.cnblogs.com/sweet12-04/" target="_blank">sweet博客园</a>,打开链接会在新窗口打开,你可以试下不设置target属性的情况

HTML图像:HTML 图像是通过 <img> 标签进行定义的,最常用的属性:src目标图片地址,alt替换文本属性。

<img src="../flower.jpg" alt="flower">,当图片地址不正确时,浏览器会显示flower

有了<a>和<img>,我们就可以制作图片链接了:

<a href="http://www.cnblogs.com/sweet12-04/"><img src="flower.jpg" alt="flower" /></a>

         HTML表格:HTML表格是通过<table>标签进行定义的,每个表格均有若干行,由 <tr> 标签定义,每行被分割为若干单元格,由 <td> 标签定义,表格的表头是由<th>标签定义的,一些常用属性:colspan,cellpadding,cell spacing。

<table border="1" >

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

HTML列表:HTML支持有序,无序及定义列表,无序列表由<ul>标签开始,每个列表项由<li>标签开始,

<ul>

<li>html</li>

<li>css</li>

<li>javascript</li>

</ul>

有序列表由<ol>标签开始,每个列表项由<li>标签开始,

<ol>

<li>html</li>

<li>css</li>

<li>javascript</li>

</ol>

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>html</dt>

<dd>超文本标记语言</dd>

</dl>

HTML块元素:大多数 HTML 元素被定义为块级元素或内联元素,块级元素在浏览器显示时,通常会以新行来开始,内联元素在显示时通常不会以新行开始。

HTML <div> 元素是块级元素,<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。

HTML <span> 元素是内联元素,<span> 元素也没有特定的含义。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

HTML表单元素:表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签(<form>)定义,常用属性:action,method,。

<form action="" method="post">

<input type="text" name="username" placeholder="username"></br></br>

<input type="password" name="password" placeholder="password"></br></br>

<input type="submit" name="submit">

</form>

好了,通过对本章的学习,差不多对THML的超文本类型有所了解,但是对于使用HTML还远远不够,大家同我一起努力吧!

时间: 2025-01-02 03:57:18

一起入门前端(一)的相关文章

webpack入门--前端必备

webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但这不用我们理会,因为 webpack 有着各种健全的加载器(loader)在处理这些事情. 为什么要使用 webpack? 很简单的一个道理,难道写react的同学会不用它

新手应该如何入门前端

7月1日的时候参加豪情大神组织的群内个人经历分享,总结了一下个人入门前端的一个过程,现整理成文,希望对后来者有帮助. 一.个人自我介绍 本人是14年飞行器制造专业毕业,之后在深圳的一家研究院从事航天方面的工作,之后跟随当时的领导跳槽到了一家新公司, 担任软件工程师,刚来的时候恰好公司官网出现问题, 领导就把这个事情交给我, 当时还根本没有接触前端, 只能硬着头皮上了. 然后就入坑了. 二.个人推荐的入门最佳实践 我入门的时候就是在网上找了一个帖子然后一头扎进去,按照帖子给的路线去学习, 现在看来

WebSocket.之.基础入门-前端发送消息

WebSocket.之.基础入门-前端发送消息 在<WebSocket.之.基础入门-建立连接>的代码基础之上,进行添加代码.代码只改动了:TestSocket.java 和 index.jsp 两个文件. 项目结构如下图: TestSocket.java 1 package com.charles.socket; 2 3 import javax.websocket.OnMessage; 4 import javax.websocket.OnOpen; 5 import javax.webs

正确入门前端的过程--方向式学习

随着一年一年飞速发展,互联网行业也逐渐开始大众化,越来越多的人选择计算机这个行业 大部分共同目标都是"拿高薪,提升技术,团队协合作" 当然,对于很多初学者来说,如何正确的入门并快速走向成熟化,成了一个偏难的过程,很多初学者认为这们技术就是多学多练,其实不完全对.多学多练是必然的,但是又有多少人能够做到一遍成功,一次通过呢? 这个过程对于初学者来说很重要,要真正确实的去体会这个过程,去感受这个过程的走向,自己知道这个走向到底是走上坡还是下坡,自己心里应该很明白.没有一个零基础者学习一门技

10 分钟,带你快速入门前端三大技术(HTML、CSS、JavaScript)

听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaScript,则是每一个前端开发者必须具备的技能. 掌握这些技能,你可以快速地做出一个酷炫的APP界面或者一个简单大方的网站页面.因此,就让我们一起来快速学习一下这三门技术吧. 以下内容节选自课程<Vue.js 和 Node.js 构建内容发布系统>. 大家也可以点击课程链接,在实验楼提供的虚拟机环境

spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框

 需求 1.点击“添加”按钮,弹出录入数据的对话框窗口,并录入数据,如果数据有误则不允许提交.数据填写完毕后,点击“保存”按钮,调用http协议提交数据,提交完毕刷新页面数据.点击“取消”按钮关闭对话框. 2.点击列表中的“修改”按钮,弹出数据修改对话框窗口,功能同上. 3.点击列表中的“删除”按钮,弹出删除数据的询问窗口,功能以此类推. 一.添加 在“src\mock\member.js”中,增加模拟保存数据的方法: adapters.push( (mockAdapter) => mockAd

入门前端之HTML

概念: HTML: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,是一套统一的规则,也是一套语法.通过特定的语法,描述一个网页的结构.浏览器遵循规则,把按语法生成的文档解析成我们看到的炫目的网页.属于组成网页的基础模块之一. CSS是英文Cascading Style Sheets(层叠样式表)网页的读者和作者都可以使用CSS来决定文件的颜色.字体.排版等显示特性.CSS最主要的目的是将文件的内容与显示分隔开来.属于组成网页的基础模块之一. HTM

CSS快速入门-前端布局1(抽屉)

一.效果图 前面对CSS基础知识有了一定的了解,是时候开始实战了!以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局. 官方网站效果图: 模拟网站图: 二.实现步骤 1.整体布局(header.body.footer) 抽屉的首页主要分为三块:头部.网页内容.底部内容. 2.header实现 header由logo.内容菜单.登录菜单.搜索框四部分组成. 代码架构为: body{ margin:0px; background-color:#ededed; } ul{

CSS快速入门-前端布局2(唯品会1)

上一篇我模仿了抽屉网站,这一节我来对唯品会主页进行模仿. 我觉得写一个主页大概思路如下: 1.确定整体布局方式:(html) 2.针对每一块进行细化,尽量做到模块化.(css) 3.加上特效效果.(js) 先看效果图: 原文地址:https://www.cnblogs.com/skyflask/p/9022520.html