HTML初学笔记

目录

前言

一、开始

二、标题标签

1.标题

2.段落标签

3. 水平线标签

4.文本格式化标签

5.图片标签：

6.列表标签 

7.表格标签 

8.表单标签 

8.1input 

8.2 select下拉表单元素 

总结

---

前言

html初学笔记，记录刚学习html的基础知识。作为以后参考使用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、开始

用VScode创建html文件，然后打入！号后回车就能生成模板，开始行动！

二、标题标签

1.标题

代码如下（示例）：

标题标签，文字加粗，一行显示<h1>标题</h1>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
​
标签属性：
align:设置对齐方式，值：center、left、right

2.段落标签

代码如下（示例）：

<p></p>
作用：分段，段落与段落之间会有间隙<p>分段</p>
Lorem+数字生成段落

标签属性：
align：值：居中对齐：center、左对齐：left、右对齐：right、两端对齐：justify
</br>   换行

---

3. 水平线标签

属性：
size: 设置水平线粗细
width:设置水平长度
align:设置水平线对齐方式
color:设置水平线颜色
noshade:取消水平线阴影

4.文本格式化标签

强调字，粗体： <strong>加粗</strong>
强调字，粗体： <em>加粗</em>
引用字，斜体： <cite></cite>

5.图片标签：

<img src="图片url" width="500" height="600" border="10" alt="秘密" title="图片" />
​
(1). img标签的属性：
src：图片路径
width：图片宽度
height：图片高度
border：图片边框的粗细
align：对齐方式
alt：替换文本，当图片不能显示，就会显示文字。

​
​
(2). src后面接图片路径，有绝对路径和相对路径
绝对路径：C:\Users\曾钟宁\Desktop\Web/a.jpg

相对目录：/表示下一级，../表示上一级，../../a.jpg

6.列表标签 

<ul>
	<li>列表项</li>
	<li>列表项</li>
	......
</ul>

<ul>标签属性：
设置符号样式：type = disc:实心圆、circle:空心圆、square:方块、


无序列表是并列关系，<ul>里面只能放<li>标签，<li>标签里面可以容纳所有元素

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	......
</ol>

<ol>标签属性
设置序号样式：type = 1、A、a、I

7.表格标签 

<table>		定义表格
<tr>		定义表格的行
<th>		定义表格的表头
<td>		定义表格的单元

<thead>		定义表格的页眉
<tbody>		定义表格的主体
<tfoot>		定义表格的页脚

table:表格；thead:表头；tr：行；td：单元格；th：一行的首个单元格

8.表单标签 

用于定义表单域，以实现用户信息的搜集和传递
<form></form> 

<form>标签的属性：
属性action：属性值url地址
作用：用于接收并处理表单数据的服务器的url地址

属性method：属性值get/post
作用：用于设置表单数据的提交方式

属性name：属性值名称
作用：用于指定表单域的名称，以区分同一个页面中的多个表单域

8.1input 

<input type="属性值" name="元素名" value="请求输入" checked="" maxlength="30" />


属性type的属性值：
text		定义单行的输入字段(文本框)，用户可在其中输入文字
password	定义密码字段，会进行掩码
submit		定义提交按钮，可以把表单元素里的值提交给后台服务器
reset		定义重置按钮，可以重置表单中的所有数据
button		定义可点击按钮，(onclick=""，一般通过JavaScript启动脚本)
file		定义字段和“浏览”按钮，文件上传用(能上传头像之类的)
hidden		定义隐藏的输入字段
image		定义图像形式的提交按钮

点击按钮后触发的事件
onclick=""

8.2 select下拉表单元素 

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
......
</select>

在<option>中定义select="selected"时，当前项即为默认选中项

总结

html最终需要css和js的结合才能发挥完美。