Table of Contents
#专栏作家#
Home Web Front-end HTML Tutorial 我理解的网站产品经理之四:网站产品前端姿势_html/css_WEB-ITnose

我理解的网站产品经理之四:网站产品前端姿势_html/css_WEB-ITnose

Jun 21, 2016 am 09:00 AM

2016年了,嗨,大家新年好。

作为一个网页的产品经理,网页的前端知识可谓是不能不知,本文主讲网站产品的前端姿势。

通常,HTML、CSS、JavaScript共同构建了你看到的任何一个网页展示和交互。

下面是这三种字母的解释:

  • HTML(HyperTextMarkup Language) 超文本标记语言
  • CSS(Cascading Style Sheets)级联样式表
  • JavaScript 一种脚本语言,主要用于前端页面的DOM处理

不太懂可自行百度了解。

文本的意思,应该大家都明白,就是你随手在桌面上建立一个txt,这就是一个文本文件。

那什么是HTML超文本标记语言呢?就是对一个普通的txt里面的文字进行标记,标记其中的一段为title,标记任意一段为某个意思,最终形成了一套规则就是html。

一个html文档通常的结构是这样的:

doctype、html、head(/head)、body(/body)、/html。

下面我们来看一段html:

看下面这段代码截图:

“电动汽车_新能源汽车_电动汽车网”原先是普通的文本,但是这里套了

,用于标记此处是标题,同时也告诉了搜索引擎这里是标题。 <p>再看下面这段代码截图:</p> <p> </p> <p>红色标注部分就是CSS样式代码。CSS中文名叫级联样式表,白话就是说长什么样子。CSS就是起装修作用的,必须要和HTML一起配合使用。</p> <p>再看下面这段代码截图(和第一张图一样):</p> <p> </p> <p>上图第二个红色标注的地方就是JavaScript,JavaScript是一种脚本语言,它在网页中使用的主要场景是控制HTML中的每一个元素。比如,点了一个按钮会弹出一个层,其实就是利用JavaScript实现的。</p> <p>目前的互联网,任何一个网页都是由他们三个构建起来的,作为网页产品经理必须知道,若是能够看懂、简单修改甚至是自己写,那就更棒了,再深的介绍就不在此说明了。</p> <p>当然作为创业公司的产品经理还有注意前端页面规范和兼容性的问题,作为合格的前端工程师上面说的都应该必须过关,作为产品经理也必须明了。</p> <p>比如html文档格式,必须有的dtd格式,文件编码utf-8等这些常识性姿势。</p> <p>除了html,大家应该还看到htm、shtml、xhtml等这些文档,大家可以自行百度做了解,究竟有什么用和什么区别。</p> <p>说到这里大家应该想问了,html应该用什么软件开发呢?Dreamweaver,百度自行了解。</p> <p>本文仅适用于产品新人,产品大佬可以忽略。</p> <h3 id="专栏作家">#专栏作家#</h3> <p>董海荣,微信公众号:pingyaonr,人人都是产品经理专栏作家。关注智能汽车、移动互联网和虚拟现实。擅长内容编辑运营、原型设计、需求挖掘梳理、产品规划管理。欢迎交流学习。</p> <p>本文原创发布于人人都是产品经理,未经许可,不得转载。</p>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

See all articles