前端-HTML学习

HTML页面标签设计

<div style="width: 50%;height: 100%;border-radius:15px;border: black thin solid;padding-top: 5px;">盒子标签</div>
  <!--
   div盒子标签属性
      width:宽
      height:高
      background-color:背景色
      border-radius:边框圆角
      border:边框(颜色 细线 实线)
      padding-top 上边距
  -->
<form>
    form表单
</form>

<table border="0" style="width: 100%;"><!--表格标签-->
	<!--表格的行<tr>标签,列标签<td>,<td>的属性align:水平方向 left right center  -->
    <tr>
    	<td><input type="password" required placeholder="密码"
                   style="width: 90%;border-radius:4px;height: 25px;"/></td>
    </tr>
<!--
              input:文本框的required属性:表示该文本框必填
              input:文本框的placeholder属性是未输入前,文本框默认值
              input:文本框的style属性 是样式 包括字体大小、颜色、边距
              input:文本框的type属性
				字体相关:
                    font-size:设置字体大小。
                    font-family:设置字体类型。
                    font-weight:设置字体粗细,如bold、normal等。
                    font-style:设置字体样式,如italic、normal等。
                 颜色相关:
                    color:设置文本颜色。
                    background-color:设置背景颜色。
                 布局相关:
                    width:设置元素的宽度。
                    height:对于<textarea>元素,可以设置其高度;对于<input type="text">等,通常不直接设					 置高度,而是通过其他方式(如padding、line-height等)间接影响。
                    margin:设置元素的外边距。
                    padding:设置元素的内边距。
                 边框相关:
                    border:设置元素的边框样式,可以简写为border: width style color;。
                    border-width、border-style、border-color:分别设置边框的宽度、样式和颜色。
                 文本对齐和缩进:
                    text-align:对于<textarea>元素,可以设置文本的对齐方式,如left、center、right。但请          		   注意,<input>元素通常不支持text-align属性。
                    text-indent:主要用于<p>等块级元素,对<input>和<textarea>不适用。
                 其他:
                    display:设置元素的显示方式,如block、inline、inline-block等。但请注意,对于<input>				  和<textarea>元素,其display属性通常被浏览器默认处理,不建议直接修改。

              input:文本框的type属性
                  type="text"  文本框
						<input type="text" required placeholder="用户名" style="width: 90%;border-							radius:4px;height: 25px;"/>
                  type="password" 密码框
						<input type="password" required placeholder="密码"style="width: 90%;border-						 radius:4px;height: 25px;"/>
                  type="radio" 单选框
						<input name="sex" type="radio" checked/>男 &nbsp;&nbsp;
                  type="checkbox" 多选框
            			  <input type="checkbox" checked/>游泳
              			  <input type="checkbox"/>读书
                  type="submit" 提交按钮
						 
                  type="file" 文件域
                  type="image" 图片按钮
                  type="email" 邮箱框
                  type="url" 网址框
                  type="number" 数字框
                  type="range" 滑块
                  placeholder 文本框的提示内容设置
                  required 非空
              select:下拉框
              textarea:多行文本域
          -->

</table>
内联框架

<a
<iframe name="mainframe" width="800px" height="150px" scrolling="yes" onresize="onresize()" src="login.html"/>
一基础标签
1:<html>:网页标签
2:<head>:头部(网页标题等信息)
3:<body>:主体(网页的所有内容)
4:<title>标签:网页标题(在浏览器窗口标题栏显示)
5:<meta>标签:网页信息摘要
6:<h1></h1><h6>:标题标签(一段文字的标题,由大道小)
7:<p>段落标签(一段文字的内容)段落之间会有一段距离
8:<br/>换行标签(!!没有结束标签)行与行之间比较紧凑
9:<hr/>水平线标签(!!没有结束标签)
10:字体样式
       <strong>...</strong>字体加粗
       <em>...</em>字体倾斜
