html学习

最新推荐文章于 2022-07-10 02:07:49 发布

即客。

最新推荐文章于 2022-07-10 02:07:49 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/qq_39887036/article/details/103729866

版权

基本标签

粗体

<b>粗体标签1</b>
<strong>粗体标签2</strong>

注释

<!-- 注释内容 -->

换行

<br />

横线

<hr />

段落

<p>This is a paragtaph</p>

字体变大，变小

<big>Bigger</big>
<small>Smaller</small>

斜体

<p>This is Italic</p>
<p>This is Italic,too</p>

下标字体

<sub>下标字体是什么</sub>

上标字体

<sup>这是上标字体</sup>

下划线

<u>This is UnderLine</u>

11.删除线

<s>This is Delete_line</s>

12.预格式文本

<pre>预格式文本？</pre>

13.可移动文本

<marquee direction="right">I am moving,direction right</marquee>
<marquee direction="left"> I am moving,direction left</marquee>

13.插入图片

<img src="img/a.jpg" />

14.链接

<a href="https://github.com/" target="_blank">Click to gitHub</a>

超链接中的 Target 属性

_blank : 在新窗口中打开
_self : 在本窗口中打开
_parent :在父窗口中打开
_top :在最顶层窗口中打开
_framename: 在框架中打开（框架窗口）

15.字体标签

<font size="23" color="red">Wow!</font>

16.无序标签

<ul>
   <li>吃饭</li>
   <li>睡觉</li>
   <li>洗澡</li>
   <li>游泳</li>
  </ul>

17.有序标签

<ol>
   <li>抽烟</li>
   <li>喝酒</li>
   <li>烫头</li>
   <li>蹦迪</li>
  </ol>

18.文本域标签

<textarea rows="10" cols="30"></textarea>

19.滚动标签

<marquee direction="right" width="400px" behavior="alternate">弹弹弹</marquee>
  <marquee direction="left" width="400px" behavior="scroll">左进又出</marquee>
  <marquee direction="down" height="30px" behavior="slide">一次就好</marquee>
  <marquee direction="up" height="30px" behavior="alternate">反复弹跳</marquee>

direction 是滚动方向
（up–上，down–下，left–左，right–右）
behavior是滚动模式
（alternate–反复，scroll–右进左出，slide–一次即止）

表单标签(Input)

文本标签

<p>文本标签<input type="text" placeholder="请输入纯字母的用户名"></p>

密码域标签

<p>密码域标签<input type="password" placeholder="请输入6-12"位数字密码></p>

按钮标签

<p><input type="button" value="按钮标签" /></p>

单选标签
( name 属性仅能存在一个)

<p>
   <input type="radio" name="sex"/>单选标签（男）
   &nbsp;&nbsp;&nbsp;&nbsp;
   <input type="radio" name="sex"/>单选标签（女）
  </p>

日期标签

<p>日期标签<<input type="date"/>/p>

颜色标签

<p>颜色标签<input type="color"/></p>

文件标签

<p>文件标签<input type="file"/></p>

复选标签

<p>
   <input type="checkbox"  />篮球
   <input type="checkbox"  />足球
   <input type="checkbox"  />排球
  </p>

在form中使用提交标签

<p>在form中使用<input type="submit" value="登录"/></p>

在form中使用重置标签

<p>在form中使用<input type="reset"  value="重置" /></p>

Form表单

<!-- form 表单 -->
  <center>
  	 <form action="http://www.baidu.com" method="post">
   		<p>姓名:<input type="text" name="user" id="user" placeholder="请输入用户名" /></p>
   		<p>密码:<input type="password" name="password" id="password" placeholder="请输入密码" /></p>
    		<p>文件:<input type="file" name="fileName" id="fileName"  /></p>
   		<p>
     			<input type="submit"  value="登录" />
    			 &nbsp;&nbsp;
     			<input type="reset"  value="重置" />
  		 </p>
   	</form>
  </center>

注：

submit 与 commit 是连用的
action：跳转地址，method: 控制数据提交的方式，默认get
提交方式有两个
get:提交数据时，数据会在地址栏显示出来，不安全
post:提交数据时，数据不会再地址栏显示出来，安全
4.提交数据跳转网页的形式：?name = value & name2 = value2 &…
5.当form 里有文件 (input) 时，必须使用 post 方法

效果图
在这里插入图片描述

Table表单

<center>
   <table border="1px" cellspacing="0px" width="400px" height="40px">
    	<tr >
     		<th colspan="2">
      			Header
     		</th>
    	</tr>
    	<tr>
     		<td>
      			row1 col1
     		</td>
     		<td>
      			row1 col2
     		</td>
    	</tr>
    	<tr>
     		<td>
     	 		row2 col1
     		</td>
     		<td>
      			row2 col2
     		</td>
    	</tr>
    	<tr>
     		<td>
      			row3 col1
     		</td>
     		<td>
      			row3 col2
     		</td>
    	</tr>
   </table>
  </center>