HTML(简)

2024-02-05 08:07:04

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-空格

<-小于号

>-大于号

有序列表（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>

效果图样：

图片（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">

锚，超链接（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>

码农公寓