前端代码学习[从入门到放弃]
  • 前段代码学习全集
  • 挑战
    • Headline with the h2 Element
    • Inform with the Paragraph Element(段落设置)
    • Uncomment HTML(注释代码)
    • Comment out HTML
    • Fill in the Blank with Placeholder Text
    • Delete HTML Elements
    • Change the Color of Text(改变文本颜色)
    • Use CSS Selectors to Style Elements
    • Use a CSS Class to Style an Element
    • Style Multiple Elements with a CSS Class
    • Change the Font Size of an Element
    • Set the Font Family of an Element(设置字体)
    • Import a Google Font(导入字体)
    • Specify How Fonts Should Degrade
    • Add Images to your Website(添加网站图片)
    • Size your Images（调整图片大小）
    • Add Borders Around your Elements（边框属性）
    • Add Rounded Corners with a Border Radius（圆角边框）
    • Make Circular Images with a Border Radius(圆角边框百分比)
    • Link to External Pages with Anchor Elements
    • Nest an Anchor Element within a Paragraph
    • Make Dead Links using the Hash Symbol
    • Turn an Image into a Link
    • Add Alt Text to an Image for Accessibility
    • Create a Bulleted Unordered List(无序列表)
    • Create an Ordered List(有序列表)
    • Create a Text Field(创建表单)
    • Add Placeholder Text to a Text Field(表单预定文本)
    • Create a Form Element
    • Add a Submit Button to a Form(表单增加按钮)
    • Use HTML5 to Require a Field(表单必填项)
    • Create a Set of Radio Buttons(单选按钮，类似于单选题)
    • Create a Set of Checkboxes(复选框)
    • Check Radio Buttons and Checkboxes by Default(默认被选中选项)
    • Nest Many Elements within a Single Div Element
    • Give a Background Color to a Div Element(元素背景色)
    • Set the ID of an Element(ID属性)
    • Use an ID Attribute to Style an Element(用ID选择器来申明样式)
    • Adjusting the Padding of an Element
    • Adjust the Margin of an Element
    • Add a Negative Margin to an Element
    • Add Different Padding to Each Side of an Element
    • Add Different Margins to Each Side of an Element
    • Use Clockwise Notation to Specify the Padding of an Element
    • Use Clockwise Notation to Specify the Margin of an Element
    • Style the HTML Body Element(Body元素)
    • Inherit Styles from the Body Element
    • Prioritize One Style Over Another
    • Override Styles in Subsequent CSS
    • Override Class Declarations by Styling ID Attributes
    • Override Class Declarations with Inline Styles
    • Override All Other Styles by using Important
    • Use Hex Code for Specific Colors(颜色代码)
    • Use Hex Code to Color Elements White
    • Use Hex Code to Color Elements Red
    • Use Hex Code to Color Elements Green
    • Use Hex Code to Color Elements Blue
    • Use Hex Code to Mix Colors
    • Use Hex Code to Color Elements Gray(灰色)
    • Use Hex Code for Specific Shades of Gray(深灰色)
    • Use Abbreviated Hex Code
    • Use RGB values to Color Elements
    • Use RGB to Color Elements White（RGB配置白色）
    • Use RGB to Color Elements Red（RGB配置红色）
    • Use RGB to Color Elements Green（RGB配置绿色）
    • Use RGB to Color Elements Blue（RGB配置蓝色）
    • Use Responsive Design with Bootstrap Fluid Containers（Bootstrap根据屏幕调整大小）
    • Use RGB to Mix Colors（RGB配置橙色）
    • Make Images Mobile Responsive（图片自动适应屏幕尺寸）
    • Center Text with Bootstrap（文本居中）
    • Create a Bootstrap Button（更好看的按钮样式）
    • Create a Block Element Bootstrap Button（按钮宽度自适应页面）
    • Taste the Bootstrap Button Color Rainbow（按钮强调颜色）
    • Call out Optional Actions with Button Info（按钮浅蓝色）
    • Warn your Users of a Dangerous Action（按钮红色）
    • Use the Bootstrap Grid to Put Elements Side By Side
    • Ditch Custom CSS for Bootstrap
    • Use Spans for Inline Elements
    • Create a Custom Heading
    • Add Font Awesome Icons to our Buttons
    • Add Font Awesome Icons to all of our Buttons
    • Responsively Style Radio Buttons
    • Responsively Style Checkboxes
    • Style Text Inputs as Form Controls
    • Line up Form Elements Responsively with Bootstrap
    • Create a Bootstrap Headline
    • House our page within a Bootstrap Container Fluid Div
    • 88Create a Bootstrap Row
    • 89Split your Bootstrap Row
    • 90Create Bootstrap Wells
    • 91Add Elements within your Bootstrap Wells
    • 92Apply the Default Bootstrap Button Style
    • 93Create a Class to Target with jQuery Selectors
    • 94Add ID Attributes to Bootstrap Elements
    • 95Label Bootstrap Wells
    • 96Give Each Element a Unique ID(按钮ID)
    • 97Label Bootstrap Buttons（按钮名称）
    • 98Use Comments to Clarify Code
    • 99Join our LinkedIn Alumni Network（流程非代码）
    • 100Join our Subreddit（流程非代码）
    • 101Read Coding News on our Medium Publication（流程非代码）
    • 102Watch us Code Live on Twitchtv（流程非代码）
    • 103Commit to a Goal and a Nonprofit（流程非代码）
    • 104Learn how Script Tags and Document Ready Work
    • 105Target HTML Elements with Selectors Using jQuery（元素选择器）
    • 106Target Elements by ID Using jQuery（class选择器）
    • 107Target Elements by Class Using jQuery（ID选择器）
    • 108Delete your jQuery Functions
    • 109Target the same element with multiple jQuery Selectors
    • 110Remove classes from an element with jQuery
    • 111Change the CSS of an Element Using jQuery
    • 112Disable an Element Using jQuery
    • 113Change Text Inside an Element Using jQuery
    • 114Remove an Element Using jQuery（.remove移除html元素）
    • 115Use appendTo to Move Elements with jQuery
    • 116Clone an Element Using jQuery
    • 117Target the Parent of an Element Using jQuery（父元素parent()）
    • 118Target the Children of an Element Using jQuery（子元素children()）
    • 119Target a Specific Child of an Element Using jQuery（target:nth-child(n)选择目标元素yuan'suo）
    • 120Target Even Numbered Elements Using jQuery
    • 121Use jQuery to Modify the Entire Page
    • 122Get Set for our Front End Development Projects
    • 126Comment your JavaScript Code
    • 127Declare JavaScript Variables（定义变量）
    • 128Storing Values with the Equal Operator（变量赋值）
    • 129Initializing Variables with the Equal Operator（定义变量并设置初始值）
    • 130Understanding Uninitialized Variables
    • 131Understanding Case Sensitivity in Variables（变量命名区分大小写）
    • 132Add Two Numbers with JavaScript（加法运算）
    • 133Subtract One Number from Another with JavaScript（减法运算）
    • 134Multiply Two Numbers with JavaScript（乘法运算）
    • 135Divide One Number by Another with JavaScript（乘积）
    • 136Increment a Number with JavaScript（除法运算）
    • 137Decrement a Number with JavaScript（变量增1）
    • 138Create Decimal Numbers with JavaScript（变量减1）
    • 139Multiply Two Decimals with JavaScript（赋值小数）
    • 140Divide one Decimal by Another with JavaScript
    • 141Finding a Remainder in JavaScript（%取余数）
    • 142Assignment with Plus Equals（+=变量增加）
    • 143Assignment with Minus Equals（-=变量减少）
    • 144Assignment with Times Equals（*=与一个数相乘并赋值）
    • 145Assignment with Divided by Equals（/=变量与一个数相除并赋值）
    • 146Convert Celsius to Fahrenheit（加减乘除测试）
    • 147Declare String Variables（赋值字符串）
    • 148Escaping Literal Quotes in Strings
    • Quoting Strings with Single Quotes
    • Escape Sequences in Strings
    • Concatenating Strings with Plus Operator
    • Concatenating Strings with the Plus Equals Operator
    • Constructing Strings with Variables
    • Appending Variables to Strings
    • Find the Length of a String
    • Use Bracket Notation to Find the First Character in a String
    • Understand String Immutability
    • Use Bracket Notation to Find the Nth Character in a String
    • Use Bracket Notation to Find the Last Character in a String
    • Use Bracket Notation to Find the NthtoLast Character in a String
    • Word Blanks
    • Store Multiple Values in one Variable using JavaScript Arrays
    • Nest one Array within Another Array
    • Access Array Data with Indexes
    • Modify Array Data With Indexes
    • Access MultiDimensional Arrays With Indexes
    • Manipulate Arrays With push
    • Manipulate Arrays With pop
    • Manipulate Arrays With shift
    • Manipulate Arrays With unshift
    • Shopping List
    • Write Reusable JavaScript with Functions
    • Passing Values to Functions with Arguments
    • Global Scope and Functions
    • Local Scope and Functions
    • Global vs Local Scope in Functions
    • Return a Value from a Function with Return
    • Assignment with a Returned Value
    • Stand in Line
    • Understanding Boolean Values
    • Use Conditional Logic with If Statements
    • Comparison with the Equality Operator
    • Comparison with the Strict Equality Operator
    • Comparison with the Inequality Operator
    • Comparison with the Strict Inequality Operator
    • Comparison with the Greater Than Operator
    • Comparison with the Greater Than Or Equal To Operator
    • Comparison with the Less Than Operator
    • Comparison with the Less Than Or Equal To Operator
    • Comparisons with the Logical And Operator
    • Comparisons with the Logical Or Operator
    • Introducing Else Statements
    • Introducing Else If Statements
    • Logical Order in If Else Statements
    • Chaining If Else Statements
    • Golf Code
    • Selecting from many options with Switch Statements
    • Adding a default option in Switch statements
    • Multiple Identical Options in Switch Statements
    • Replacing If Else Chains with Switch
    • Returning Boolean Values from Functions
    • Return Early Pattern for Functions
    • Counting Cards
    • Build JavaScript Objects
    • Accessing Objects Properties with the Dot Operator
    • Accessing Objects Properties with Bracket Notation
    • Accessing Objects Properties with Variables
    • Updating Object Properties
    • Add New Properties to a JavaScript Object
    • Delete Properties from a JavaScript Object
    • Using Objects for Lookups
    • Testing Objects for Properties
    • Introducing JavaScript Object Notation JSON
    • Accessing Nested Objects in JSON
    • Accessing Nested Arrays in JSON
    • Record Collection
    • Iterate with JavaScript For Loops
    • Iterate Odd Numbers With a For Loop
    • Count Backwards With a For Loop
    • Iterate Through an Array with a For Loop
    • Nesting For Loops
    • Iterate with JavaScript While Loops
    • Profile Lookup
    • Generate Random Fractions with JavaScript
    • Generate Random Whole Numbers with JavaScript
    • Generate Random Whole Numbers within a Range
    • Sift through Text with Regular Expressions
    • Find Numbers with Regular Expressions
    • Find Whitespace with Regular Expressions
    • Invert Regular Expression Matches with JavaScript
    • Create a JavaScript Slot Machine
    • Add your JavaScript Slot Machine Slots
    • Bring your JavaScript Slot Machine to Life
    • Give your JavaScript Slot Machine some Stylish Images
    • Declare JavaScript Objects as Variables
    • Construct JavaScript Objects with Functions
    • Make Instances of Objects with a Constructor Function
    • Make Unique Objects by Passing Parameters to our Constructor
    • Make Object Properties Private
    • Iterate over Arrays with map
    • Condense arrays with reduce
    • Filter Arrays with filter
    • Sort Arrays with sort
    • Reverse Arrays with reverse
    • Concatenate Arrays with concat
    • Split Strings with split
    • Join Strings with join
    • Get Set for our Algorithm Challenges
    • Trigger Click Events with jQuery
    • Change Text with Click Events
    • Get JSON with the jQuery getJSON Method
    • Convert JSON Data to HTML
    • Render Images from Data Sources
    • Prefilter JSON
    • Get Geolocation Data
    • Claim Your Front End Development Certificate
    • Use the JavaScript Console
    • Using typeof
  • 算法
    • Reverse a String
    • Factorialize a Number
    • Check for Palindromes
    • Find the Longest Word in a String
    • Title Case a Sentence
    • Return Largest Numbers in Arrays
    • Confirm the Ending
    • Repeat a string repeat a string
    • Truncate a string
    • Chunky Monkey
    • Slasher Flick
    • Mutations
    • Falsy Bouncer
    • Seek and Destroy
    • Where do I belong
    • Caesars Cipher
    • Sum All Numbers in a Range
    • Diff Two Arrays
    • Roman Numeral Converter
    • Where art thou
    • Search and Replace
    • Pig Latin
    • DNA Pairing
    • Missing letters
    • Boo who
    • Sorted Union
    • Convert HTML Entities
    • Spinal Tap Case
    • Sum All Odd Fibonacci Numbers
    • Sum All Primes
    • Smallest Common Multiple
    • Finders Keepers
    • Drop it
    • Steamroller
    • Binary Agents
    • Everything Be True
    • Arguments Optional
    • Validate US Telephone Numbers
    • Symmetric Difference
    • Exact Change
    • Inventory Update
    • No repeats please
    • Friendly Date Ranges
    • Make a Person
    • Map the Debris
    • Pairwise
Powered by GitBook
On this page

Was this helpful?

  1. 挑战

Delete HTML Elements

Delete HTML Elements

手机的屏幕空间是有限的。

让我们删除不必要的元素，开始设计我们的CatPhotoApp。

任务：删除你的h1元素以简化视图。

原始代码：

<h1>Hello cat!</h1>

<h2>我家的猫咪</h2>

<p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

调试代码：

<h2>我家的猫咪</h2>

<p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
PreviousFill in the Blank with Placeholder TextNextChange the Color of Text(改变文本颜色)

Last updated 5 years ago

Was this helpful?