HTML(简)

HTML——hyperText marup language 译为超文本标记语言

1.lang="en"告诉搜索引擎爬虫,我们网站是关于什么内容的

<html lang="en">

2.utf-8和unicode是万国码,gbk只识别繁体

<meta charset="utf-8">

双标签

<p>段落标签</p>
<h1>1级标题标签</h1>
<h2>2级标题标签</h2>
<h3>3级标题标签</h3>
<h4>4级标题标签</h4>
<h5>5级标题标签</h5>
<h6>6级标题标签</h6>
<strong>加粗标签</strong>​​​​​​​ 

<em>斜体标签</em>

<del>删除线</del>

<address>地址标签</address>
<div>有换行的效果</div>
<span>没什么效果</span>
div和span是块,都是容器,与内部标签捆绑在一起,其中div能独占一行

单标签

空格和回车表示文本分标符

<br>换行

<hr>水平线

html编码

        &nbsp-空格

        &lt;-小于号

        &gt;-大于号

有序列表(ol)

ol中的属性:

        1.type 排序参数,有5种值:1/a/A/i/I;

        2.reversed 倒序,值有:reversed;

        3.start 从何值开始排(阿拉伯数字表示即可);

        4.默认顺序排列,从1/a/A/i/I开始排。

<ol type="1" reversed="reversed" start="4">
    <li>奇迹.笨小孩</li>
    <li>送你一朵小红花</li>
    <li>少年的你</li>
    <li>穿着条纹睡衣的男孩</li>
</ol> 

无序列表(ul)

ul中的属性:type 排序形式,值有:disc (disciecle)实心圆/ square 方块/circle 圈

<ul type="circle">
            <li>天猫</li>
            <li>聚划算</li>
            <li>天猫超市</li>
</ul>

用css做出一个效果如下:

<style type="text/css">
    *{
        margin: 0;
        padding: 0;/*空隙没了*/
    }
    ul{
        list-style: none;/*去掉ul的圈*/
    }
    li{
        margin: 0 10px;/*隔开*/
        float: left;/*横过来*/
        color:#f40;/*颜色*/
        font-weight: bold;/*加粗*/
        font-size: 16px;/*字体大小*/
        height: 25px;/*高度*/
        line-height:25px;/*上下居中*/
        padding: 0 5px;/*左右空隙*/
    }
    li:hover{/*鼠标放上去的变化*/
        border-radius:15px;/*圆角*/
        background-color: #f40;/*背景颜色*/
        color: #fff;/*字体颜色*/
    }
</style>

效果图样:

HTML(简)

图片(img)

图片路径:

1.网上url;

<img src="https://" style="width: 500px;">

2.本地的绝对路径;

<img src="C:\Users\Administrator\Desktop\lesson\x.jpg" style="width: 500px;height: 200px;">

3.本地的相对路径 。

<img src="1.jpg" style="width: 500px;height: 200px;" alt="这是动画" title="this is img">

<!--注:alt图片占位符,加载不出来的图会显示文字内容;title图片提示符鼠标对焦显示的字样-->

锚,超链接(a)

a标签 :anchor--锚,超链接

属性:href—hyperText referce超文本引用,值是所要引用的内容;

target目标,值是_blank新页面打开。

1.超链接

<a href="https://www.baidu.com" target="_blank">百度</a>

2.瞄点

<div id="demo1">demo1</div>
<div id="demo2">demo2</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>

a标签中加入以下css样式,会形成瞄点列表且浮动在右侧:

<a style="display: block;position: fixed;bottom: 100px/150px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: red;" href=""></a>

3.打电话,发邮件

<a href="tel:19572451034">给小丁打电话</a>

<a href="mailto:2909407661@qq.com">给小丁发邮件</a>

4.协议限定符

<a href="javascript:while(1){alert('让你手欠')}">你点我试试!come on!</a>

表单(form)

form标签:

属性:method----发送数据的方式,值有get/post;

action接收的位置。

<form method="get" action="">
    <input>
	<input>
    ...
</form>

搭配表单的<input>标签

<p>username:<input type="text" name="username" value="请输入用户名"></p><!--输入框-->
<p>password:<input type="password" name="password"></p><!-- 密码框 -->	
<p>丁<input type="radio" name="star" value="ding"><!-- 单选框 -->
   娅<input type="radio" name="star" value="ya" checked="checked">
    <!--checked=checked作用是默认选项-->
   琴<input type="radio" name="star" value="qin">
</p>
<p>
    1.apple<input type="checkbox" name="fruit" value="apple"><!--复选框-->
	2.orange<input type="checkbox" name="fruit" value="orange">
	3.banana<input type="checkbox" name="fruit" value="banana">
</p>
<p>
	<select name="Province"><!--下拉选项-->
			<option>beijing</option>
			<option>guangzhou</option>
			<option>wuhan</option>
			<option>shanghai</option>
		</select>
    <input type="submit" value="提交"><!--提交框-->
</p>

做一个username表单效果为鼠标聚焦原value值消失,可自主输入值输入字体颜色改变并判断,若未输入值或与原value值相同,即在鼠标失去聚焦时,依旧显示原value值字体颜色也为原色,反之保留自主输入值和输入后得到的颜色。

css+js样式为:

<p>username:<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>

<!-- onfocus鼠标聚焦发生什么事; onblur鼠标失去焦点复原-->

上一篇:CSS对齐类浅谈


下一篇:day03-css