初学html总结

2019-08-17 17:58:49

html：超文本标记语言，用于网页结构的搭建

html语言构成：由标签、属性、属性值构成

标签：" < "后面第一个单词

属性：标签后面用空格隔开的单词

属性值：属性后用“ = ”连接并在“双引号”里面的叫做属性值

注：如果一个标签有多个属性值，用空格隔开

 

html结构的区域划分：

两个结构 head-描述区、body-内容区

 

html语法：

标签分类: 双标签（常规标记）、单标签（空标记）

双标记：

<标签 属性="属性值" 属性="属性值">

    <div class="box" id="box-1"> div>

单标签：

<标签 属性="属性值" 属性="属性值">

    <img src="" alt="">

html常用标签：

h1-h6: 标题标签，由大至小，h1 唯一性！在同一个页面内只能出现一次，放网站LOGO

i/em: 字体倾斜

b/strong: 字体加粗

u: 下划线标签

p: 段落标签

sup: 上行标签

sub: 下行标签

< : "<" 左尖角符号

> : ">" 右尖角符号

  : 不换行空格

© : ©版权（copyright）

®: ®注册商标

div: 盒子（容器）作用：划分网页布局

span: 表示1字符或者一句简短的话

　　 <h1 align="center">holle wordh1>
    
    <h2>2号标题sadh2>
    <h3>3号标题h3>
    <h4>4号标题h4>
    <h5>5号标题h5>
    <h6>6号标题h6>

    <strong>加粗strong><br>
    <hr>
    <b>加粗b>
    <i>倾斜i>
    <em>倾斜em>
    <u>下划线u><sup>上行标签sup><sub>下行标签sub>
    <p>段落p>
    <div>盒子div>
    <span>少量字符span>
    < br >©

列表：无序列表、有序列表、自定义列表

: 无序列表
• 标签

属性：type(类型)="1、A、a、Ⅰ" start(开始于)="1、2、3..."

: 自定义标签

&

　　

名词

　　

对名词的解释

　　每组

&

写一个

   
    <ul>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
    ul>
    
    <ol type="A" start="4">
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
    ol>
    
    <dl>
        <dt>名词dt>
        <dd>对名词的解释dd>
    dl>
    <dl>
        <dt>自定义列表dt>
        <dd>按组写，每组<dt><dd>写一个<dl>dd>
    dl>

超链接

a标签的属性：

href="目标的路径"

target="_self(默认值)/_blank(打开新的页面)"

target="#" 空连接，本页面跳转

target="##"空连接，不做跳转

target="javascript:void(0)" 空连接，不做跳转

默认样式：

文本蓝色、下划线

<a href="http://www.baidu.com">超链接a><br>
<a href="http://www.baidu.com" target="_blank" title="打开新页面">超链接a><br>
<a href="#">空连接，本网页跳转a><br>
<a href="##">空连接，不做跳转a><br>
<a href="javascript:void(0)">空连接，不做跳转a>

title属性:

title="提示信息" 适用于所有标签

 

插入图片

img必须的属性：

　　src="url" 导入图片的路径

　　alt="文字" 图片路径发生错误时，文本替换图片、便于seo优化

　　title="文本" 提示信息

alt 和title属性的区别：

　　alt 文本替换图片、seo优化

　　title 提示信息、图片标题

例：  <img src="./images/img1.png" alt="未找到此图片" title="提示信息"><br>
     <img src="./img2.png" alt="">
     <img src="./img/img3.png" alt="">
     <img src="../../../img.png" alt=""><br>

 

 相对路径 ：

首先确定自己当前位置（操作哪个文件，这个文件就是当前目录）

./ 当前目录 ../ 上一级目录

1、同级找同级： 直接写名称或./名称

2、父级找子级： ./文件夹名称/目标名称

3、子级找父级： 返回上一级...

绝对路径：D:\h5-1920\day1\images\img.jpg

 

表格：

表格的作用：显示数据

表格内的表格属性：

　　width="" 宽

　　height="" 高

　　border="" 框线宽度

　　bordercolor="" 框线颜色

　　cellspacing="0" 单元格之间的间距

　　cellpadding="0" 内容距离单元格的间距

　　align="center/left/right" 水平对齐方式

　　valign="top/bottom/middle" 垂直对齐方式

合并单元格：

规则：只要是单元格跨行的都是合并行，不跨行的就是合并列

合并行： rowspan="合并的数量"

和并列： colspan="合并的数量"

注：无论合并行还是和并列，操作的都是td

<table width="300" height="300" border="2" bordercolor="red" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td>1td>
            <td valign="bottom">2td>
            <td>3td>
        tr>

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

        <tr>
            <td>1td>
            <td>2td>
            <td>3td>
        tr>
 table>

 

 表单：

表单的作用： 收集用户信息

form表单：

　　表单元素尽量放在表单内

form的属性：

　　action="url(路径)" 表单提交的路径

　　neam="" 表单的名称

　　method="post/get" 表单的提交方式

　　　　post/get的区别：

表单元素：输入框、密码框、提交按钮、重置按钮、空按钮......

大部分是通过 input 标签实现

input标签属性:

　　type（类型）属性：input会根据type的属性值的不同，在页面的显示状态也不同

　　value属性：在输入框里面表示当前input的初始值 （value作用会根据type的改变而改变）

　　name属性：input的名称

　　size属性：设置input的尺寸，以字符为单位

　　maxlength属性：设置输入框输入字符的最大长度

type的属性值：

　　type="text": 显示的是文本框（输入框）

　　type="password": 密码框

　　type="submit": 提交按钮

　　type="reset": 重置按钮

　　type="button": 空按钮

 <table width="300" heigh="400" border="1" bordercolor="blue" cellspacing="0" cellpadding="0">
        <form action="">
            <tr>
                <td rowspan="4">总体信息td>
                <td colspan="2" align="center">用户注册td>                
            tr>
            <tr>                
                <td>用户名：td>
                <td><input type="text" value="填写用户名">td>
            tr>
            <tr>
                <td>密码：td>
                <td><input type="password">td>
            tr>
            <tr>                
            　　 <td colspan="2" align="center"><input type="submit"> <input type="reset">td>  <br>
            tr>
        form>
    table>
    <form action="" name="" method="">
        <br>
        <input type="text" value="请输入..." name="" size="9" maxlength="7">
        <br>
        <br>
        <input type="password">
        <br>
        <input type="submit" value="注册">
        <input type="reset">
        <input type="button" value="换肤">
    form>