初识HTML

最新推荐文章于 2024-09-20 18:13:10 发布

莓莓儿～

最新推荐文章于 2024-09-20 18:13:10 发布

阅读量397

点赞数 1

分类专栏： HTML 文章标签： html 初学者

本文链接：https://blog.csdn.net/fanfan_h/article/details/89320785

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML基础

一：HTML的定义
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。
二： HTML 语言的基本结构

<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body  >
  <p>hello html!</p>
</body>
</html>

注意：

lang="en"   声明网页的语言  en  英语  ch  中文
<meta charset="UTF-8">  信息标签   charset="UTF-8"  网页的编码格式
<title></title>  标题栏

三：标签
分类：
按照闭合：带结尾的、单闭合
按照换行：不换行（行级标签）、换行（块级标签）
标题标签： h标签加粗由大-小
h1~h6: 不同级别的标题

  <h1>什么是HTML<h1/>
       <h2>什么是HTML<h2/>
           <h3>什么是HTML<h3/>
               <h4>什么是HTML<h4/>
                  <h5>什么是HTML<h5/>
                       <h6>什么是HTML<h6/>

v的电饭锅在这里插入图片描述
p:段落标签
br:强制换行，自闭合标签
hr:水平横线
span:文字标签

<p>这是一个段落</p>
<br/>
<p>这是一个段落</p>
<span>我的html</span>
<hr/>

文本格式化标签：
b：粗体文本
em:着重文字
i: 斜体字
u:下划线
del：删除线
sup：上标字
sub:下标字
ins：定义插入字

<p><i>HTML</i>超文本标记语言，标准通用<em>HTML</em>下的一个应用。是网页制作必备的编程语言。</p>
   <p>HTML 超文本<b>标记语言</b>，标准<strong>通用</strong>标记语言下的一个应用。是<del>网页制作</del>必备
       的编程语言。</p>
   <p>HTML 超文本标记<ins>语言</ins>，标准通用标记<sup>语言</sup>下的一个<sub>应用</sub>。是<b>网页制作</b>必备
       的编程语言</p>

&It: <,小于号或显示标记
&gt: >大于号或显示标记
&reg：已注册
&copy:版权
&trade:商标
&nbsp:不断行的空白

<p>标签是成对出现的，比如&lt;b&gt;和&lt;/b&gt;</p>
   <p>Copyright &copy;2019 imooc.com.All Rights Reserved &reg;中国慕课网</p>

无序列表和有序列表
无序列表
ul

<ul>
        <li>设定图象显示的大小，以象素为单位</li>
        <li>设定图象边框的大小，单位也是象素</li>
        <li>设定图象边缘的空白数，hspace设定左右</li>
        <li>vspace设定上下，这样可以确保其他元素与图片的距离。</li>
    </ul>

type属性值为

值	描述
disc	圆点
square	正方形
circle	空心圆

有序列表
ol

<ol type="1">
        <li>设定图象显示的大小，以象素为单位</li>
        <li>设定图象边框的大小，单位也是象素</li>
        <li>设定图象边缘的空白数，hspace设定左右</li>
        <li>vspace设定上下，这样可以确保其他元素与图片。</li>
    </ol>

type属性值为

值	描述
1	数字1.2.3…
a	小写字母
A	大写字母
i	小罗马字母
I	大罗马字母

img:添加图像
路径：相对路径（建议）绝对路径 (相对盘在哪不建议使用) 远程路径

    <img src="img/qiannn.jpg" alt="html基础课" width="200px" height="270px" /></a>

注：当由于网速太慢，src属性出错，浏览器禁用图像时，用户无法查看图像，alt 属性可以替代图像显示在浏览器中。

a：超级链接
href：链接地址，可以是内部链接或外部链接

<a href="http://www.baidu.com">百度</a>
<a href="#">跳转当前页面</a>
<a href="./settings.html" target="_blank">项目里面的页面</a>

