HTML基本标记

最新推荐文章于 2021-06-18 23:02:59 发布

JaimeImp

最新推荐文章于 2021-06-18 23:02:59 发布

阅读量841

点赞数 2

分类专栏：前段 HTML 文章标签： html java

本文链接：https://blog.csdn.net/yuanpeij/article/details/108762756

版权

前段同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

HTML CSS JAVASCRIPT基础

HTML(内容层技术)

1.单标记

<!--注释-->
<br /> [换行]
<hr /> [水平线标记] 
        size：粗细
        width：宽度
        color：颜色
        align：居中方式(center,right)
<img> [图片标记]
		src：图片的路径
		width,height，
		alt：图片不可见时(加载错误之类)的提示信息
		title：鼠标悬停在图片上时的提示信息
		align---(absmiddle)位置在前一个图片的绝对中间
		target -- 打开新窗口
		_self(自身窗口)_blank(新窗口)_parent(父窗口)_top(顶层窗口)

2.双标记

[段落标记]
<p> </p>  
	前后会默认加空格（加的空格高度比br少）

[标题标记]
<hn><hn/> 
    n可以选择1-6，字体从大到小
   	align：left|center|right
    
[超链接]   
<a><a/> 
     href："链接路径"(XXX.html    http://XXX.com)
   	 target：目标窗口 
   	_self(自身窗口)_blank(新窗口)_parent(父窗口)_top(顶层窗口)
    
[锚标记]   
<a name=”自定义标识名称”>内容</a>     
<a href=”#标识名称”>文字内容 </a>
    
锚标记打开另外一个页面的中间或底部用法：
<a href=”XXX.html#标识名称”>文字内容 </a>   
    
[背景]    
<body> ：bgcolor -- 背景颜色   ， background -- 背景图片  
    
[路径]   
。。上一层 ：<a href = "../index.html"></a>    
相对路径（..代表上一层目录） （网络）绝对路径：适用于引用项目之外的图片

[特殊符号]
空格：&nbsp
版权符号：&copy
< ：&lt; 小于号
> ：&gt; 大于号
    
[列表标记]
前面有个小圆点（相当于段落的开头），和&bull的小圆点不同
<ul>
<li>内容</li>
</ui>
    
[font]
    B：加粗
  	I：倾斜 
    U：下划线
    Em：倾斜
    Strong:加粗

3.块内标记行内标记

块级标记：会换行，默认宽度为width:100%
行内标记：靠自身大小来支撑结构

4.table

<table
    cellpadding:单元格之间隔空隙(默认：2px)
	cellsapcing:单元格内容与单元格左右边界之间的空白(默认：2px)
	width:宽度	height:高度
	border：边框
    border:边框线
    bgcolor:背景色
    background:背景图片
       >
    rowspan：跨行合并
    colspan：跨列合并
    <tr (tablerow)
        bgcolor:一行颜色
		background:一行背景图片
        align:正行内容的水平居中方式
		valign:垂直对齐方式（top,bottom）
		height:单独设置每一行的标记
        >
        <td (tabledatacell)
            bgcolor:设置单独的单元格的背景色
			background:设置单独单元格的背景图片
			align:单元格内容
			valign:垂直居中受限制
            width:单独设置每一列（td所处列）的宽度（每一列的宽，受限于总宽度）
            >
        </td>
    </tr>
</table>

5.form

<!--表单-->
用于收集客户端的信息并提交给服务器
<form
      action:服务器路径/地址
      method:get(表单中的信息会跟到url的后面，不安全)/post
      >
	<table>
        [输入框]
   	 	<tr>
            <td>
           <!--输入控件的提示信息
			placeholder,里面没有内容，给一个提示，例：请输入用户名--> 
            文本框：<input type="text"  value="默认值" name=""/>
            密码框：<input type="password"  value="默认值" name=""/>
    		单选框：<input type="radio"  value="" name = ""/>
                1.单选按钮的名字要一样
                2.提交到服务器的是value
                3.checked为默认选项
                4.最好起个name,服务器端接收需要
            复选框：<input type=”checkbox” value=”” name=””/> 
               	1.复选名称要一致
                2.提交到服务器的是value
                3.checked为默认选项
            </td>
        	
   		</tr>
        
        [选择框]
         <tr>
        	<td>
                <select name="",size="默认展示几项">
                    <option selected(默认选中项)>北京<option/>
                    <option>上海</option>
                </select>
            </td>
   		</tr>
        
        [按钮]
        <tr>
        	<td>
                普通按钮:<input type=”button”/>
                重置按钮:<input type=”reset”/> 
                提交按钮:<input type=”submit”
                            formation="跳到指定地址"
                            value="按钮里的字"/>
            </td>
            补充控件： 
            文件域：<input type="file" /> 
            数字框:<input type="number" /> 
            隐藏域：<input type="hidden" value="100" name="userId" />
   		</tr>

	</table>
</from>

6.iframe

放在td里

<tr>
    <td>
        <iframe src="默认页面" name="if1"></iframe>
    </td>
</tr>
frameborde = 边框

CSS(表现层技术)

1.三大样式

JACASCRIPT(交互层技术)

1.