【HTML和CSS知识点总结二】

一：表单标签

1.1：input系列标签

场景：在网页中显示收集用户信息的表单效果。例如：登陆页，注册页
<input type="text">
type都有如下：
text-----------文本框
password-------密码框
radio----------单选框
checkbox-------多选框
file-----------文件选择
submit---------提交按钮，用于提交
reset----------重置按钮，用于重置
button---------普通按钮，默认无功能，配合js添加功能
placeholder----占位符，提示用户输入内容的文本

 <!-- type都有如下：
	text-----------文本框
	password-------密码框
	radio----------单选框
	checkbox-------多选框
	file-----------文件选择
	submit---------提交按钮，用于提交
	reset----------重置按钮，用于重置
	button---------普通按钮，默认无功能，配合js添加功能 -->
    文本框：<input type="text">
    <br>
    密码框：<input type="password">
    <br>
    单选框：<input type="radio">
    <br>
    多选框：<input type="checkbox">
    <br>
    上传文件：<input type="file">
    <br>
    提交按钮：<input type="submit">
    <br>
    重置按钮：<input type="reset">
    <br>
    普通按钮：<input type="button">
    <br>
    文本提示：<input type="输入数字">

---

效果：

input系列标签-单选框(补充）
name=" " 有相同name属性值的单选框为一组，且一组中只有一个被选中
checked=" " 默认选中
type=“radio” 表明单选框

<br>
    性别：<input type="radio">男 <input type="radio">女
    <br>
    性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女
    <br>
    性别：<input type="radio">男 <input type="radio" checked>女

效果：

格式： type=" "
submit---------提交按钮，用于提交
reset----------重置按钮，用于重置
button---------普通按钮，默认无功能，配合js添加功能使用

注意事项：如果要实现以上的按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹使用即可，等下有事例

<form action="">
        文本框：<input type="text">
        <br>
        密码框：<input type="password">
        <br>
        单选框：<input type="radio">
        <br>
        多选框：<input type="checkbox">
        <br>
     上传文件：<input type="file">
        <br>
    </form>

1.2：button系列标签

格式： <button>  </button>（双标签，可以包裹其他的内容：文字、图片等）
type="submit"
type="reset"
type="button"
这些功能和input的功能一样

	<button>button提交按钮</button>
    <button>button重置按钮</button>
    <button>button普通按钮</button>

效果：

1.3：select下拉菜单标签

格式：  <select name="" id="">
			<option value="">xxxx</option>
		</select>
-----------------------------------------------
select:下拉菜单的整体
option:下拉菜单的某一项

所在城市：<select name="" id="">
            <option value="">广州</option>
            <option value="">上海</option>
            <option value="">河南</option>
            <option value="">北京</option>
            <option value="">河北</option>
            <option value="">山西</option>
            <option value="">山东</option>
    </select>
同时你自己也可以把这个格式记住

效果：

1.4：textarea文本域标签-表单控件

文本域标签：<textarea name="" id="" cols="30" rows="10">内容</textarea>
rows="文本域内可见行数"
cols="文本域内可见宽度"

右下角可以拖拽改变大小，实际开发针对样式用css设置。

1.5：label标签

<label for=""></label>------------->绑定内容与表单标签之间的关系

第一种使用方法：<br>
    <ol>
        <li>使用label标签把内容包裹起来</li>
        <li>在表单标签上添加id属性</li>
        <li>在label标签的for属性中设置对应的id属性值</li>
    </ol>
    性别：
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <input type="radio" name="sex">女
    <br>
    <br>
    第二种使用方法：<br>
    <ol>
        <li>直接使用label标签把内容(文本）和表单标签一起包裹起来</li>
        <li>把label标签上的for属性删除即可</li>
    </ol>
    性别：
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <label for=""><input type="radio" name="sex">女</label>
    <br>

效果（两种方法效果是一样的）

二：语义化标签

2.1：无语义化标签

1:  div标签------一行只显示一个（独占一行）
2：span标签------一行只显示多个

2.2：有语义化标签 （了解）

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

1：header---------网页头部
2：nav------------网页导航
3: footer---------网页底部
4: aside----------网页侧边栏
5: section--------网页区块
6: article--------网页文章

这些我也是只是了解的，暂时对于初学的我并没有更多地用到。

	<header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>

三：字符实体

3.1：字符实体

在网页中展示特殊符号效果时，例如网页中假如只认识一个空格时，需要用字符实体来替代

格式：&英文;------------->（这里的分号不要遗漏）

以上就是我对html的基础知识的总结，总之对于这些一定不要死记硬背，因为真的没有必要，经常用自然而然就记住了，目前我也正在努力地学习，下一节我会更新css部分的章节基础知识。