注：属性 target="_blank" 表示给链接添加新窗口

a链接可以做成锚标记：
当前页面的锚标

<a href="#衣服">目录一</a>
<a href="#裤子">目录二</a>
<a href="" name="衣服"></a>
<a href="" name="裤子"></a>

跨页面的锚标

页面一：    <a href="./settings.html#鞋子">跨页面的锚标</a>
页面二：    <a name="鞋子">

div ：区块框架元素网页框架布局

<div>我是div</div>

表单元素标签：主要用于注册、登录、选择

表单元素的添加：
（一）input:表单输入标签

单行文本域
属性：
name 名字
value 值
placeholder 提示
maxlength 最大输入长度
<input type="text" name="username" value="" placeholder="请输入.." maxlength="10">
注：只能输入一行内容。
密码框
<input type="password" name="" value=""/>
单选框

<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
<input type="radio" name="sex"/>无

注:同一组的name值要相同，value值不同。
cheacked 表示这条内容被选中。

复选框

<input type="checkbox" value="0"/>篮球
<input type="checkbox" value="1"/>乒乓球
<input type="checkbox" value="2"/>足球

按钮

<!--按钮-->
  <button>按钮</button>
  <input type="button" name="" value="按钮"><br/>
  <input type="submit" name="" value="提交"><br/>
  <input type="reset" name="" value="重置"><br/>

多行文本框

属性：
name:名称
placeholder：设置文本框的简短提示
rows:可见行数
cols:可见列数

<textarea name="" row="" cols=""></textarea>

（二）select 和 option：下拉菜单和列表标签
select属性：

属性	值
multiple	设置选择多个选项
size	设置列表中可见选项的数目

<select name="地址">
    <option value="请选择--">请选择--</option>
    <option value="西安">西安</option>
    <option value="汉中">汉中</option>
    <option value="延安">延安</option>
    <option value="铜川">铜川</option>
</select>
<select name="地址" multiple="2">
    <option value="请选择--">请选择--</option>
    <option value="西安">西安</option>
    <option value="汉中">汉中</option>
    <option value="延安">延安</option>
    <option value="铜川">铜川</option>
</select>
<select name="地址" size="3">
  <option value="请选择--">请选择--</option>
  <option value="西安">西安</option>
  <option value="汉中">汉中</option>
  <option value="延安">延安</option>
  <option value="铜川">铜川</option>
</select>

效果展示：
在这里插入图片描述
from:action 提后天的服务器路径 get 不安全提交的数据量比较多
表单的应用：

