What's the Difference Between HTML's and CSS's Width Attribute

Difference between HTML width attribute and CSS width property (canvas)?

According to the relevant spec:

4.8.11 The canvas element — HTML5
The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

^{Emphasis added.}

In your case, since the first element, #trail, doesn't have a width or height attribute, the attribute values default to width="300" height="150", which is why you're seeing a difference.

In essence, the width/height attributes set the intrinsic dimensions of the canvas's coordinate space, whereas the CSS properties set the actual size of the canvas element:

The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.

Therefore if you gave the canvas element the attributes width="100" height="100", then set a CSS width of 100%, the image would be scaled to fit the layout while maintaining the aspect ratio (example).

What's the difference between HTML's and CSS's width attribute?

I checked the documents, but they don't make clear what will happen if both of them are set..

That's hidden away somewhere here:

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

Now, as I've implied in my humorous comment, I don't know for certain why they would set a variety of values for the HTML width attribute on the img elements and have a single, different value for the CSS width property for all of them. Perhaps they're accounting for when the .thumbnail class is missing, or something else. As always, Alohci is in a better position to explain why the width and height attributes are specified anyway, even if they differ from the dimensions specified in CSS for whatever reason.

What I can tell you, however, is that this basically means the CSS does indeed take precedence anyway, even if both are set.

What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?

A hot debate about the subject can be found here: Width attribute for image tag versus CSS

To sum it up:

The gain from declaring a width value and an height value (which may not be the original physical dimensions of the image) or from css declarations (like width: [valueX]; height: [valueY];) is that it helps speed up the rendering of the page. The browser knows how much space to allocate a particular area of the page: it will even draw image placeholders on a first draw, a first parsing+rendering of the page. When one does not define any width and height, then the browser has to download the image and then figure out its dimensions, space to allocate and then redraw the page.

This seems to be the most beneficial effect in my opinion.

Differences between assigning attribute, style, and class in div

No, it's not equal, not even for only those two elements. The attribute width doesn't exist for the div element (and if it did, you wouldn't specify the unit, but only the numeric value in pixels). Yes, in HTML5 you can use pretty much anything as an attribute and get away with it, but HTML5 also suggests the use of CSS and only CSS for styling.

Here's an example:

div {height: 50px; background: #ccc; margin-bottom: 5px; display: inline-block; min-width: 100px;}

div.css {width: 250px}

<div width=250>Numeric</div>

<div width="250px">Numeric w/unit</div>

<div class="css">Regular CSS</div>

The difference between specifying image size in html or css

From the W3C website:

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

See this answer to this question for more details

Difference between table width and style width

The first option is the old HTML strategy of setting properties of a table.
It is deprecated because of concerns about adding "visualization" properties to your HTML code, which should focus on content markup.

The second option is the (new) CSS solution but, please, do not declare it "inline" but in a separate CSS file targeting the table element with a class or ID name, otherwise advantages are effectively null; CSS philosophy is based on separation between data and styles, so if you declare it "inline"... there is implicitly no separation.