HTML基础之 小白入门

HTML基础

文章目录

    • 1.HTML介绍
    • 2. HTML文档结构
    • 3.HTML基本标签介绍
        • 3.1 h标签
        • 3.2 p标签
        • 3.3 div和span
        • 3.4 特殊字符
        • 3.5.超链接和图片标签
          • 图片标签
        • 3.6.列表标签
          • 3.6.1有序列表
          • 3.6.2无序列表
          • 3.6.3 定义列表
    • 4.表格的使用
    • 5.表单提交数据

1.HTML介绍

HTML全称HyperText MarupLanguage  超文本标记语言
超文本:比起一般文本,还能显示更加高级的内容,比如图片、音频、视频
标记语言:使用标签对内容进行维护
	XML: 自己定义的标签
	HTML: 使用指定的标签(浏览器能够识别的),在页面上显示超文本
CSS: Cascading Style Sheet 层叠样式表,作用为美化界面
web标准有三个部分:
1)结构层:用来搭建页面结构(HTML) 标签
2)表现层:用来装饰页面(CSS)  属性
3) 行为层:用来和用户交互(JavaScript/JS)逻辑

2. HTML文档结构


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

body>
html>
代码说明:
: 文档类型声明,不同类型的文档类型声明,允许使用的标签不一样
:最外层的标签,称为根标签,一个HTML文件,只能有一个
: 头标签,用来对文档内容进行描述
: HTML文档的主体,用来放在页面上显示网页内容,在此标签下,会写大量的标签来构建网页的结构

3.HTML基本标签介绍

3.1 h标签

: 注释标签,浏览器中不解析其中内容
h 系列标签:用来显示各级标题,有h1 - h6 级,h1最好不要滥用,只有一个最好,有利于搜索引擎优化
<h1>hello worldh1>

<h1>我是h1h1>
<h2>我是h2h2>
<h3>我是h3h3>
<h4>我是h4h4>
<h5>我是h5h5>
<h6>我是h6h6>

HTML基础之 小白入门_第1张图片

浏览器默认的字体为h4

3.2 p标签

标签: 一个p标签就是一个段落(paragraph)

<p>大家好,我是一个p标签p>
<p>大家好   我是p>
<p>彭于晏p>

运行效果如下:
HTML基础之 小白入门_第2张图片


标签: 用来产生一条分割线,是一条单标签
<p>我是一个Pp>
<hr>
<p>我也是一个Pp> <hr>

运行结果如下:
HTML基础之 小白入门_第3张图片


标签:(batter rabbet) 用来给文字换行
<p>大家好,我是<br>吴彦祖p>

3.3 div和span

标签div和span
div 和 span 都是没有语义的标签,用来设置样式
div : 默认宽度是整个屏幕,高度由内容来填充
span : 宽高都是由内容来填充

<div style="height:100px;background-color:green;">div>

<p>大家好,我是<span style="color:hotpink;">粉色span>p>

运行效果如下:
HTML基础之 小白入门_第4张图片

一般的,标签都是成对出现,例如h1标签, 

表示的是标签的开始,

表示标签的结束,在开始标签和结束标签中间,编写标签里显示的内容。但是对于单标签,例如
标签、
标签、标签等,这类标签里不需要显示文字内容,只需要使用一个单标签就能完成,它们的书写方式是 <标签名 />

3.4 特殊字符

有些字符再HTML中无法正常显示,需要用特殊字符代替
例如:多个空格会被解析成一个空格,要表示多个空格,要用 
常见特殊字符可百度到

3.5.超链接和图片标签

超链接就是a标签(anchor)
href 就是链接地址
如果要链接到一个外部地址,必须把url路径写完整
格式: 协议头 + 主机名 + 域名 + 端口
https:// www.baidu.com  :443
http: // www. baidu.com  :80
a 标签指向的,可以是任意类型的文件,内部文件使用相对路径即可
浏览器不能识别的东西,会下载,能识别就直接打开
a 标签具有锚点定位的作用
<a href="http://www.youku.com">优酷a>
<a href="#mubiao">跳转到目标位置a>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<p>我是pp>
<div id="mubiao">我是divdiv>
<p>我是pp>
<p>我是pp>

运行结果如下图

HTML基础之 小白入门_第5张图片

上图值截取了一部分,点击优酷,可跳转至优酷界面,点击‘跳转到’目标位置,可找到“我是div”

a标签常见属性:

属性名 取值 含义
href url地址 让a标签指向特定地址
target _self _blank _blank让浏览器在新页面打开,_self在当前页面打开,默认值为self
  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的
图片标签
<img src="test.png" alt="当图片加载失败时会显示这段文字"/>

src 属性用来指定图片的路径,可以使用绝对路径和相对路径,一般情况下我们会选择使用相对路径

常见属性

属性名 取值
src url img标签加载的图片URL地址
alt 文字 当图片加载失败时显示的文字
title 文字 全局属性,当鼠标悬停到图片上时显示的文字
width 数字,单位为px(像素) 用来指定图片的宽度
height 数字,单位为px(像素) 用来指定图片的高度

3.6.列表标签

列表常分为三种:

  • 有序列表ol
  • 无序列表ul
  • 定义列表dl
3.6.1有序列表

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        span {
            color:red;
        }
    style>