<body>
<h1 align="center">注册信息</h1>
<hr color="#336699"/>
<from action="action.php" method="get">      <!--失败的一行-->
    <table width="600px" bgcolor="#f2f2f2" align="center">
        <tr>
            <td align="right">姓名：</td>
            <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td>
        </tr>
        <tr>
            <td align="right">邮箱：</td>
            <td align="left"><input type="text" name="email" value="@163.com"/></td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td align="right">请确认密码：</td>
            <td align="left"><input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再输入密码"/></td>
        </tr>
        <tr>
            <td align="right">上传照片：</td>
            <td align="left"><input type="file" name="file"/></td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td align="left">
                男<input type="radio" name="sex" value="man"/>            <!--单选框-->
                女<input type="radio" name="sex" value="woman"/>
                保密<input type="radio" name="sex" value="bm" checked/></td>  <!-- checked表示这条内容被选中-->
        </tr>
        <tr>
            <td align="right">爱好：</td>
            <td align="left">
                读书<input type="checkbox" name="habby1" value="read" checked/>
                跳舞<input type="checkbox" name="habby1" value="dance"/>                <!--复选框-->
                唱歌<input type="checkbox" name="habby1" value="sing"/></td>
        </tr>
        <tr>
            <td align="right">爱好的运动：</td>
            <td align="left">
                跑步<input type="checkbox" name="habby2" value="1" checked/>
                篮球<input type="checkbox" name="habby2" value="2"/>
                跳绳<input type="checkbox" name="habby2" value="3"/></td>
        </tr>
        <tr>
            <td align="right">城市：</td>
            <td align="left">
                <select name="city" >                     <!--下拉菜单-->
                    <option value="xz">--请选择--</option>
                    <option value="bj" selected>北京</option>    <!--selected表示默认选项值为北京-->
                    <option value="tj">天津</option>
                    <option value="hb">河北</option>
                    <option value="sh">上海</option>
                    <option value="fj">福建</option>
                    <option value="xm">厦门</option>
                    <option value="gz">广州</option>
                </select>
                <select name="city" size="6" multiple>        <!--multiple是选择多个下拉菜单中的内容-->   <!--下拉菜单-->
                    <option value="bj">北京</option>
                    <option value="tj">天津</option>
                    <option value="hb">河北</option>
                    <option value="sh">上海</option>
                    <option value="fj">福建</option>
                    <option value="xm">厦门</option>
                    <option value="gz">广州</option>
                </select>
                <select name="city">
                    <option value="xz">--请选择--</option>
                    <optgroup label="华北">
                    <option value="bj">北京</option>
                    <option value="tj">天津</option>
                    <option value="hb">河北</option>
                  </optgroup>
                    <optgroup label="华东">
                    <option value="sh">上海</option>
                    <option value="fj">福建</option>
                    <option value="xm">厦门</option>
                    <option value="gz">广州</option>
                    </optgroup>
                </select>
                <select name="city" size="6" multiple>
                    <option value="xz">--请选择--</option>
                    <optgroup label="华北">
                        <option value="bj">北京</option>
                        <option value="tj">天津</option>
                        <option value="hb">河北</option>
                    </optgroup>
                    <optgroup label="华东">
                        <option value="sh">上海</option>
                        <option value="fj">福建</option>
                        <option value="xm">厦门</option>
                        <option value="gz">广州</option>
                    </optgroup>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">简介</td>
            <td align="left"><textarea name="jj" placeholder="请讲述你的故事..."rows="6" cols="50"></textarea></td>    <!--多行文本域-->
        </tr>
        <tr>
            <td  align="center"><input type="button" value="来点我" name="button"/>
                <input type="submit" value="submit"name="submit"/>                <!--按钮-->
                <input type="reset" value="reset" name="reset"/>
                <input type="image" name="image_button" src="img/image.jpg"/></td>  <!--图像域-->
        </tr>
        <tr>
            <td><input type="hidden" value="这是一个用户注册信息"/></td>
            <td></td>
        </tr>
    </table>
</from>
</body>

在这里插入图片描述
table表格：
属性：
align:left right center 表格对齐方式
cellpadding:单元边沿与其内容的空白
cellspacing:列与列之间的间距

<table border="1px" bgcolor="#ffb6c1" width="500px" align="center" cellspacing="0" cellpadding="10px">
    <caption>这是一个表格</caption>
    <tr>
        <td colspan="2">1</td>
        <td>3</td>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

</table>
      <br/>
      <br/>
<table border="1px" bgcolor="#8a2be2" width="500px" align="center" cellspacing="0" cellpadding="10px">
    <tr>
        <th rowspan="2">1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>

        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
</table>

在这里插入图片描述
iframe ：小型的企业框架企业系统

<a href="https://www.jd.com/?cu=true&utm_source=nclick.linktech.cn&utm_medium=tuiguang&utm_campaign=t_4_A100235089&utm_term=089b90829e0b4f07b1034d7285edf2ba" target="tardata" >京东</a>&ndash;&gt;
<a href="https://ai.taobao.com/" target="tardata">淘宝</a>
<a href="./settings.html" target="tardata">第一个</a>;
<a href="./table.html" target="tardata">第二个</a>
<iframe name="tardata" src="http://www.runoob.com/" width="1200" height="500"></iframe>