关于HTML

文章目录

  • 1.网址
  • 2.注释
  • 3.HTML基本文档
  • 4.HTML基本标签
  • 5.HTML表格
  • 6.HTML列表
  • 7.HTML表单

HTML:(HyperText Markup Language)超文本标记语言

1.网址

  • HTML 是运行在浏览器上,由浏览器来解析的。首先需要了解浏览器的网址构成部分。
  • 以http://www.runoob.com/html/html-tutorial.html 为例:
    采用scheme://host.domain:port/path/filename的格式。
  • 在生活中,我们常见的有以下几种:
    (1). HTTP:   (HyperText Transfer Protocol) 超文本传输协议
    (2). WWW:   (World Wide Web)万维网
    (3). 根据国际互联网域名体系,国际顶级域名分为:
    通用顶级域名:
          .com: 表示工商企业
         .net: 表示网络提供商
         .org : 表示非盈利组织
    国家顶级域名:
          .cn: 表示中国国家域名。

2.注释

想成为一个有着良好编程习惯的学者,注释在每一个代码段里都是不可缺少的。

  • 在HTML中的注释:

3.HTML基本文档

<html>
<head>
    <title>关于HTMLtitle>
head>
<body>
    HTML内容
body>
html>

这是HTML最核心的结构,在浏览器中运行时,只显示 中的内容。

4.HTML基本标签

(1). 段落:

<p>这是一个段落p>

(2). 标题:

  ~  

   <h1>标题1h1>
   <h2>标题2h2>
   <h3>标题3h3>
   <h4>标题4h4>
   <h5>标题5h5>
   <h6>标题6h6>

(3). 超链接:

<a href="http://www.baidu.com"  target="_blank">这是百度的链接a>>
  • target属性:

_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

      锚记:


<a name="top">a>
<a href="#top">返回顶部a>

<a name="hello">a>
<a href="2.html#hello">你好a>

<a href="csdn.rar">软件下载a>

<a href="mailto:[email protected]">发送邮件a>

(4). 文本格式化
     
:文档中的换行(单标签)

<b>这是粗体b><br>
<strong>这是粗体strong><br>
<em>这是斜体em><br>
<i> 这是斜体i><br>
<big>让这个字体变大big><br>
<small>让这个字体变小small><br>
<del>删除这段文字del><br>
<code>放置代码code><br>
A<sup>2sup>+B<sup>2sup>=C<sup>2sup><br>  
H<sub>2sub>SO<sub>4sub><br>  !

运行结果:
关于HTML_第1张图片
(5).图像: (单标签)

<img src="" alt="news" title="newss" width="200"/><br/>

<a href=""><img src="ba1.jpg" alt="news" title="newss" width="200px" />a>

属性解释;
alt:当图像不能成功加载时,显示的文字。(由用户自定义生成,对使用纯文本浏览器的人群很有用。)
title:对图片的说明和额外补充,当鼠标经过图片会显示出来的文字信息。

(6).


:水平线(单标签)

<hr width="50%" color="red" size="+5"/>

在这里插入图片描述
(7).

 预格式化 (单标签):
       不会改变文本的编辑状态,显示空格和换行

5.HTML表格

  •     每个表格从一个 table 标签开始。
  •     每个表格行从 tr 标签开始。
  •     每个表格表头从 th 标签开始。
  •     每个表格的数据从 td 标签开始。

例如:

<table width="20%" border="1" cellspacing="10" cellpadding="5"  >
 
    <caption>信息表caption>
    <tr>
        <th >姓名:th><th>
          
        <td align="center">张三td>
    tr>
    <tr>
        <th>班级:th>
        <td  align="center">李四td>
        
    tr>
    <tr>
        <th rowspan="2">现住址th> 
         
        <td  align="center">陕西td>
    tr>
    <tr>

        <td  align="center">西安td>
    tr>

table>

运行结果:
关于HTML_第2张图片

6.HTML列表

HTML支持有序,无序和自定义列表。

  • 无序列表
<ul type="disc">
    <li>种类li>
    <li>颜色
        <ul type="square">
            <li>li>
            <li>li>
            <li>li>
        ul>
        
    li>
ul>
<ul type="circle"> 

    <li>大小li>
ul>

运行结果:
关于HTML_第3张图片

  • 有序列表
<ol type="i" start="3">
    <li>概念li>
    <li>特点li>
    <li>举例li>
ol>
<ol type="1" start="1">
    <li>概念li>
    <li>特点li>
    <li>举例li>
ol>
<ol type="A" start="2">
    <li>概念li>
    <li>特点li>
    <li>举例li>
ol>

运行结果:
关于HTML_第4张图片

  • 自定义列表
<dl>
    <dt>UFOdt>
    <dd>不明飞行物dd>
    
dl>

运行结果:
在这里插入图片描述

7.HTML表单

举例说明:

<form action="" method="get">

    
 
    <p>
        <lable for="username">用户名lable>
        <input type="text" id="username"/><br/>
    p>
  
    <p>
        密码:<input type="password"/><br/>
    p>
       
    <p>
        性别:<input type="radio" name="sex"/><input type="radio" name="sex"/><br/>
    p>
    
    <p>
        爱好:<input type="checkbox"/>音乐
             <input type="checkbox"/>跳舞
             <input type="checkbox"/>游泳
    p>
     
    <p>
        上传头像:<input type="file"/>
    p>
    
    <p>
        出生日期:
        <select name="" id="">
            <option value="2000">2000option>
            <option value="2001 selected">2001option>
            <option value="2002">2002option>
            <option value="2003">2003option>
        select><select name="" id="">
            <option value="1 selected">1option>
            <option value="2">2option>
            <option value="3">3option>
            <option value="4">4option>
        select><select name="" id="">
            <option value="1">1option>
            <option value="2">2option>
            <option value="3" selected>3option>
            <option value="4">4option>
        select>
    p>
    <p>
        职称:
        <select  name="" id="" multiple  size="3"> 
         
            <option value="">高级option>
            <option value="">中级option>
            <option value="">初级option>
        select>
    p>
  
    <p>
        留言
        <textarea name="" id="" cols="30" rows="5">textarea>
    p>
  
    <p>
        <input type="submit"/>
        <input type="reset"/>
        <input type="button" value="确定"/>
        
    p>
   
    <p>
        <fieldset>
                 <legend>问卷调查legend>
    用户名:<input type="text"/>
    昵称: <input type="text"/>
        fieldset>
    p>
form>

运行结果:
关于HTML_第5张图片

你可能感兴趣的:(HTML)