head>
<body>
<ol>
    <li>起床li>
    <li>洗漱li>
    <li>吃饭li>
    <li>出门li>
    <li>上班li>
ol>
body>
html>

里面的每一个列表项用li标签,运行结果如下:
HTML基础之 小白入门_第6张图片

ol标签属性

type : 用来指定序号类型,可选值有a,A,I,i,1
start: 指定开始序号
3.6.2无序列表

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<ul>
    <li>菊花li>
    <li>兰花li>
    <li>桂花li>
    <li>荷花li>
ul>
body>
html>

和有序列表一样,无序列表里的列表项同样使用 li 标签来表示:
HTML基础之 小白入门_第7张图片

ul属性

  • circle :显示空心圆
  • disc: 显示实心圆
  • square :显示实心方块
3.6.3 定义列表

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<dl>
    <dt>张三dt>
    <dd>张三没我帅dd>
    <dt>李四dt>
    <dd>李四没我幽默dd>
    <dt>王五dt>
    <dd>王五比我有钱dd>
dl>
body>
html>

定义列表里的每一个列表项使用dt表示,同时,每一个dt列表项一般都会再跟一个 dd 标签对dt进行说明:
HTML基础之 小白入门_第8张图片

4.表格的使用

在HTML里,使用来显示一个表格,table 有几个常见子标签:
 	:表示一行数据
 	
: 显示标题,一般配合使用
:放在tr标签下,表示表头 :放在tr标签下,表示单元格 td标签可设置rolspan、colspan属性,表示其占多少单元格

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格title>
    <style>
       table {
            /* 让表格合并边框 */
            border-collapse:collapse;
        }
        td,th {
            /*设置边框的线宽为1px,实线,黑色*/
            border:1px solid #000;
            text-align:center;
            padding:10px;
        }
    style>
head>
<body>
<table>  
    <caption>成员信息caption>
    <tr>

        <th>姓名th>
        <th>性别th>
        <th>年龄th>
        <th>电话th>
    tr>
    <tr>        
        <td>张三td>   
        <td>maletd>
        <td>21td>
        <td>198888203td>
    tr>
    <tr>
        <td>李四td>
        <td>maletd>
        <td>20td>
        <td>197788203td>
    tr>


table>

body>
html>

运行结果如下:
HTML基础之 小白入门_第9张图片

5.表单提交数据


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单title>

head>
<body>

  
<form action="https://www.baidu.com">

  

    <span>用户名span> <input type="text" name="username"> <br>
    <span>性别span> <input type="radio" name="sex" id="nan"> <label for="nan">label>
    <input type="radio" name="sex"> <span>span> <br>
    <span>爱好:span>
    <input type="checkbox" id="tubu"> <label for="tubu">徒步label>
    <input type="checkbox" id="paobu"> <label for="paobu">跑步label>
    <input type="checkbox" id="pashan"> <label for="pashan">爬山label>
        <br>
    <span>密码span> <input type="password" placeholder="请输入密码"> <br>
    <span>手机号span> <input type="tel">
    <input type="button" value="点击发送验证码"><br>

    <input type="reset" value="重置">
    <input type="submit" value="注册">
form>
body>
html>

运行结果如下:

HTML基础之 小白入门_第10张图片
综合使用案例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<form action="https://www.baidu.com">
    <span>我是span>
    <input type="radio" name="gender" id="nan" value="male"> <label for="nan">label>
    <input type="radio" name="gender" id="nv" value="female" checked> <label for="nv">label> <br>

    <span>省份span>
    <select name="province" id="">
        <option value="shanghai">上海option>
        <option value="beijing">北京option>
        <option value="zhejiang">浙江option>
        <option value="jiangsu" selected="selected">江苏option>
        <option value="anhui">安徽option>
    select><br>

    <span>兴趣爱好span>
    
    <input type="checkbox" name="hobbies" value="basketball" id="basketball"> <label for="basketball">篮球label>
    <input type="checkbox" name="hobbies" value="football" id="football"> <label for="football">足球label>
    <input type="checkbox" name="hobbies" value="volleyball" id="volleyball" checked> <label for="volleyball">排球label>
    <input type="checkbox" name="hobbies" value="pingpong" id="pingpong" checked> <label for="pingpong">乒乓球label>
    <br>
    <span>年龄:span>
    <input type="number" name="age" max="80" min="18" value="20"><br>
    <span>手机号:span>
    <input type="tel" name="phone" autofocus autocomplete="off"><br>
    <span>密码span>
    <input type="password" name="pwd" placeholder="请输入密码"><br>
    <span>姓名:span>
    <input type="text" name="username" required><br>

    <span>自动分配的idspan>
    <input type="text" value="user01" name="user_id" readonly><br>

    <input type="file"><br>
    <input type="hidden"><br>
    <span>邮箱span>
    <input type="email"><br>
    <input type="color"><br>
    <span>出生日期span>
    <input type="date"><br>
    <input type="search" placeholder="请输入你要搜索的内容"><br>
    
    <input type="reset" value="重置" disabled><br>
    <input type="submit" value="点击注册">
form>
body>
html>

HTML基础之 小白入门_第11张图片

你可能感兴趣的:(HTML基础之 小白入门)