zoukankan      html  css  js  c++  java
  • 前端

    前端基础学习【一】:HTML的一些基本的标签

    一、h系列的标签

    h1-h6:标题标签

    <h1>今天天气不错呀!</h1>

    上面是从h1到h6标签的页面显示形式,可以发现h标签有字体加粗的效果

    普通文本的字体大小跟h4是一样的。

    注意:不要用标题标签来给文本做加粗效果。

    二、font标签(h5已经禁用)

    font标签是一个字体标签,可以给标签中添加一些属性,达到自己想要的字体形式。

    标签的属性:用来描述标签的特征。

    标签属性的书写格式:属性名=“属性值”,每个属性用空格分开

    font中常用的属性:color,size(1-7,3正常),face(指定文本的字体)

    <font color="gray" size="2" face="宋体">本人菜鸟,多包涵!</font>

    三、hr标签(水平线标签)

    hr标签是一个单标签,最后的斜杠可有可无。

    <hr/>

    四、p标签(段落标签)

    <p>好好写代码!</p>

    p标签的特点:让文字成为段落,并且有明显的段落间距。

    五、br标签(换行标签)

    <br/>

    六、字体样式的一些标签

    字体加粗:strong

    斜体:em

    下划线:ins

    删除线:del

    七、img标签

    这是一个图片的标签

    <img src="图片路径" alt="图片加载异常的时候显示的内容" title="鼠标停留在图片上显示的提示"/>

    路径问题:

    1、绝对路径:从计算机的盘符就开始计算

    2、相对路径:从一个文件到另一个文件经过的文件夹+目标文件的文件名+后缀名

    八、a标签(超链接)

    1、实现页面直接的跳转

    <a href="跳转到其他页面的相对路径/跳转到连接地址" title="鼠标停留时显示的提示" target="跳转的方式">点我</a>

    target:跳转的方式。_blank:在新的窗口打开页面;_self:在当前页面进行跳转

    2、使用a标签在页面上定位标签

    应用场景:在页面中经常见到的---回到顶部

    在顶部定义一个标签,并且标签中要有id;

    在底部写一个a标签,href中写#+id;

    点击之后就会回到顶部。

    3、实现下载的功能

    在href中输入 文件的相对路径 即可

    注意:这种方式已经用的很少了,并且浏览器认识文件格式的话,就会直接在浏览器中打开那个文件。

    九、base标签

    base标签作用:统一设置该页面中a标签的跳转方式。

    base标签的用法:在head标签中写,它是一个单标签。

    base标签的前提:页面中的a标签中没有设置target属性。

    十、ul标签(无序列表)

    <ul>

        <li>商品名称</li>

         <li>商品价格</li>

    </ul>

    十一、ol标签(有序列表)

    <ol>

         <li>商品名称</li>

         <li>商品价格</li>

    </ol>

    十二、dl标签(自定义列表)

    <dl>

    <dt>商品信息</dt>

    <dd>名称</dd>

    <dd>价格</dd>

    <dt>商品规格</dt>

    <dd>重量</dd>

    <dd>热量</dd>

    </dl>

    十三、table标签(表格)

    十四、input标签

    1、输入框

    <input type="text"  placeholder="输入框默认提示的文字,我们输入时会消失" value="设置输入框的默认值" maxlength="允许输入的最大长度"/>

    注意:value属性会覆盖placeholder属性。

    2、密码框

    <input type="password"/>

    3、单选框

    <input type="radio" name="hobby" checked="checked"/>唱歌

    <input type="radio" name="hobby"/>跳舞

    name属性:属性相同的为一组,进行单选

    checked属性:默认选中的标签

    4、按钮

    <input type="button" value="按钮上显示的内容"/>

    5、多选框

    <input type="checkbox"/>

    6、提交按钮

    <input type="submit"/>

    7、重置按钮

    <input type="reset"/>

    注意:重置按钮必须在form表单中

    8、图片提交

    <input type="image"/>

    9、文件上传按钮

    <input type="file"/>

    十五、select标签(下拉框)

    <select>

        <option selected="selected">选项一</option>

        <option>选项二</option>

    </select>

    默认选择选项一

    十六、textarea标签(文本域)

    <textarea cols="20" rows="10"></textarea>

    十七、form标签(表单)

    <form></form>

    表单:用来收集信息,装表单控件

    表单控件:给用户输入或者交互用的标签

    属性:

    action:指定数据提交地址

    method:指定提交数据的方法:post提交数据量小,不安全;get:提交数据量大,安全。

    十八、meta标签

    1、设置页面的编码格式

    <meta charset="编码格式"/>

    2、设置页面的关键字:做搜索引擎的优化

    <meta name="keywords" content=""/>

    3、设置页面的描述:做搜索引擎的优化

    <meta name="description" content="">

    十九、div和span标签

    div:是一个占据一整行的容器

    span:是一个自适应内容多少的容器

    注意:这两个标签没有语义化

    二十、link标签

    1、引入网站的图标

    <link el=”shortcut icon” type=”image/x-icon” href=”图标的路径”>

    2、引入css文件

    <link rel=”stylesheet” href=”css文件的路径”>

    3、dns预解析

    <link rel="dns-prefetch" href="需要预解析的服务器的地址">

    二十一、style和script标签

    style标签:写css代码

    script标签:写js代码

    二十二、图书符号的表示

  • 相关阅读:
    ansible笔记(三)--模块讲解
    Linux 后台执行top 出错“TERM environment variable not set” “top: failed tty get”
    信息熵与TF-IDF 学习笔记
    大数运算 文献收藏
    树状数组 Binary Indexed Tree 学习笔记
    Linux Apache 安装(无外网)
    大数定律与中心极限定理
    Python 如何同时遍历两个文件
    监督学习模型分类 生成模型vs判别模型 概率模型vs非概率模型 参数模型vs非参数模型
    unittest生成测试报告
  • 原文地址:https://www.cnblogs.com/f1443526266/p/7263495.html
Copyright © 2011-2022 走看看