初学html总结

2019-08-26 05:43:24来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

初学html总结

2019-08-17 17:58:49

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

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

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

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

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

注:如果一个标签有多个属性值,用空格隔开   html结构的区域划分: 两个结构 head-描述区body-内容区   html语法: 标签分类: 双标签(常规标记)、单标签(空标记) 双标记: <标签 属性="属性值" 属性="属性值"> </标签>
<!-- eg -->
    <div class="box" id="box-1"> </div>
单标签: <标签 属性="属性值" 属性="属性值">
<!-- eg -->
    <img src="" alt="">

html常用标签:

h1-h6: 标题标签,由大至小,h1 唯一性!在同一个页面内只能出现一次,放网站LOGO i/em: 字体倾斜 b/strong: 字体加粗 u: 下划线标签 p: 段落标签 sup: 上行标签 sub: 下行标签 &lt; : "<" 左尖角符号 &gt; : ">" 右尖角符号 &nbsp; : 不换行空格 &copy; : ©版权(copyright) &reg: ®注册商标 div: 盒子(容器)作用:划分网页布局 span: 表示1字符或者一句简短的话
<!-- eg -->
   <h1 align="center">holle word</h1> <!-- h1 具有唯一性! 在同一页面只能出现一次,放网站LOGO --> <h2>2号标题sad</h2> <h3>3号标题</h3> <h4>4号标题</h4> <h5>5号标题</h5> <h6>6号标题</h6> <strong>加粗</strong><br> <hr><!-- br换行 hr线条 --> <b>加粗</b> <i>倾斜</i> <em>倾斜</em> <u>下划线</u><sup>上行标签</sup><sub>下行标签</sub> <p>段落</p> <div>盒子</div> <span>少量字符</span> &lt;&nbsp;br&nbsp;&gt;&copy;

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

<ul>: 无序列表 <li>标签 <ol>属性:type(类型)="1、A、a、Ⅰ" start(开始于)="1、2、3..." <dl>: 自定义标签 <dt>&<dd>   <dt>名词</dt>   <dd>对名词的解释</dd>   每组<dt>&<dd>写一个<dl>
   <!-- 无序列表 -->
    <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>按组写,每组&lt;dt&gt;&lt;dd&gt;写一个&lt;dl&gt;</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>1</td>
            <td valign="bottom">2</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>

 

 表单: 表单的作用:收集用户信息 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">&nbsp;<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>

原文链接:https://www.cnblogs.com/peizilu/p/11369654.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS的10个方法技巧

下一篇:CSS网页布局可以使用表格吗