网站建设 从用户角度开始网页设计需要学什么
参考视频：【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili
一、基本结构
二、基本标签
<h1>：一级标题，通常用于页面的主标题，字体较大且醒目。
<h2>：二级标题，用于副标题或主要章节标题，字体稍小于<h1>。
<h3>：三级标题，可用于子章节标题，以此类推，还有<h4>、<h5>、<h6>。
<p>：用于定义一个段落，文本会自动换行，段落之间会有一定的间距。
<br>：用于强制换行，不产生新的段落。
<hr/>：用于在页面中插入一条水平分隔线，可用于分隔不同的内容区域。
<b/>：使文本加粗，用于强调。
<i>：使文本倾斜，常用于表示斜体文本，如书名、外来语等。
<u>：为文本添加下划线。
<!-- 这是注释内容 -->
表示一个空格，常用于在文本中添加额外的空格。
<表示<符号。>表示
>符号。©；版权所有
三、图片标签
四、链接标签
1、href：定义链接目标。
<a href="https://www.example.com">访问 Example</a>
2、target：定义链接的打开方式。
_blank: 在新窗口或新标签页中打开链接。_self: 在当前窗口或标签页中打开链接（默认）。_parent: 在父框架中打开链接。_top: 在整个窗口中打开链接，取消任何框架。
<a href="https://www.example.com" target="_blank" rel="noopener">新窗口打开 </a>
3、rel：定义链接与目标页面的关系。
nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target="_blank" 时。
noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）。noopener noreferrer: 同时使用noopener和noreferrer。
<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>
4、download：提示浏览器下载链接目标而不是导航到该目标。
如果指定了文件名，浏览器会提示下载并保存为指定文件名。
<a href="file.pdf" download="example.pdf">下载文件</a>
5、title：定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示。
<a href="https://www.example.com" title="访问 Example 网站">访问 Example</a>
6、id：用于链接锚点，通常在同一页面中跳转到某个特定位置。
<!-- 链接到页面中的某个部分 -->
<a href="#section1">跳转到第1部分</a>
<div id="section1">这是第1部分</div>
10、style: 直接在元素上定义CSS样式
五、列表
1、无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2、 有序列表
3、自定义列表
dl:标签
dt:列表名称
dd:列表内容
六、表格标签
跨行、跨列：
七、音频视频
八、 网页结构
九、iframe内联标签
在一个网页里嵌套另一个网页
<iframe src="/" width="200" height="200">
十、表单
1、用form创建表单
2、radio单选框
3、checkbox多选框
4、按钮
5、下拉框
6、文本域
7、文件域
8、验证
9、滑块
10、搜索框
总结：input表示的：文本框、按钮、单选框、多选框、文件域、验证、滑块、搜索框
十一、 表单的应用
hidden 隐藏域
readonly只读
disabled禁用
十二、表单的验证
placeholder设置文本框默认值
required设置文本框不能为空
pattern正则表达式正则表达式 – 语法 | 菜鸟教程
十二、总结
