web中html的学习

常用标签

 <p>         
手机充值、IP卡/电话卡<br/>
移动|100|联通|50 <br> 
</p> 
  • 常用标签 标题<h1></h1>-<h6></h6>,独占一格,字体字号有大递减

  • 段落<p></p>独占一格

  • 换行<br/>

  • 文本格式化标签:加粗<strong></strong> 斜体<em></em> 删除线<del></del> 下划线<ins></ins>-->

<img src="qq.jpg" title="qq" borden="1"/> 
  • 图片的标签:

  • <img/> 图片的属性及属性值:

  • 必需属性 src="图片名(路径)"

  • --路径一般有绝对路径(网址,本地地址);相对路径(同级写名字;下一级;/直到同级,上一级:../直到同级)

  • 替换文字 alt="图片无显示时显示的文字"

  • 提示文字 title="提示文字"

  • 图像的宽 width="数"

  • 图像的高 height="数"

  • 图像的边框 border="1/0"

超链接

 <a href="https://www.zsc.edu.cn/">电子科技大学中山学院</a>     <br/>     
<a href="login.html">注册页面</a>     <br/>    
 <a href="#help">“帮助”位置锚点</a><br/>     
<a href="https://mail.qq.com/">邮箱链接</a>          
<h3 id="help">帮助</h3>
  • 超链接标签<a></a>

  • 超链接的属性及属性值: 必需属性 href

  • --href的属性值:

  • href="地址"(外部网址,内部地址)

  • 空链接 href="#"

  • 网页元素添加超链接<a href="地址">元素格式</a>

  • 锚点链接 <a href="#地址"></a>

  • <h3 id="地址"></h3>

表格

<table border="1">        
 <caption>这是表格的题目        
 <tr>             
<td colspan="3">这个单元格格跨列了</td>  
</tr>   
      
<tr>              
<td rowspan="2">这个单元格格跨行了</td> 
 <td>【2,2】</td>             
<td>【2,3】</td>        
 </tr>          
<tr>             
<td>【3,2】</td>             
<td>【3,3】</td>        
 </tr>    
 </tabal>
  • 表格标签<table><tr><td></td></tr></table>

  • 表格的属性及属性值:

  • 必需写在<table>中:

    • 对齐: align="left"/"center"/"right"

    • 边框: border="1"/"0"

    • 格与表的宽度 cellpadding="0"

    • 格与格之间的宽度 cellspacing="0"

    • 格宽 width="数"

    • 格高 height="数"

  • 必需写在<td>中:

    • 跨行<td rowspan="2"></td>这个单元格格跨2行了

    • 跨列<td colspan="3"></td>这个单元格格跨3列了

    • 注意,跨行写在上角,跨列写在左角,已跨的表格要删掉

  • 补充标签:

  • 1.<table> <caption>这是表格的题目 </tabal>

  • 2.表头:<thead></thead>

  • 3.表主体:<hbody></hbody>

  • 4.表头单元格<th></th>

列表

<ol>         
<li>如何注册会员?</li>         
<li>如何激活会员名?</li>
 </ol> 
  • 列表标签 有序<ul> <li></li> </ul>,

  • 无序<ol> <li></li> </ol>,

  • 自定义<dl> <dt></dt></dl>

  • <dl> <dd></dd></dl> 注意 ul,ol,dl只能有所属的li/dd标签

  • 表单

<table width="300"><!--定义表格宽度-->        
 <tr>             
<td>用户名:</td>             
<td><input type="text"></td>         
</tr>          
<tr>             
<td>密码:</td>             
<td><input type="password"></td>        
 </tr>         
 <tr>             
<td>性别;</td>             
<td>
<input type="radio" name="sex" ><img src="male.gif">男                 
<input type="radio" name="sex"><img src="female.gif">女             
</td>        
 </tr>          
<tr>             
<td>爱好:</td>             
<td>                 
<input type="checkbox" name="aihao">运动                 
<input type="checkbox" name="aihao">聊天                 
<input type="checkbox" name="aihao">游戏             
</td>         
</tr>          
<tr>             
<td>职业:</td>             
<td>                 
<select>                     
<option>学生</option>                     
<option>老师</option>                 
</select>            
 </td>         
</tr>         
<tr>             
<td><input type="submit" name="提交"></td>             
<td><input type="reset" name="清空"></td>         
</tr>     
</table>
  • <!--表单标签<form></form>

  • 表单的属性及属性值: 属性:<form> <input name value check maxlength/> </form>,

  • 下拉 <form> <select> <option></option> </select></form>

  • 文本域 <form> <textarea></textarea></form>

  • 绑定表单<lable for="名"></lable><id="名">

  • 属性值: 必需写在<form>中:

    • 地址 action="地址"

    • 提交方式 method="get"/"post"

    • 表单域的名字 name="名字"

  • 必需写在<input>中:

文本框 input type="text"

  • 密码框 input type="password"

  • 单选 input type="radio"

  • 多选 input type="checkbox"

  • 提交 input type="submit"

  • 清空 input type="reset"

  • 普通按钮 input type="button"

  • 上传该文件 input type="file"

  • 必需写在name中

    • name=""实现单选或者多选name相同

  • 必需写在value中

    • value=""后台看的

  • 必需写在check中

check="checked"默认选项

  • 必需写在maxlength中

    • maxlength="数"规定文本长度

  • 必需写在<textarea>中 cols="行数" rows="列数"

  • <select> </select>中<option></option> 至少2对

    • 默认选中<option selected="selected"></option>


web中html的学习
http://localhost:8090//archives/webzhong-htmlde-xue-xi
作者
文伊仪
发布于
2024年09月24日
许可协议