简要了解HTML简要了解HTML 超文本语言，可以包含丰富内容的标记语言标记（标签）语言决定html渲染格式的规则文

简要了解HTML

超文本语言，可以包含丰富内容的标记语言

标记（标签）语言

<h1>这是标签语言<hi>
<img src="photo.jpg" /> //空标签

决定html渲染格式的规则文件

<!DOCTYPE html>

<html>

<body>

<h1>字体排印学</h1>

<h2>历史</h2>

<p>活字的雏形或可追溯至公元前两千年前后美

索不达米亚文明的乌鲁克和拉尔萨，砖块上面不

均匀的印花被视作有可能是活字思想雏形。</p>

<h3>印刷体源流</h3>

<p>中国在唐代就已经出现雕版印刷术，公元868

年的《金刚经》是现存最古老的印刷品之一，使用

的技术即是木雕版印刷。</p>

<h2>应用</h2>

<p>...</p>

</body>

</html>

浏览器将html解析为DOM树

常用各种标签

//排版字号标签h1到h6
<h1>阿巴阿巴</h1>

//列表标签
<li></li>
有三种细分

//顺序列表，自动附带一个序列号
<ol>
	<li></li>
</ol>

//无顺序列表
<ul>
	<li></li>
</ul>

//键值对式，可以多对多关系
<dl>
	<dt></dt>
	<dd></dd>
</dl>


//链接
<a>

<a href="https://github.com/">

//图片
<img 
	 src=""
	 alt=""
	 width=""
/>

//音频，视频
<audio
	src=""
	controls
></audio>

<video
	src=""
	controls
></video>


//控件

//输入窗口
<input placeholder="请输入">

<input type="range">


<input type="number" min="1" max="100" >


<input type="date" min="2024-11-2">

//多行输入文本框
<textarea>Hi</textarea>

//选项框
<input type="checkbox" />

//多项单选框
<p>

<label><input type="radio" name="sport" />⚽</label>

<label><input type="radio" name="sport" />🏀</label>

</p>


//下拉式多项选择框
<p>

<select>

<option>🥑</option>

<option>🥩</option>

<option>🥓</option>

</select>

</p>


//带提示词的输入/选择框
<input list="countries" />

<datalist id="countries">

<option>Greece</option>

<option>United Kingdom</option>

<option>United States</option>

</datalist>



//js脚本标签
<script src=""/>

通过语义化的方式去规范地写html

多媒体内容的嵌入

一个简单的小问题网页的图片元素可以由CSS构成。也可以通过html嵌入，这两者有什么关系与区别

CSS图片元素一般更注重于内容的排版以及背景图等无文本内容含义的元素的设计而html中的图片元素是包含需要展示的内容的，在要求上突出的是要展示的内容。（例如alt属性的重要性,虽然这只在图片加载失败时才发挥作用）总而言之，如果图像对你的内容有意义，则应使用 HTML 图像。如果图像纯粹是装饰，则应使用 CSS 背景图片。

虽然可以直接在''标签中实现对图片大小的控制，但是更建议将这种工作统一交付给CSS，在标签内引用style实现图片排版更为规范

'<figure>'元素

为图片提供一个语义容器，为图片与说明文字建立联系

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>