学习日记50--html学习

最新推荐文章于 2021-12-09 15:59:53 发布

dershine

最新推荐文章于 2021-12-09 15:59:53 发布

阅读量353

点赞数

分类专栏：日记

本文链接：https://blog.csdn.net/dershine/article/details/82345372

版权

日记专栏收录该内容

55 篇文章 0 订阅

订阅专栏

CS架构：Client/Server架构，即客户端/服务器架构。是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，需要安装客户端才可进行管理操作
BS架构：Browser/Server架构，客户端基本上没有专门的应用程序，应用程序基本上都在服务器端。由于客户端没有程序，应用程序的升级和维护都可以在服务器端完成，升级维护方便。
html规范
1. 所有的标签必须小写
2. 所有的属性必须用双引号括起来
3. 所有标签必须闭合
4. img必须要加alt属性(对图片的描述)
html块
1、div标签块元素，表示一块内容，没有具体的语义。
2、span标签行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签
1、em标签行内元素，表示语气中的强调词，效果—(斜体)
2、i标签行内元素，原本没有语义，w3c强加了语义，表示专业词汇，效果—（斜体）
3、b标签行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名,效果—（加粗）
4、strong标签行内元素，表示非常重要的内容,效果—(加粗)
语义化的标签
语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
插入图片
<img src=”images/pic.jpg” alt=”产品图片” / >
“ ./ ” 表示当前文件所在目录下
“ ../ ” 表示当前文件所在目录下的上一级目录
插入链接
<a>标签可以在网页上定义一个链接地址，通过href属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。
<a href=”链接地址” title=“链接上的提示文字” >文字 </a> ——–文字链接网址
<a href=”链接地址” title=“链接上的提示文字” ><img src=”xxx.jpg alt=”xxx”/> </a>——–图片链接网址
<a href=”#”>文字 </a> ——— # 表示链接到页面顶部
<a href=”javascript:;”>文字 </a> ——— js语句为空表示链接不做任何事
定义页面内部跳转
设置锚点—>设置链接
<h3 id=”maodian”>标题3</h3> — 设置标题3为锚点
<a href=”#maodian”>跳转到锚点</a> —设置链接跳至锚点
新建窗口打开链接
<a href=”链接地址” title=“链接上的提示文字” target=”_blank”>文字 </a> ——–文字链接网址
有序列表，每条项目上会按1、2、3…编号
<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol>
在sublime中emmet插件的快捷键是：ol>li*3+Tab
无序列表，显示小圆点
<ul> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ul>
在sublime中emmet插件的快捷键是：ul>li*3+Tab
带链接的无序列表
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
快捷键：ul>(li>a)*3+Tab，
同理，div>div*3+Tab , > 表示嵌套
注释的快捷键： ctrl + /
★ 按住ctrl，点击其他位置，可以产生多个光标，实现同步修改
定义列表，定义–解答样式
<dl> <dt>1</dt> <dd>1</dd> <dt>2</dt> <dd>2</dd> <dt>3</dt> <dd>3</dd> </dl>
快捷键：dl>(dt+dd)*3 + Tab

html表格

创建主体
快捷键：table>(tr>td*5)*6 + Tab

定义表格尺寸，合并单元格

// <th>：定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体。
<table border="1" width="600" height="300">
    <tr>
        <th colspan="5" align="center">基本情况</th>
    </tr>
    <tr>
        <td width="18%" align="center">姓名</td>
        <td width="18%"></td>
        <td width="18%" align="center">性别</td>
        <td></td>
        <td rowspan="5" width="28%"><img res="xxx.png" alt="xxx"></td>
    </tr>
    <tr>
        <td align="center">民族</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">政治面貌</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">籍贯</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td align="center">电子邮箱</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

传统表格布局
1. cellpadding 定义单元格内内容与边框的距离
2. cellspacing 定义单元格与单元格之间的距离
3. align和valign设置的是自己相对于父级的对齐方式，valign只有<td>里面有
4. 传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
  1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
  2、★单元格里面嵌套表格
  3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
  4、通过属性或者css样式设置单元格中元素的样式

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <h3>用户注册</h3>
    <form action="http://www.baidu.com"> <!--数据提交位置-->
        <div>
            <label>用户名：</label>
            <input type="text" name="username"> 

        </div>
        <br>
        <div><!--单行文本-->
            <label>密 &nbsp;&nbsp;码：</label>
            <input type="password" name="pwd">
        </div>
        <br>
        <div><!--单选-->
            <label>性别：</label>  
            <input type="radio" name="gender"> 男  <!--名称写一样，可以保证单选-->
            <input type="radio" name="gender"> 女
        </div>
        <br>
        <div><!--多选-->
            <label>爱好：</label>  
            <input type="checkbox" name="like"> 学习
            <input type="radio" name="like"> 上网
        </div>
        <br>

        <div><!--上传文件-->
            <label>照片：</label>
            <input type="file" name="">

        </div>
        <br>

        <div><!--多行文本-->
            <label>个人描述：</label>
            <textarea></textarea>
        </div>
        <br>

        <div><!--下拉菜单-->
            <label>籍贯：</label>  
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>杭州</option>
                <option>深圳</option>
            </select>
        </div>
        <br><!--提交按钮-->
        <input type="submit" name="" value="提交">

    </form>

</body>
</html>

内嵌框架

<body>
<a href="http://www.baidu.com" target="myframe">baidu</a>
<a href="http://www.qq.com" target="myframe">tencent</a>
<a href="http://www.inspur.com" target="myframe">inspur</a>
<iframe src="http://www.baidu.com" width="900" height="500" 
frameborder="no" scrolling="no" name="myframe"></iframe>
</body>

可以实现，在页面内嵌一个页面，并设置内嵌页面的高度，边框和滚动条，还可以创建超链接

一个不错的学习资料：https://codeme.gitbooks.io/easy-web-code-book/

dershine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习日记50--html学习

CS架构：Client/Server架构，即客户端/服务器架构。是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，需要安装客户端才可进行管理操作BS架构：Browser/Server架构，客户端基本上没有专门的应用程序，应用程序基本上都在服务器端。由于客户端没有程序，应用程序的升级和维护都可以在服务器端完成，升级维护方便。html规范 ...
复制链接

扫一扫

专栏目录