HTML基础知识点回顾

date
Jun 5, 2023
slug
HTML知识点回顾
status
Published
tags
IT
summary
HTML知识点回顾
type
Post
 
html 中 列表有哪两个？ul&ol
ul 和 ol
html 中 table 中可以分为哪两部分？thead&tbody
html 中 thead 中每一行用什么标签，标题用什么标签？tr&th
html 中 tbody 中每一行用什么标签，数据用什么标签？tr&td
input type 属性中有哪些类型？
text number email submit button checkbox radio image password
inline element 有哪些？div&p&h1&form
div p h1-h6 form...
block element 有哪些？span&a&img
span a img
添加一条水平线 <hr>
预格式化标签是什么？<pre>
right-to-left：<bdo dir="rtl">What a beautiful day!</bdo>
 
notion image
Use CSS to center align the paragraph : <p style="text-align:center;">This is a paragraph.</p>
Use CSS to set the text size to 50 pixels. : <p style="font-size:50px;">This is a paragraph.</p>
重要的标签<strong></strong>
<strong></strong>
Highlight the word "FUN" in the text below：<p>HTML is <mark>FUN</mark> to learn! </p>
 
notion image
Apply subscript formatting to the number "2" in the text below.：<p> H <sub>2</sub> O is the scientific term for water.</p>
 
notion image
Add a line through (strikeout) the letters "blue" in the text below..：<p> My favorite color is <del> blue </del> red.</p>
 
notion image
Use an HTML element to add quotation marks around the letters "cool"..：<p>I am so <q>cool.</q></p>
 
notion image
引用：<blockquote cite="">abc</blockquote>
 
notion image
remove the underline from the link.：<a href="html_images.asp" style="text-decoration:none;">HTML Images</a>
 
notion image
Add a "tooltip" to the link.：<a href="default.html" title="Home">Back to Home</a>
 
notion image
make the link open in a new window：<a href="html_images.asp" target="_blank">HTML Images</a>
 
描述：<p>The <abbr title="World Health Organization"> WHO </abbr> was founded in 1948.</p>
 
注释：<!-- <p>This is a paragraph.</p>-->
<!-- <p>This is a paragraph.</p>-->
 
link to "default.html".：<a href="default.html" >Visit our HTML tutorial.</a>
 
Make the image below float to the right of the paragraph..：<img src="smiley.gif" style="float:right;">This is a paragraph.</p>
 
notion image
Add a table caption that says "Names".：<caption>Names</caption>
 
notion image
Use the correct HTML attribute to make the first TH element span two columns.：<th colspan="2">Name</th>
 
notion image
Use the correct HTML attribute to make the second TH element span two rows.：<th rowspan="2">Phone</th>
 
notion image
Use CSS to display squares instead of bullets.：<ul style="list-style-type:square;">
 
notion image
display letters (uppercase ABC) instead of numbers.：<ol type="A">
 
notion image
display uppercase roman numbers.：<ol type="I">
 
notion image
dl 的 使用,子标签是哪两个？dt&dd
 
notion image
同时作用两个类名？<h1 class="class1 class2">My Home Page</h1>
 
change the HTML content of the <p> element to "Hello World!".:<script>document.getElementById("demo").innerHTML = "Hello World!";</script>
 
change the text size of the <p> element to 40 pixels.:<script>document.getElementById("demo").style.fontSize= "40px";</script>
 
Define the text "var person;" as programming code.:<p>Code example: <code>var person;</code></p>
 
notion image
Define the character "x" in the equation as a variable.:<p>A simple math equation: <var>x</var>= 3 + 2; </p>
 
notion image
add an input field with the type "button" and the value "OK".: <form><input type="button" value="OK"></form>
 
notion image
add two radio buttons, both with the name "gender"..: <input type="radio" name="gender" value="male"> Male
 
notion image
Add a submit button, and specify that the form should go to "/action_page.php".:<form action="/action_page.php" method="POST">Name:
 
notion image
add an empty drop down list with the name "cars".<select name="cars"></select>
 
notion image
add two option elements to the drop down list..<option value="Volvo">Volvo</option>
 
notion image
add a text area with the name "note"...<textarea name="note"></textarea>
 
notion image
Add two radio buttons with the name "color"..<input value="blue" type="radio" name="color">
 
notion image
numbers between 1 and 5.<input type="number" min="1" max="5">
 
notion image
Disable the input field below..<input type="text" disabled disabled>
 
notion image
max numbers of characters allowed in the input field to 40.<input type="text" maxlength="40">
 
Set the input field to be read only (meaning that the value cannot be changed<input type="text" readonly>
 
 
b 和strong 的区别
  1. 显示效果一样，但实际目的不同。
  1. b ⇒ blod，文本加粗，样式标签
  1. strong ，提示文本重要，提醒注意，语义标签
html 语义化目的。
  1. 告诉浏览器其意义。
  1. 对搜索引擎友好。
  1. 便于开发者阅读代码。
html 语义化标签有哪些？
  1. 不同位置的标签：header、nav、article、section、footer、aside
  1. 表示具体元素的作用或者意义的标签：a、abbr、address、audio、blockquote、caption、code、datalist、del、detail、ol、ul、figure、figuration、img、input、mark、p等
 
 
html 元素可以分为哪三类?inline&block&inline-block
inline 内联元素 block 块状元素 inline-block 内联块状元素
inline 内联元素有哪些？
block 块状元素有哪些？
inline-block 内联块状元素有哪些？
内联元素的特性是什么？
  1. 本身属性为display:inline;
  1. 和其他行内元素从左到右在一行显示
  1. 不可以直接控制宽度、高度等其他相关 CSS 属性，但是可以直接设置内外边距的左右值 宽高是由本身内容大小决定的（文字、图片等) 只能容纳文本或者其他行内元素，
  1. 不能嵌套块级元素
块状元素的特性是什么？
  1. 本身属性为display:block
  1. 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
  1. 可以直接控制宽度、高度等其他相关 CSS 属性，例如（padding 系列，margin 系列）
  1. 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度 在不设置高度的情况下，块级元素的高度是它本身内容的高度
内联块状元素的特性是什么？
  1. 和其他元素都在一行上；
  1. 元素的高度、宽度、行高以及顶和底边距都可设置。
 
meta 元素包含四大属性：charset、content、http-equiv、name
charset、content、http-equiv、name
meta 元素中 声明了页面的字符编码 的属性（key属性）：charset
常用的值： UTF-8(Unicode字符编码）、IS0-8859-1 (拉丁字母表的字符编码）
meta 元素中 改变服务器和用户代理的行为的属性（key属性）：http-equiv
用做HTTP头部的某些作用，通过定义该属性可以改变服务器和用户代理的行为
 

© xiaosen chen 2022 - 2024 ❤ LOVE