11:注释<!-- 注释内容 -->
12:特殊符号
       特殊符号	 字符实体	
       空格	  &nbsp;	
       大于号(>)  &gt;	        
       小于号(<)  &lt;	        
       引号(")	  &quot;(成对出现)	  
       版权符号@  &copy;	         
13:图像标签
      <img src="path" alt="text" title="text"  width="x"  height="y" />
       src:图片的地址  alt:图像替代文字  title:鼠标悬停提示文字  width:宽度  height:高度
14:链接标签
    <a href="path" target="目标窗口位置">链接文本或图像</a>
        href:链接路径   target:链接在那个窗口打开(常用值:_self【自身】、_blank【新建】)
    ①:面间链接
           从一个页面链接到另外一个页面   
    ②:锚链接: 
       A页面甲位置到A页面的乙位置
 
            在页面乙位置:<a name="名字" >目标乙的位置</a>
            在页面甲位置:<a href="#名字">甲位置</a>    
       A页面甲位置到B页面的乙位置  
            在页面乙位置:<a name="名字" >目标乙的位置</a>
            在页面甲位置:<a href="页面.html#名字">甲位置</a> 
    ③:功能性链接:

二:列表:数据的一种展示形式
1:无序列表(各个列表项之间没有顺序级别之分)
   <ul type="">
   :列表声明
     <li>桔子</li>
   :每个类表项的起始
     <li>香蕉</li>
  
     <li>苹果</li>   </ul>
           取值	            说明
           disc	    项目符号显示为实体圆心,默认值
           square   项目符号显示为实体方心
           circle   项目符号显示为空心圆2:有序列表(各个列表项之间有顺序之分)
   <ol type="">
  
     <li>桔子</li>
  
     <li>香蕉</li>
  
     <li>苹果</li>   </ol>
            取值	         说明
             1	   使用数字作为项目符号
            A/a	   使用大写/小写字母作为项目符号
            I/i	   使用大写/小写罗马数字作为项目符号
3:定义列表(自定义列表,是标题和注释的结合)
   <dl>
  :列表的开始
     <dt>所属学院</dt>
  :列表项的起始
     <dd>计算机应用</dd>
  :列表项注释的内容
     <dt>所属专业</dt>
  
     <dd>计算机软件工程</dd>

   </dl>
三:表格:由指定行和列组成的。
   <table>
 
     <tr>
    
       <td>第1个单元格的内容</td>
   
       <td>第2个单元格的内容</td>
   
       ……
  
     </tr>
  
     <tr>
    
       <td>第1个单元格的内容</td>
    
       <td>第2个单元格的内容</td>
   
       ……
  
     </tr>   </table><table>属性:
   边框宽度属性:border

<td>属性:
       属性	          值	        说明
      align
  	         left	        左对齐
      水平对齐方式       center   	居中对齐
                         right	        右对齐

      valign
 
    垂直对齐方式        	 top	       顶端对齐
                       middle	       居中对齐
                        bottom	       底端对齐
                       baseline	       基线对齐
  <td colspan="n">单元格内容</td>:所跨的列数  <td rowspan="n">&nbsp;</td>:所跨的行数


四:框架
   1:框架:<frameset>适用于整个页面都用框架实现的场合。
   注意:!!!!!
      改文档声明:Frameset
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
      不能有body标签
         !!!!!

         <frameset>描述窗口分割
         <frame>定义放置在每个框架中的HTML页面。
    
        <frameset cols="25%,50%,*"  rows ="50%,*" border="5">     
           <frame src="the_first.html "/>       
           <frame src="the_second.html "/>
 

       </frameset>      
   
      cols="25%,50%,*" :将页面横向分割3列,1列占总窗口的25%,2列占50%,3列占剩余部分
      rows="50%,*"     :将页面纵向分割2行,1行占窗口的50%,2行占剩余部分

     窗口间的关联(触发链接的时候,second.html将在名为firstframe的<frame>部分中显示)
        框架页面中:<frame src="first.html " name="firstframe"/> 
          分页面中:<a src="second.html"  target="firstframe">....</a>

   2:内联框架:<iframe>:适用于将部分框架内嵌入页面的场合。
         <iframe src="引用的页面地址" name="框架名称" width="框架宽度" height="框架高度"
                 framborder="边框粗细" scrolling="是否出现滚动条"  noresize="是否可以调整框架窗口大小"

        
         <a href="third.html" target="mainFrame">下边显示第三页</a><br />
	 <iframe name="mainFrame" width="800px" height="150px" scrolling="yes" noresize="noresize"  src="subframe/the_second.html" />
   
五:表单
    <form>:表单创建(其他的标签需在它的里面才能生效)
    <form method="提交方式"  action="提交地址" >  
    </form>
   1:method="post";  【比较安全】
      提交后,地址栏中的URL信息没有发生变化,不显示表单数据
   2:method="get";
      提交后,地址栏中URL信息中清晰的显示出表单提交的数据内容

 具体表单
   1:文本框
    <input type="text"  name="标签的名字"  value="默认值" size="文本框的长度" maxlength="输入数据的长度"/>
   2:密码框
    <input type="password"  ......................../>
   3:单选按钮框(在一组单选框中的name值必须相同,单选功能才生效)
    <input type="radio" name="gen" value="" checked="checked(默认选项)"/>&nbsp;
    <input type="radio" name="gen" value=""/>女     
   4:复选框(在一组复选框中的name值一般取相同,这样可以根据name一次性提交)
    <input type="checkbox" name="interest" value="sports" checked="checked"/> 运动
    <input type="checkbox" name="interest" value="talk" />聊天
    <input type="checkbox" name="interest" value="play"/>玩游戏
  5:列表框
    <select name="列表名称" >
      <option value="可选项的值" selected="selectde"(默认显示)/>一月</option>
      <option value="2" >二月</option>
      <option value="3" >三月</option>
    </select>
   5.1图片提交按钮(虽然type属性不是submit,但是依然具备提交的功能)
     <input type="image" src="图片地址" />
   6:普通按钮
    <input type="button" name="" value="" onclick="alert(this.value)"/>
   7:重置按钮
    <input type="reset" name="" value="重置"/>
   8:提交按钮
    <input type="submit" name="" value="提交" />
   9:多行文本域(不能用css样式的width和height来控制多行文本框的大小)
    <textarea name="" cols="列的宽度" rows="行数" >
       内容.....
    </textarea>
   10:文件域
    <form action="" method="post" enctype="multipart/form-data">
        enctype="multipart/form-data"
:将表单数据分为多部分提交(提交表单的数据包括表单数据和文件数据
                                       等多部分内容)     
    <input type="file" name="" />
    <input type="submit" name="" value="上传"/>
   11:隐藏域(不需要展示给用户,但程序调用时要用到的值,写在隐藏域中)
       1:<input type="hidden" value="000" name="" />
   12:表单的只读(readonly)与禁用(disabled)设置
       <input type="text" name="" value="admin" readonly="readonly"/> 
       <input type="submit" name="" value="提交" disabled="disabled" />
   13:语义化的表单(结构合理,代码简洁)
      ①:域的定义:将表单元素放到域中,浏览器就会以特殊的方式显示他们
        <fieldset></fieldset>
      ②:域标题:给设置的域设置一个标题
        <legend></legend>
      ③:表单元素的标注:增强鼠标的可用性
         <label for="表单元素的id" >标注的文本</label>
         <input type="radio" name="" id="表单元素id"/>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值