首页/小白筆記

HTML-Label-框架-字符实体-全局属性-CSS基本语法结构

 2023-09-10 阅读 17 评论 0

摘要：HTML-Label-框架-字符实体-全局属性-CSS基本语法结构 1 回顾 1.1 列表 ul ol li dl dt dd 1.2 表格 table caption thead tfoot tbody tr th td 2 表单 2.1 表单总体设置 <!--表单--> <form action="http://www.baidu.com/s" target="_blank"

HTML-Label-框架-字符实体-全局属性-CSS基本语法结构

1 回顾

1.1 列表

ul
ol
li
dl
dt
dd

1.2 表格

table
caption
thead
tfoot
tbody
tr
th
td

2 表单

2.1 表单总体设置

<!--表单-->
<form action="http://www.baidu.com/s" target="_blank"><!--输入框--><input type="text" name="wd"><!--提交按钮--><button>搜 索</button></form>

表单中所有的东西都需要包裹在 form 标签中， form 标签就表示一个表单
form 标签具有如下属性：action 属性，可以设置表单的提交地址method 属性，设置提交的请求方式target 属性，设置提交的地址在本窗口打开还是新窗口打开，值：_self、_blank

2.2 表单控件

① 文本输入框

<input type="text">

可以设置 maxlength 属性限制最大输入长度。

② 密码输入框

<input type="password">

可以设置 maxlength 属性限制最大输入长度。

③ 单选按钮

<input type="radio" name="sex"> 女
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 其他
  1. 多个单选按钮需要把 name 属性的值设置为相同的，才可以实现单选效果。
  2. 设置 checked 属性，可以让该单选按钮默认选中， checked 属性无需给值。

④ 复选框

<input type="checkbox"> 睡觉
<input type="checkbox" checked> 抽烟
<input type="checkbox" checked> 喝酒
<input type="checkbox"> 烫头发
  1. 设置 checked 属性，该复选中默认被选中， checked 属性无需给值。

⑤ 提交按钮

<input type="submit" value="提交按钮">
<button type="submit">提交按钮</button>
<button>提交按钮</button>

⑥ 重置按钮

<input type="reset" value="重置按钮">
<button type="reset">重置按钮</button>

⑦ 普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

⑧ 文本域

<textarea rows="10" cols="60"></textarea>
  1. rows 属性设置文本域默认显示多少行，影响文本域的高度。
  2. cols 属性设置文本域默认一行显示多少字，影响文本域的宽度。

⑨ 下拉选项

<select><option>小学</option><option>初中</option><option>高中</option><option>中专</option><option>大专</option><option>本科</option><option selected>研究生</option>
</select>
  1. 默认选中的是第一个选项，通过给 option 标签设置 selected 属性让该选项默认选中，selected 属性无需给值。

2.3 表单控件的属性

① name 属性

  1. 每个表单控件都应该设置 name 属性，name 属性指定数据名称，表单提交之后，后端程序可以通过数据名称获取数据。

  2. 下拉选项中，select 标签设置 name 属性，option 标签不需要。

  3. 多个单选按钮只有设置了同值的name属性，才具有单选的效果。

  4. css表单布局、作为按钮的表单控制，不能设置 name 属性。

② value 属性

  1. 使用 input 标签实现提交按钮、重置按钮、普通按钮，value 属性可以设置按钮上的文字。
  2. 对于单选按钮和复选框，value 数值指定真正向后端提交的数据。
  3. 下拉选项的 option，value 属性指定真正提交的数据；如果没有 value 属性，真正提交的数据是option标签内的文字。
  4. 文本输入框和密码输入框，value 属性可以设置默认显示在输入框内的文字。（注意：文本域指定默认文字写在双标签之间）

③ disabled 属性

  1. 表单中所有的控件都可以设置 disabled 属性，该属性无需给值即可生效，设置了 disabled 属性之后，该表单控件就不能使用了。
  2. select 和 option 都可以设置 disabled，select 设置整个下拉选项不能使用，option 设置只有该选项无法给选择。

2.4 label 标签的使用

<!-- label 标签关联文本输入框， 密码输入框、文本域、下拉选项也采用这种方式关联
-->
<label for="addressInput">地址：</label>
<input type="text" id="addressInput">
<br><!--label 标签关联单选按钮，复选框也采用这种方式关联
-->
性别：
<label><input type="radio" name="sex">女
</label>
<label><input type="radio" name="sex">男
</label>
<label><input type="radio" name="sex">其他
</label>

2.5 fieldset 标签和 legend 标签的使用（了解）

<form action="1.php"><fieldset><legend>表单的标题</legend>表单控件....</fieldset>
</form>

2.6 表单标签总结

标签名语义和功能属性单标签和双标签
form表单action 属性： 指定表单提交的地址
method 属性： 指定表单提交的请求方式
target 属性： 与超链接target属性功能一致		双标签
input各种形式的表单控件type 属性： 设置表单控件的类型。
maxlength 属性： 设置最大可输入长度，用于文本和密码输入框
checked 属性： 默认选中，用于单选按钮和复选框。		单标签
button按钮type 属性： 设置按钮的类型。双标签
textarea文本域rows 属性： 设置默认显示的行数。
cols 属性： 设置一行默认显示的文字个数。		双标签
select下拉框双标签
option下拉框的选项selected 属性： 默认选中。双标签
label与表单控件关联for 属性： 通过该属性指定要关联表单控件的 ID双标签
fieldset表格边框双标签
legend表格标题双标签

