HTML基础学习

mengwenbiao

一、HTML简介

　　超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

　　实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>
</html>

注意：对于中文网页需要使用 <meta charset="utf-8">声明编码，否则会出现乱码。

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

二、HTML常用标签

　　1.<font>字体标签</>,可以设置字体的大小,颜色等.

　　2.标题标签<h1>~<h6>,h1的字体最大,h6的最小.

　　3.加粗标签<b></b>

　　4.下划线<u></u>

　　5.斜体<i></i>

　　6.往下掉标签<sub></sub>

　　　　例:水的分子式=H<sub>2</sub>O就好变成H2O.数字2会往下掉.

　　7.往上升标签<sup></sup>

　　　　例:X的平方=X<sup>2</sup>就会变成X2

　　8.删除线<del>删除线</del>

　　9.显示一条横线标签<hr>

　　10.段落标签<p>

　　11.空格&nbsp;

　　12.原样输出标签<pre></pre>,你在编辑器怎么编写就怎么输出.

　　13.©版权标签&copy;

　　14.®注册商标&reg;

　　15.换行标签<br>

　　16.大于标签>&gt;>

　　17.小于标签&lt;<

　　18.链接标签<a>

　　　　<a href="http://www.baidu.com" target="_blank">跳转到百度</a>

　　　　　　属性:　　

　　　　　　　　href: url链接地址　

　　　　　　　　target:打开方式【显示在哪】
　　　　　　　　　　　　——blank[新窗口打开]
　　　　　　　　　　　　——self[当前窗口]、默认

　　　　　<a>标签锚点:

　　　　　　　　例子:

　　　　　　　　<a href="#p1">第一章</a>
　　　　　　　　<a href="#p2">第2章</a>
　　　　　　　　<a href="#p3">第3章</a>
　　　　　　　　<p id="p1"></p>　

　　　　　　　　点击第一章就会跳转到p标签.

　　19.图片标签<img>　

<img src="imgs/img1.jpg" width="300" height="300" alt="图片加载失败的提示" align="top">

　　img属性:

　　　　src:图片地址　　　

　　　　width:宽度
　　　　height:高度
　　　　alt：图片加载失败的提示
　　　　algin:对齐方式【使用css样式来处理】

三 . 列表标签

　　1.无须列表<ul></ul>

<ul type="disc">
    <!--list item-->
    <li>西瓜</li>
    <li>香蕉</li>
    <li>葡萄</li>
</ul>

　　　ul属性:

　　　　　type：设置符号【disc|circle|square】　

　2.有序列表<ol></ol>

<ol type="1">
        <li>啤酒</li>
        <li>饮料</li>
        <li>八宝粥</li>
            
</ol>
<ol type="1" start="4">
             
        <li>啤酒</li>
        <li>饮料</li>
        <li>八宝粥</li>
</ol>

　　ol属性:

　　　　type：设置序号的样式【1，A，a,i,I】
　　　　Start:从多少开始

　3.自定义列表<dl></dl>

        <dl>
            <!--defined title ：自定义标题-->
            <dt>标题</dt>
            <!--defined data  自定义数据可以是多个-->
            <dd>数据1</dd>
            <dd>数据2</dd>
            <dd>数据3</dd>
        </dl>

四 . 表格标签

        <table>
            <tr>
                <th></th>
                <td></td>
            </tr>

        </table>

　　table属性:　　

　　　　　　width:宽度

　　　　　　height:高度

　　　　　　boder:边框【1：有边框，0：表示没有】

　　　　　　cellspacing:单元格之间的间距,当设置为0时单元格之间没有间距,相当于合并.

　　　　　　cellpadding:内容到边框的距离

　　　　　　bordercolor:边框颜色[css 样式来代替]

　　　　　　bgcolor:背景颜色[css 样式来代替]

　　td属性:　　　　

　　　　　　width:宽度

 

　　　　　　height:高度

 

　　　　　　　　设置宽高时，是以行列中最大的为准

 

　　　　　　align:水平对齐方式【left|center|right】

 

　　　　　　valign:垂直对齐方式【top|middle|bottom】

 

　　　　　　colspan：合并列

 

　　　　　　rowspan：列合并　

  　　　　　　　　行列合并方法：数格子， 一个格子对应一个td,格子不能重复计数。

 

　　　　　　　　　　　　注意：表格中的竖线，拉通全局看待，重点是 合并行列中的数值【】

 

　　　　　　　　　　　　行为“真”，列为“假”,通过行列合并，看起来像是一列

 

 

　　　　　实例:合并第一行的内容

　　　　实现代码:

   　　 <table width="600" height="600" border="1" cellspacing="0" cellpadding="1">
           
            <tr>
                <td align="left" valign="top" colspan="3">1</td>
                <!-- <td width="350">2</td>
                <td>3</td> -->
            </tr>
            <tr>
                <td height="300">1</td>
                <td width="150" height="150">2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td align="right" valign="bottom">3</td>
            </tr>
        </table>

　　更多实例代码仅供参考:

