2020-07-31 html empty element + css fill + JS acquisition of interline style + soft skills [empty]

2020-07-31 Subject source: http://www.h-camel.com/index.html

[html] What is an empty element? What are the commonly used empty elements?

In HTML, elements without content are called empty elements.

<area> 代表图像映射的一个区域，图像映射指的是带有可点击区域的图像，area标签每出现一次，就会创建一个Area对象。
<base> 指定的默认地址或所有连接的目标地址。
<br>
<col> 与colgroup联用，设置table中的列的属性
<colgroup> when the span is present

    <table border="1">
      <colgroup>
        <col span="2" style="background-color:red">
        <col style="background-color:yellow">
      </colgroup>
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>  
      </tr>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
    </table>

<command> 定义用户可能调用的命令（比如单选按钮、复选框或按钮）
<embed> 定义嵌入的内容,比如插件，h5新增
<hr>
<img>
<input>
<keygen> 规定用于表单的密钥对生成器字段
<link>
<meta>
<param> 允许为插入 XHTML 文档的对象规定 run-time 设置，此标签可为包含object applet标签提供参数

    /* 设置object的参数 autoplay 为 true, 也就是音频载入后会自动播放 */
    <object data="horse.wav">
      <param name="autoplay" value="true">
    </object>

<source> 此标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源

    <video width="320" height="240" controls="controls">
      <source src="forrest_gump.mp4" type="video/mp4" />
      <source src="forrest_gump.ogg" type="video/ogg" />
      <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
      <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
    </video> 

<track> 为诸如 video 元素之类的媒介规定外部文本轨道，也就是字幕

<wbr>  规定在文本中的何处适合添加换行符，这样就会避免差分过长的组合单词，例如XMLHttpRequest

[css] What are the application scenarios of fill in css?

There is no fill attribute in regular css, it only exists in XML-CSS, and is used to set the fill content of the current element, such as color and image.

There are four syntax modes under XML-CSS:

1. fill: rgb(0,0,255);: fill the rgb color into the current element

2. fill:#ffffff;: fill the hexadecimal color into the current element

3. fill: blue;: fill the text color into the current element

4. fill:url(../sdf.gif);: Fill the picture into the current element

[js] What is the difference between getComputedStyle and element.style?

1. window.getComputedStyle(element, attr); Read only, cannot be set. You can get the final style of the element.
2. element.style is readable and writable, and can only get the style in style. If there is no value in style, it returns empty.

Get non-interline style function

let style;
function getStyle(element, attr){
    if(element.currentStyle){
        style = element.currentStyle[attr]; 
    }else{
        style = getComputedStyle(element, false)[attr];
    }
    return style;
}

[Soft skills] What is the difference between full-width characters and half-width characters?

1. Full-width: One character occupies 2 standard character positions. Chinese characters, graphic symbols, and special characters are all full-width, and are generally only used for word processing.

2. Half-width: One character occupies one standard character position. English letters, numbers, and symbol keys are all half-width. Half-width characters are ASCII characters.