总结：

  1. input 标签 type 属性的值： text、password、radio、checkbox、submit、reset、button，默认值是 text。
  2. button 标签 type 属性的值： submit、reset、button，默认值是 submit

3 框架标签

标签名功能和语义属性单标签还是双标签
iframe框架，可以引入其他页面获取其他类型的资源src 属性： 指定要引入的页面或其他资源的地址。
width 属性： 指定框架的宽度.
**height 属性：**指定框架的高度。
frameborder 属性： 设置有无边框，值: 0 或者 1		双标签

4 HTML 字符实体

空格		&nbsp;
<		 &lt;
>		 &gt;
&		 &amp;
¥		 &yen;
©        &copy;
×        &times;
÷        &divide;

5 全局属性

全局属性 就是所有的标签都具有的属性。

class 属性：	指定类名，用于 css
id 属性：		指定 ID 名，用于唯一标识一个元素。
style 属性：	用于直接设置 CSS 样式
name 属性：	给标签指定一个名字
title 属性：   鼠标悬停在元素上的文字提示，大部分情况只有图片和超链接会设置该属性。
lang 属性：	指定标签内文本所使用的的语言，一般该属性设置到 html 根标签上即可，值：cn、en、fr 等

6 meta 元信息

<!--字符集编码-->
<meta charset="utf-8"><!--网页关键字：-->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语"><!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关"><!-- 网页定时跳转：(10秒后跳转到百度页面) -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

7 VSCode 的使用

7.1 VSCode 相关配置

跳转默认字体大小：   	左下角小齿轮 -> 选择“设置” -> 常用设置 -> Edit:Font Size跳转目录结构层级距离：	  左下角小齿轮 -> 选择"设置" -> 工作台 -> 外观 -> Tree:Indent避免目录层级紧凑显示：   左下角小齿轮 -> 选择"设置" -> 功能 -> 资源管理器 -> Compact Folders 去掉前面的勾设置自动保存： 左下角小齿轮  -> 选择“设置” -> 常用设置 -> Files:Auto Save修改编辑器的颜色主题：  左下角小齿轮 -> 选择“颜色主题”修改文件图标主题：		左下角小齿轮 -> 选择"文件图标主题"

7.2 推荐的扩展

1. Chinese (Simplified) Language Pack for Visual Studio Code 中文扩展2. Live Serve

8 CSS 的基本语法

8.1 HTML 和 CSS 的关系

CSS 对某一个元素或多个元素设置样式，样式作用在元素上。

8.2 HTML 元素树

祖先元素
父元素
子元素
后代元素
兄弟元素（具有相同父元素的元素）

元素之间的关系表述只与元素的位置有关，与元素的标签名无关。

8.3 在 HTML 中使用 CSS

① 行内式

<p style="CSS样式.."></p>

② 内联式

<html><head><style>CSS 样式....</style></head><body></body>
</html>

③ 外链式

把 CSS 样式，写在独立的 css 文件中，HTML 文件使用 link 标签与 CSS 文件相关联

<link rel="stylesheet" href="css文件的地址">

1.4 CSS 基本语法结构

① 内嵌式和外链式的语法结构

选择器 {CSS属性： 值;CSS属性： 值;CSS属性： 值;
}

html框架标签有哪些。选择器： 用来选择到需要设置样式的元素。

声明块： 每个选择器后面用大括号包裹起来的就是声明块。声明块中由多条声明组成。

声明： 一条声明由 CSS 属性和该属性的值组成，每条声明的结尾是分号。

② 行内式的语法结构

<标签 style="CSS属性:值; CSS属性:值"></标签>

③ HTML 属性 和 CSS 属性

<!-- 使用 img 标签的 width 属性和 height 属性设置图片大小 -->
<img src="芳芳.jpg" alt="芳芳" width="300" height="300"><!-- 使用css属性width和height设置图片大小； style 是 HTML 属性！ -->
<img src="芳芳.jpg" alt="芳芳" style="width:300px;height:300px">

8.5 CSS 的层叠性

通过多种形式，多种选择器对某个元素进行样式设置，所有的样式都会作用在该元素上，这就是层叠性。

如果多种形式设置的样式有重复的样式，行内式的优先级大于内嵌式和外链式。 内嵌式和外链式没有区别，参照选择器的优先级，选择器优先级一样，后面的样式优先级高。

8.6 CSS 注释

/* CSS 注释 *//*CSS 注释CSS 注释CSS 注释
*/

版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接：https://hbdhgg.com/1/40182.html

上一篇：CSS3-边框-外轮廓-文本-渐变-WEB字体
下一篇：【Vue】一个案例带你搞懂methods、watch及computed的使用规则
标签：css表单布局html框架标签有哪些html基本框架代码css框架html基础框架html的全局属性html框架标签html form表单属性
css表单布局

发表评论:

最新文章
阅读排行
猜你喜欢
热门标签

本站为非赢利网站，部分文章来源或改编自互联网及其他公众平台，主要目的在于分享信息，版权归原作者所有，内容仅供读者参考，如有侵权请联系我们删除！

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息