HTML基础知识

末蓝、 2022-01-17 16:05 335阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

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

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

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

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

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

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

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

### 5.&nbsp;相当于输入空格 ###

### 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>

### 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

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/9c3133d97b524e209ed861ad0cb180ca.png