html初级入门01

一般先学习HTML+CSS，这里我们先定一个小目标，先学HTML,后学习CSS。
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。
所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

1、 HTML骨架结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>用的哪个版本的代码
<head></head>:声明--给浏览器看的
<meta charset="UTF-8" />代码的编码方式 ：utf8,不加会乱码
<meta name="Keywords" content="银河学院" />keywords关键字
<meta name="Description" content="银河学院" />Description网页描述
<link rel="stylesheet" href="css/1.css" />
<link rel="shortcut icon" href="***.ico" />link引入外部文件：css ison

2、标签

（1）标题文本： h1、h2、h3、h4、h5、h6
（2）段落标签：p
（3）水平线标签：<hr/> <hr/>是单标签
（4）换行标签：<br/> <br/>是单标签
（5）文本格式化标签：（ b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈）
这里写图片描述
（6）图像标签img：

（7）链接标签：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
（8）锚点定位

“链接文本"创建链接文本（被点击的）">  <a href="#two">   

使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

**（9）base 标签 **base 可以设置整体链接的打开状态，base 写到之间，把所有的连接都默认添加 target=”_blank”

<base  target="_blank">

（10）特殊字符标签:
这里写图片描述

(11)注释标签： ctrl + / 或者 ctrl +shift + /

3、路径(重点、难点)

路径可以分为：相对路径和绝对路径
相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src=”logo.gif” /。
2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src=”img/img01/logo.gif” /。
3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如img src=”../logo.gif” /。
绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的
“D:\web\img\logo.gif”，或完整的网络地址例如“http://www.itcast.cn/images/logo.gif”。

4、列表标签

（1）无序列表< ul><li></li></ul>
（2）有序列表< ol><li></li></ol>
（3）自定义列表<dl><dt></dt><dd></dd></dl>
（4）表格 table

<table border="" cellspacing="" cellpadding="">
        <tr><th>Header</th></tr>
        <tr><td>Data</td></tr>
    </table>

表格标题 <caption>我是表格标题</caption>
合并单元格:跨行合并：rowspan 跨列合并：colspan

表单

input控件

常用属性：
1. Action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式，其取值为get或post。
3. name用于指定表单的名称，以区分同一个页面中的多个表单。
<form action="url地址" method="提交方式" name="表单名称">
            <br />
            文本框<input type="text"/>
            <br />
            密码框<input type="password" />
            <br />
            按钮
            <input type="button" value="按钮" />
            <br />
            多选框 1
            <input type="checkbox" /> 2
            <input type="checkbox" /> 3
            <input type="checkbox" /> 4
            <input type="checkbox" />
            <br />
            单选框(同一组单选框，同时只有一个被选中) 1
            <input type="radio" name="a" /> 2
            <input type="radio" name="a" /> 3
            <input type="radio" name="a" /> 4
            <input type="radio" name="a" />
            <br />
            本地选择文件
            <input type="file" />
            <br />
            重置表单
            <input type="reset" />
            <br />
            下拉菜单
            <select name="">
                <option value="">1</option>
                <option value="">2</option>
            </select>
            <br />
            多行文本框
            <textarea cols="每行中的字符数" rows="显示的行数">文本内容
            </textarea>
            <!--h5新表单-->
            <br /><input type="number" /><!--必须输入数字-->
            <br /><input type="color" /><!--可以选颜色-->
            <br /><input type="tel" />
            <input type="submito" />
        </form>

1、 HTML骨架结构

2、标签

3、路径(重点、难点)

4、列表标签

表单

猜你喜欢