lesson1--html-css主要基础知识点

最新推荐文章于 2021-08-14 11:20:32 发布

�H�

最新推荐文章于 2021-08-14 11:20:32 发布

阅读量190

点赞数 1

分类专栏： html-css 文章标签： html-css

本文链接：https://blog.csdn.net/wywywy_/article/details/90112921

版权

html-css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.html编码：

**
空格符： 
大于号：>
小于号：<
**

2.无序列表

<ul type = "disc">
	<li>type属性值可以有：disc（默认实心圆）、square（方块形）、circle（圆圈）</li>
	<li>功能：可导航栏制作</li>
</ul>

eg：用ul制作导航栏

<!DOCTYPE html>
<html>
<head>
	<title>制作简单导航栏</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		ul{list-style: none;}
		li{float: left;
		   margin: 0 8px;
		   color: #f40;
		   height: 25px;
		   line-height: 25px;
		   padding: 0 4px;
		   border-radius: 15px;
		    }
		li:hover{background-color: #f40;
		         color:#fff;}

	</style>

	</script>
</head>
<body>
<ul>
	<li>天猫</li>
	<li>聚划算</li>
	<li>天猫超市</li>
</ul>
</body>
</html>

3.img标签

<img src = "添加图片地址" alt = "图片占位符：当图片路径发生错误时，展示的文字信息" title = "图片提示符，当鼠标放在图片上所显示的文字">

注：添加图片地址的三种方式
① 网上url：网上图片链接地址

eg：<img src = “http://pic.58pic.com/58pic/15/68/59/71X58PICNjx_1024.jpg”>

② 本地的相对路径：

让html文件和图片在同一个文件夹下
D：a/b/lesson1.html
D：a/b/1.jpg
eg：<img src = “1.jpg” >

③ 本地的绝对路径

D：a/b/lesson1.html
D：a/b/c/1.jpg
eg：<img src = “D：a/b/c/1.jpg”>

4.a标签

**
1.超链接

<a href = "https://www.baidu.com" target = "_blank">图片 文字等都可以作为内容</a>

2.锚点

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.demo1,.demo2{
			height: 200px;
			width: 200px;
			margin:500px 500px;
		}
		.demo1{background-color: red;}
		.demo2{background-color: yellow;}
		ul{list-style: none;
		   height: 200px;
		   width: 100px;
		   background-color: #ffc;
		   line-height: 100px;
		   position: fixed;
		   left: 0;top: 0;}
		a{  text-decoration: none;}
	</style>
</head>
<body>
	<div class = "demo1" id="d1">demo1</div>
	<div class = "demo2" id="d2">demo2</div>
	<div>
		<ul>
			<li><a href = "#d1">demo1</a></li><!--锚点链接=== #+需要跳转内容的id地址名-->
			<li><a href = "#d2">demo2</a></li>
		</ul>
	</div>

</body>
</html>

3.打电话

<a href = "tel:546776798789"></a>

4.协议限定符

<a href ="javascript:while(1){alert('让你手欠~')}">点一下</a>

5.form表单标签

<!--数据提交成功要有属性值和属性名
    form表单能发送数据给后端
	<form method ="发送数据的方式，有两个值get/post" action="发送目的地地址">
		<input type="text（输入框）" name="自定义属性名">
		<input type="password（密码框）" name="">
		<input type="submit（提交）"  value ="登陆（按钮名就会变成登陆） "name="">
	</form>-->

eg1:

<form method ="get"  action = "">
		<P>
			username<input type="text" name="username">
		</P>
		<p>
			password<input type="password" name="password">
		</p>
		<p>
			<input type="submit" value="login" name="submit">
		</p>
	</form>

eg2:radio（单选框）

<form>
      <!--数据提交成功要有属性值value和属性名name
       单选框    name的值一定要相同，就像做选择题一样，题目要一样-->
      你们喜欢的男星
      <p>1.贝克汉姆<input type="radio" name="star" value ="xiaobei"></p>
      <p>2.莱昂纳多<input type="radio" name="star" value ="xiaolai"></p>
      <p>3.吴颖<input type="radio" name="star" value ="xiaoying"></p>
      <p><input type="submit" name="login" value="submit"></p>
	</form>

eg3:

<form>
<P>
  <input type="text"  name="username"  style="color: #999;"  value="请输入用户名" 
  onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" 
  onblur="if(this.value==''){this.value='请输入用户名';this.style.color ='#999'}">
</P>
<p>
  <input type="password" name="password">
</p>
  <input type="submit" name="submit" value="submit">
		</form>

eg4:checkbox（多选框）

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<!--多选框-->
<form method="get" action="">
   <h1>Choose your favourite fruit!</h1>
   1.apple<input type="checkbox" name="fruit" value="apple">
   2.banner<input type="checkbox" name="fruit" value="apple">
   3.orange<input type="checkbox" name="fruit" value="orange">
   <input type="submit" >
</form>
</body>
</html>

eg5:checked

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<!--默认选中checked="checked"-->
<form method="get" action="">
   <h1>Choose your sex!</h1>
   male<input type="radio" name="sex" value="male" checked="checked">
   female<input type="radio" name="sex" value="female">
   <input type="submit" >
</form>
</body>
</html>

eg6:下拉菜单

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<form method="get" action="">
   <h1>Provice</h1>
   <!--下拉菜单 select的name就是option的名，继承父级-->
   <select name="province" id="">
        <!-- 选项菜单  option里面的内容就是value的值 -->
         <option>beijing</option>
         <option>shanghai</option>
         <option>tianjing</option>
   </select>
   <input type="submit" >
</form>
</body>
</html>