Day 1 文本类标签
<strong>我不吃牛肉<br></strong>
<b>我不吃牛肉<br></b>
<em>我不吃牛肉</em><br></em>
<i>我不吃牛肉<br></i>
<u>我不吃牛肉<br></u>
<del>我不吃牛肉</del>
在上面所显示的代码中,strong \ b 标签为粗体,em \ i 标签为斜体,u标签为下划线字体,del标签为删除线字体,运行后呈现为下图:
接下来是标题及不同文字表示方法的各种标签:
<p>
是是是
</p>
<p align = "left">
是是是
</p>
<p align = "right">
是是是
</p>
<p align = "center">
是是是
</p>
其中 p标签属于段落标签的一种,两个相邻的 p标签之间会空一行;而 p标签中所包含的 align属性标签,用来改变文字所在的位置,如上述代码中的“left”则是向左对齐(默认值)、“rignt”向右对齐、“center”居中。运行后如下图:
<font color = "blue">
是是是
</font><br>
<font color = "#9400D3">
是是是
</font><br>
上述代码运用的是 font标签,用于设置字体;其中 color为属性标签,用于设置颜色;(PS:font标签末尾的 br标签是换行标签,与其相同用法还有 hr标签,用于设置水平分割线)。运行如下图:
下面介绍的是 sub下标标签 、sup上标标签 、pre原样输出内容标签 、 span修饰文本的标签(标准的行内标签) :
<!-- sup 上标(指数) -->
2<sup>3</sup><br>
<!-- sub 下标 -->
a<sub>1</sub>+a<sub>2</sub>+......+a<sub>n</sub><br>
<!-- pre 原样输出 -->
<pre>
是是是
[查理chli]
</pre>
<!-- span 行内标签 在一行输出(不能自动换行) -->
<span style="color: aquamarine;font-size: 31px;">
是是是
</span>
具体表现如下图:
还有用于设置文本标题的标签: hn标题标签(有h1,h2,h3,h4,h5,h6六种大小,从左往右依次变小) div标准的块级标签;
<!-- hn 标题 n = 1-6 字从大到小-->
<h1>哈哈哈</h1>
<h2>哈哈哈</h2>
<h3>哈哈哈</h3>
<!-- div 盒子布局 -->
<div>
123456
</div>
<div>
123456
</div>
<div>
123456
</div>
行内标签与块级标签的区别如下:
行内标签:不能自动换行,除非这一行的内容铺满整个页面;如 span
块级标签:自动换行,独占一行。如 div 、hn 、p 、hr
下面介绍各类文本框:语法格式为 input标签;
<p>
用户名:<input type="text" name="username">
</p>
<p>
密码:<input type="password" name="password">
</p>
<p>
性别:<input type="radio" name="gender">男
<input type="radio" name="gender">女
</p>
<p>
爱好:<input type="checkbox" name="aihao">睡觉
<input type="checkbox" name="aihao">吃饭
</p>
<input type="submit" value="登录">
<input type="reset">
<input type="button" value="注册"><br>
<input type="file"><br>
<input type="image" src="C:\Users\Lenovo\Desktop\前端\IMG_20231210_222801.jpg" width="50px"><br>
邮箱:<input type="email"><br>
<input type="hidden">
<input type="color"><br>
<input type="date"><br>
<input type="time"><br>
<input type="datetime-local"><br>
<input type="range"><br>
<!-- text 文本框 password 密码框 radio 单选
checkbox 多选 submit 提交 reset 重置
button 普通按钮 file 选择文件 image 图片按钮
email 邮箱 hidden 隐藏域 color 选颜色
date 选日期 time 选时间 datetime-local 选日期和时间
range 进度条 -->
在 input标签中存在 type的取值(在上面代码的注释中解释了各类取值的类型),以下是各种类型的表现:
上面代码中的 form标签一般会和 input标签连用(其中 action属性标签为跳转的路径; method属性标签用来明确表单提交的方式:有 get(默认值) / post 两种; name属性标签为表单的名称)