HTML里常用的标签｜青训营笔记

这是我参与「第四届青训营」笔记创作活动的第1天

HTML标签

html标签我们并不陌生，我来总结一波我之前常用的一些标签吧～

• <h1>~<h6> 一级～六级标题

• <p> 段落标签

• <div> 块标签

• <progress> 进度条标签

  • max=:总长度
  • value=:当前长度

• <audio controls src="">：音频标签

• <strong>:内容加粗

• <img src=" " alt="替换文本"/>:插入图片

• <a href="网址" target=" ">

  • target="_self":当前页面打开
  • target="_blank":新页面打开
  • text-decoration:none 可去除a标签自带的下划线
  • color: :设置文本样式（默认是蓝色）

• ul-li:无序列表标签

  • ul、li都是块状标签

• ol-li:有序列表标签

  • ul、li都是块状标签

• <form action=""> :表单控件

  • 块状标签
  • action=""：表单信息将提交给当前页面
  • form标签不可嵌套form标签🙅

更多表单控件

• input type="" placeholder="" name="" value="" redonly/disabled:输入标签
  • type属性(改变类型)取值：
    • text：文本
    • password:密码输入框
    • radio:单选框
      • 常与label连用 同属于同一道单选题要有同样的name,内容写在最后
    • checkbox：复选框
      • 规则同radio
    • number：用于输入浮点数的控件
    • date:用于输入日期
  • placehoder:占位文本
  • name:input的名字
  • value：输入框中预填写用户的昵称
  • redonly:只读/ 对象：input和textarea/ 仅使文本框不能收入/外观没有变化
  • disabled:对象：所有表单元素/ 使文本框不能输入，当表单以POST或GET的方式提交时，使用了disabled的元素的值不会被传递过去/ 使文本框变灰
  • 去掉默认的input效果：
    • border:none;
    • outline:none;
• textarea name="" row="" cols="" placeholder:文本域
  • row:行数
  • cols:文本域的可视宽度，可写可不写
  • 其余名词与input含义相差不大

<label>与单选框的妙用

   <label> <input type="radio" name="gender" value="male" />男 </label>

   <label> <input type="radio" name="gender" value="female" />女 </label>

男 女

<input id="male" type="radio" name="gender" value="male" />

<label for="male">男</label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女</label>
第二种添加了id，以此建立联系

男 女

选项菜单

<!--选项菜单-->
<select name="career" multiple>
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>

<!--option的value值要互不相同，若想要一个多选菜单，则给select标签添加multiple属性-->

效果：

请选择职业 公司职员 自由职业者 学生 其他

按钮控件

<!--按钮控件-->
<button type="submit">注册</button>
type是为了确保数据的提交
-------------------------

效果如下：

注册

新学的标签～

• <blockquote cite="">:块引用

• <cite>:引用，以斜体显示

• <q>:" "

• <code>:代码格式

• <pre>:内容保留空格与换行

• <video src="" controls >:视频

写在最后

本人萌新一个，若有错误，大佬轻喷～