html基础技术笔记

最新推荐文章于 2024-07-15 20:17:17 发布

爱敲代码的小赤佬

最新推荐文章于 2024-07-15 20:17:17 发布

阅读量278

点赞数

分类专栏：东软实训

本文链接：https://blog.csdn.net/dongjian2/article/details/94397049

版权

东软实训专栏收录该内容

14 篇文章 2 订阅

订阅专栏

Hypertext Markup Language
标签(Markup) ：用<>的都是标签。

<body>标签的属性
<标签名称 属性名称="属性值">  //值用双引号
在那个标签里面添加属性就修饰那个标签
一个标签下可以有多个属性
例如：<body bgcolor = "背景颜色值" test = "字体颜色" background ="背景图片相对路径" link = "" v>//背景颜色被图片覆盖

      </body>
	  
所有设置颜色都有两种值：1，写颜色的对应英文  2，具体值：#+6位16进制数
每两位对应红绿蓝三种底色，调色。
                 网页文字的格式
<h1>  </h1>//标题大小
<p>    </p>//段落设置
<BR/>        //单标签，实现换行。
           ****项目列表*****//块级元素，独占一行 右边不能做任何操作
无序列表<ul type = ></ul>
有序列表<ol type = ></ol>
                 ****网页中常见的属性**
单标签<img src="" />  <!--> src 图片资源<-->，可以用image标签调成图片大小
大小长短的设置：单位：px像素

            *****表格*******
           <table>,<tr>,<td>
一对tr代表一行
一对<td>代表一个单元格
合并单元格：
<td rowspan ="n">    //在第一行开始合并往下三行
<td colsepan
         ******图层******<div>  </div>
比表格排版自由，绝对定位(随意调整图层的位置)盒子模型
        ******框架*****：一个窗口显示多个网页
<frameset rows="200,*" > </frameset>切网页//上下切一刀，距离上面200像素
<frameset rows="200,100" > </frameset>切网页//上下切两刀，一刀距上100

<frame src="top.html">	</fram>	装网页,载入
<fram src=""> </fram>
切分三部分后，要想在右边页面显示，在左侧的超链接中设置要连接的到网页还要设置target = "name"，name在主函数中的<fram src = "top.html" name = "right" >
         ****表单控件*****<form><form/>重点
属性：name,value
单行文本框控件  <input type = "text">
属性：
name 控件名
value 文本框内的默认值
size属性 文本框大小
maxlength 最多字符
多行文本框控件:
<textarea row ="10" cols= "40"  >默认值</textarea>
单选按钮：
性别：<input type = "radio"/>男<input type = "radio"/>女
性别：<input type = "radio" name = "sex"/>男<input type = "radio" name = "sex"/>女
性别：<input type = "radio" name = "sex" value = "1"/>男<input type = "radio" name = "sex" value "2"/>女  //1，2才是是后台真正存储的数据
复选框：
<input type = "checkbox" name = "like"/>足球<input type = "checkbox" name = "like"/>
下拉列表框：结合<select>,<option>,yiqishiyong
属性：name,size,
城市：<select>

        <option value = "jinan">济南</option>//传值是传的是jinan不是济南
		 <option>青岛</option>
        <option>菏泽</option>
        <option>淄博</option>

     </select>
	 
	 
按钮控件：
属性：
name
action：提交时会跳转到另一个网页
method：提交方式:get(不安全)，post(安全)方式
提交按钮：<input type = "sumit" name = "submit" value ="提交">//value:当前按钮的名字,
重置控件：<input type = "reset" name= "reset" value = "">
普通按钮： <input type = "button" name = "button" value =""> 


隐藏控件：用于用户不需要知道的，但后台需要的数据，将其隐藏起来，不显示


实体字符：
密码框控件 <input type = "password">//以特殊字符显示你输入的密码。
<form>     
<input type = "text" name = "text1" value ="">//用于在网页中输入

</form>提交表单



/*************CSS样式表*************/
{属性名 ：属性值}

<html>
<head>
<title>                </title>

<style type = "text/css">
p{                  //对标签p设置样式，以后的所有p标签都适用。
   test-align:center;
   color:red;
   font-size:20px;
}
a{
   text-decoration:none  //去掉链接的下划线
}
.c1{                                   //类选择器，


}
.c2{



}

</style>
</head>
<body>
<p><a href = "#">静夜思</p>//插入链接
<p>   </p>
<p>   </p>
<p>   </p>
<p>   </p>


<p> class = "c1"静夜思</p>//插入链接
<p>  class = "c1" </p>
<p>   </p>
<p>   </p>
<p>   </p>
</body>
</html>


     设置超链接状态
a:link{               //光标点击前
text-decoration:none;
color:red;
}
a:visited{            //点击后


}
a:active{            //点击时

}		 
a:hover{              //光标移动到链接时

}		 

使用外部样式表文件
把style样式都放到CSS文件里面，每个html只需在其head中引用CSS即可。

作业：练习表单
注册界面

爱敲代码的小赤佬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html基础技术笔记

Hypertext Markup Language标签(Markup) ：用<>的都是标签。<body>标签的属性<标签名称属性名称="属性值"> //值用双引号在那个标签里面添加属性就修饰那个标签一个标签下可以有多个属性例如：<body bgcolor = "背景颜色值" test = "字体颜色" background ="背景图片相...
复制链接

扫一扫

专栏目录