　　　　<table width="300" height="300" border="1">
          <tr>
                 <td width="90">1</td>
                 <td width="100"><img src="img/xxw.jpg" width="90" height="90"></td>
                 <td width="100">3</td>
             </tr>
             <tr>
                 <td>1</td>
                 <td>2</td>
                 <td>3</td>
             </tr>
              <tr>
                 <td colspan="2">1</td>
                 <td>2</td>
                  
             </tr>
        </table>
        <table width="300" height="400" border="1">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td rowspan="3">1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
             
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
             
            </tr>
        </table>
        
        <table border="1" width="400" height="300">
            <tr>
                <td>1</td>
                <td colspan="3">2</td>
                <td rowspan="3">3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
                <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="2">2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>

五 . 表单标签<form></form>

　　

<form action="testserver.html" method="post">
            <!--表单元素
                注意：表单元素，如果没有name 属性值，无法将数据提交到服务器
            -->
            <!--文本输入框 HTML4.1-->
            用户名： <input type="text" name="uname" id="" value="用户名"> 
            <br>
            密码：<input type="password" name="pwd" id=""  />
            <br>
            多行输入框：<textarea name="mytxta" id=""></textarea>
            <br>
            <!--选框类
                注意：value属性值都是事先设置好的，
                可以与文本不一样，提交的数据，、
                是以value的属性值为准
            -->
            <!--单选
                注意：必须 个选项设置相同的name 属性值
                checked="checked" 设置默认选中
            -->
            性别：<input type="radio" name="sex" id="sex1" value="nan" checked="checked" />
                <label for="sex1">男</label> 
                <input type="radio" name="sex" id="sex2" value="nv" />
                <label for="sex2">女</label>
                <br>
            <!--复选框
                checked="checked" 设置默认选中
            -->
            爱好：<label><input type="checkbox" name="zq" id="zq" value="zq" /> 足球 </label>
            <label><input type="checkbox" name="lq" id="lq" value="lq" checked="checked"/> 篮球 </label>
            <label><input type="checkbox" name="ymq" id="ymq" value="ymq"  checked="checked"/> 羽毛球 </label>
            <br>
            
            
            <br>
            <!--下拉列表框
                selected="selected" 设置默认选中
            -->
            国籍：<select name="gj">
                <option value="zn">中国</option>
                <option value="usa">美国</option>
                <option value="uk" selected="selected">英国</option>
            </select>
            
            <br>
            
         
            
            <!--文件-->
            <input type="file" name="ff" id="file" value="" />
            <br>
            <!---->
            
            
            <br>
            <!--按钮类-->
            <!--提交功能-->
            <input type="submit"  value="提交"/>
            <input type="button" value="普通按钮" />
            <input type="reset" value="重置表单" />
      </form>

　　　　<form>属性:

　　　　　　　　　　上传文件时，添加：enctype="multipart/form-data",方法采用 post.　　　　　　　　　

　　　　　　　　　　提交方式的区别：

 

　　　　　　　　　　　　　　get:提交的数据，会显示在，接收页面的地址栏中，

 

　　　　　　　　　　　　　　post:相对安全，以form-data 的形式上传数据.

　　　　HTML5 form表单新元素:

　　　　　　　　实例1:

<!--HTML中Type新增属性值-->
        <form action="testserver.html" method="get">
        用户名：<input type="text" >    
        <br>
        <!--type="eamil" 提供邮箱的完整性验证-->
        邮箱：<input type="email"  />
        <br>
        <!--type="tel" 并不提供验证，它本质的目的是为了打开移动端的数字键盘-->
        电话：<input type="tel" />
        
        <br>
        <!--type="url"  验证合法的网址，必须要包含http://-->
        网址：<input type="url" />
        
        <br>
        <!--type="number"  只能包含数字
            max="最大值"
            min="最小值"
            step="步长"
        -->
        年龄： <input type="number" max="150" min="0" step="0.1" />
        
        <br>
        搜索：<input type="search" />
        
        <br>
        
        <!--type="range"  
            max="最大值"
            min="最小值"
            value="当前值"
        -->
        范围：<input type="range" max="100" min="0" value="60" />
        
        <br>
        颜色：<input type="color" name="col" value="" />        
        <br>
        <input type="submit"  value="提交"/>
        </form>

 

　　　　　　实例2:

<form>
          用户名：<input type="text" placeholder="请输入用户名" 
                name="test"
                autofocus
                 required="required" 
                 title="该项为必填项"
                 autocomplete="on"
                 
                 >
            
            <br>
            
            数字： <input type="text" title="5到10位的整数" pattern="^[1-9]\d{4,9}$" required="required"  />
            
            
            <input type="submit" value="提交" />
        </form>
    HTML5表单元素新增属性
                placeholder="提示文本"
                autofocus:自动获取焦点
                required="required" 必填选项
                title="错误提示文本"
                autocomplete="on",自动完成，on:打开，off：关闭
                注意：autocomplete 1.成功提交过，2.元素中必须有name属性
                pattern="正则表达式"，验证数据的正确性【难点：正则表达式】


六、iframe：内联框架

　　作用：可以把其他的页面嵌入到当前的页面中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
           <iframe src="http://www.baidu.com" scrolling="no"  width="700" 
                   height="500"></iframe>
    </body>
</html>

　　iframe属性：　　

　　　　　　src: url地址【嵌入的页面地址】
　　　　　　frameborder :边框 【0和no 都表示没有； 1和yes 都表示有边框】
　　　　　　scrolling:是否允许有滚动条【no：没有滚动条;yes:有滚动条;auto[默认]】
　　　　　　width:宽度
　　　　　　height:高度

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode