html进阶语法(2)

简介: 文本域作用:多行输入文本的表单控件。

html进阶语法(1):https://developer.aliyun.com/article/1393300

文本域

作用:多行输入文本的表单控件。

ee5c2299e096456189c5fb9e81390549.png

<textarea>默认提示文字</textarea>

注意点:

  • 实际开发中,使用 CSS 设置 文本域的尺寸
  • 实际开发中,一般禁用右下角的拖拽功能

label 标签

作用:网页中,某个标签的说明文本。

1d6ab8bc7867417297bec1e8d743c9a0.png

经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。

e969621327994383bbf3a4e30f950f27.png

  • 写法一
  • label 标签只包裹内容,不包裹表单控件
  • 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
<input type="radio" id="man">
<label for="man">男</label>
  • 写法二:使用 label 标签包裹文字和表单控件,不需要属性
<label><input type="radio"> 女</label>

提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮

<button type="">按钮</button>


128581fea8224dcb91f21929b863d531.png


<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名:<input type="text">
  <br><br>
  密码:<input type="password">
  <br><br>
  <!-- 如果省略 type 属性,功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

提示:按钮需配合 form 标签(表单区域)才能实现对应的功能。

04-语义化

无语义的布局标签

作用:布局网页(划分网页区域,摆放内容)

  • div:独占一行
  • span:不换行
<div>div 标签,独占一行</div>
<span>span 标签,不换行</span>

有语义的布局标签

b314c4d740ef42429671c44c0571e2db.png

05-字符实体

af99e2f7c1224f8fb2f7636a8443b2b0.png

06-综合案例一-体育新闻列表

52d7269ad4424e03afc0f9b80beddd17.png

<ul>
  <li>
    <img src="./images/1.jpg" alt="">
    <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
  </li>
  <li>
    <img src="./images/2.jpg" alt="">
    <h3>梅州主帅:申花有强有力的教练组 球员体能水平高</h3>
  </li>
  <li>
    <img src="./images/3.jpg" alt="">
    <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
  </li>
</ul>

07-综合案例二-注册信息

dd9c2812a12941ad9c06949da40ab405.png

<h1>注册信息</h1>
<form action="">
  <!-- 表单控件 -->
  <!-- 个人信息 -->
  <h2>个人信息</h2>
  <label>姓名:</label><input type="text" placeholder="请输入真实姓名">
  <br><br>
  <label>密码:</label><input type="password" placeholder="请输入密码">
  <br><br>
  <label>确认密码:</label><input type="password" placeholder="请输入确认密码">
  <br><br>
  <label>性别:</label>
  <label><input type="radio" name="gender"> 男</label>
  <label><input type="radio" name="gender" checked> 女</label>
  <br><br>
  <label>居住城市:</label>
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>武汉</option>
  </select>
  <!-- 教育经历 -->
  <h2>教育经历</h2>
  <label>最高学历:</label>
  <select>
    <option>博士</option>
    <option>硕士</option>
    <option>本科</option>
    <option>大专</option>
  </select>
  <br><br>
  <label>学校名称:</label><input type="text">
  <br><br>
  <label>所学专业:</label><input type="text">
  <br><br>
  <label>在校时间:</label>
  <select>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
  </select>
  --
  <select>
    <option>2019</option>
    <option>2020</option>
    <option>2021</option>
    <option>2022</option>
  </select>
  <!-- 工作经历 -->
  <h2>工作经历</h2>
  <label>公司名称:</label><input type="text">
  <br><br>
  <label>工作描述:</label>
  <br>
  <textarea></textarea>
  <br><br>
  <!-- 协议 和 按钮 -->
  <input type="checkbox"><label>已阅读并同意以下协议:</label>
  <ul>
    <li><a href="#">《用户服务协议》</a></li>
    <li><a href="#">《隐私政策》</a></li>
  </ul>
  <br><br>
  <button>免费注册</button>
  <button type="reset">重新填写</button>
</form>


相关文章
|
7天前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
19天前
HTML 链接语法
【7月更文挑战第1天】HTML 链接语法。
19 1
|
22天前
|
移动开发 前端开发 JavaScript
html语法基础
【6月更文挑战第28天】html语法基础
20 1
|
19天前
|
移动开发 前端开发 JavaScript
HTML:认识HTML及基本语法
HTML:认识HTML及基本语法
|
2月前
HTML语法规范及实践指南
HTML语法规范及实践指南
26 0
|
2月前
|
JavaScript 前端开发
新手向:HTML进阶
HTML一些进阶内容
24 0
|
2月前
|
Web App开发 JavaScript 前端开发
html基础操练和进阶修炼宝典
html基础操练和进阶修炼宝典
|
2月前
|
开发者
html语法结构
【4月更文挑战第18天】html语法结构
18 1
|
2月前
|
前端开发 开发者
html语法
【4月更文挑战第18天】html语法
16 1
|
2月前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。