HTML基础知识

最新推荐文章于 2022-11-14 16:39:29 发布

weixin_34406061

最新推荐文章于 2022-11-14 16:39:29 发布

阅读量68

点赞数

原文链接：https://my.oschina.net/u/2346786/blog/688632

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.加入强调语气，使用<strong>和<em>标签

<em>需要强调的文本</em>  

<strong>需要强调的文本</strong>

2.<q>标签，短文本引用

自动为文本加入双引号
<q>引用文本</q>

3.<blockquote>标签，长文本引用

自动前后缩进
<blockquote>引用文本</blockquote>

4.<br />相当于换行回车

5. 相当于输入空格

6.<hr>标签，添加水平横线

7.<address>标签，为网页加入地址信息

自动换行斜体
<address>联系地址信息</address>

8.<code>标签,为网页加入一行代码

<code>代码语言</code>
注：如果是多行代码，可以使用<pre>标签。

8.<ul>、<ol>添加列表

<ul>//ul-li是没有前后顺序的信息列表。默认前有黑点
   <li>我的第一个列表信息。</li>
</ul>
<ol>//ol-li是有前后顺序的信息列表。默认前为数字
   <li>我的第一个列表信息。</li>
</ol>

9.<table>表格

创建表格的四个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。

6.摘要：<table summary="表格简介文本">
7.标题：<caption>标题文本</caption>

<table summary="表格简介文本">
 <caption>标题文本</caption>
  <tbody>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
    <tr>
      <td>三班</td>
      <td>32</td>
      <td>80</td>
      </tr>
  </tbody>
</table>

10.<a>

//target="_blank"在新窗口打开
<a href="目标网址" target="_blank">click here!</a>

11.<img>

<img src = "myimage.gif" alt = "占位符" title = "My Image" />

12.表单标签与文本框

<form   method="传送方式"   action="服务器文件">
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）。

<form method="post" action="save.php">
      
      <label for="username">用户名:</label>//文本
      <input type="text"  name="username" id="username" value="" />//输入框
      <label for="pass">密码:</label>
      <input type="password"  name="pass" id="pass" value="" />    
      <input type="submit" value="确定"  name="submit" />
      <input type="reset" value="重置" name="reset" />
</form>  


文本输入框、密码输入框
<form>
   <input type="text/password" name="名称" value="文本" />
</form>
1、type：
   当type="text"时，输入框为文本输入框;
   当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：文本输入框设置默认值。(一般起到提示作用)


文本域
当用户需要在表单中输入大段文字时，需要用到文本输入域。
<textarea  rows="行数" cols="列数">文本</textarea>

<form action="save.php" method="post" >
    <label>个人简介：</label>
    <textarea cols="50" rows="10">在这里输入内容...</textarea>
    <input type="submit" value="确定"  name="submit" />
    <input type="reset" value="重置"  name="reset" />
</form> 

ps：当type = “submit” 为提交按钮，type="reset"为重置按钮

13.单选框、多选框

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
1、type:
   当 type="radio" 时，控件为单选框
   当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>
同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

14.下拉列表框

1、value：
向服务器提交的值
2、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>

转载于:https://my.oschina.net/u/2346786/blog/688632