欢迎光临
我们一起进阶

python-前端html操作(三)body

扫码或搜索:沉默王二
发送 290992
即可立即永久解锁本站全部文章

body

符号: 可参考 http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

常用符号:
>  (>)   

<  (< ) 

&  (&)

空格  ( )

标签分为:块级标签,行内标签

举个栗子:

<body>
    <div style="background-color: wheat">Hello div</div>  #div是块级标签,独占一行
    <span style="background-color: wheat">Hello span</span>  #span标签是行内标签,非独占一行
#为了效果明显这里加上一个背景色
</body>

Hello div
Hello span

可以通过chrome浏览器Fn+F12 ,用剪头指向内容判断是块级标签还是行内标签。

( 这里get了一个小技能,ctrl+shift+p 然后输入capture full size screenshoot可以截图整个页面的内容Hhhhh…)

块级标签 : 默认独占一行

常用块级标签:dhp

  • div 默认没有样式的一行。块级标签。如果想加样式需要结合css
  • h1-h6 等同于字体格式标题
  • p 段落,上下有行距
  • br 换行,自闭合
  • hr 加一条分割线

行内标签(行级标签) 默认不会独占一行

常用行内标签:span,img,a,lable,input,form

  • span 默认没有样式的一块。行内标签。
  • a 标签
超链接
<a href="home.html">home page</a>    #点击homepage 跳转到home.html
    <a href="https://docs.djangoproject.com">Django官网</a>   #点击Django官网,跳转到这个网址
    <br>    
    <a href="http://www.baidu.com" target="_blank">百度</a>   #点击百度,在新的标签页打开这个网址

Django官网
百度

<a href="#m1">第一章</a>
    <br>
    <a href="#m2">第二章</a>  #点击第二章这个超链接就会跳到文章下文的第二章内容
    <br>
    <br>
    <div id="m1" style="height: 2000px;background-color: beige">第一章内容</div>
    <div id="m2" style="height: 2000px;background-color: pink">第二章内容</div>
    ```

在html里面,每一个标签都能设置id,且id不可跟其他id重复,id唯一

###### img标签

# src 导入图片; title 将鼠标放到图片上会显示这个字

src和title是img标签特有的属性

[![](https://docs.djangoproject.com/s/img/small-fundraising-heart.d255f6e934e5.png)](https://docs.djangoproject.com/s/img/small-fundraising-heart.d255f6e934e5.png)

###### select 标签


#一般会给每个option设置一个value

option里面selected=”selected” 表示默认选中下拉框里的


 <select multiple="multiple" size="5">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
        <option selected="selected">武汉</option>
    </select>

# size属性 下拉框里显示几个
# multiple属性  一次可以选中多个
 <select>
        <optgroup label="广东省">
            <option>深圳</option>
            <option>广州</option>
        </optgroup>
        <optgroup label="湖北省">
            <option>武汉</option>
            <option>黄石</option>
        </optgroup>
    </select>
# optgroup不可选,将下面的option分组,再选择option

##### 常用标签:

textarea 文本框 如果要将数据提交到form需要加nametextarea 文本框 如果要将数据提交到form需要加name

<textarea>默认内容哈哈哈</textarea>
<textarea>默认内容哈哈哈</textarea>

###### input标签
>text 文本框



主机名:
#value设置一个默认值

<div>主机名:<input type="text" value="默认值哈哈"></div>

> radio 单选框



男:
女:
#radio类型的,name相同的时候才会互斥,二选一 #checked 默认选中一个

<div>男:<input name="gender" type="radio"></div>
<div>女:<input name="gender" type="radio"></div>

> checkbox 复选框



湖北
<div>广东<input type="checkbox"></div> <div>上海<input type="checkbox"></div> #checked="checked"默认选中

<div>湖北<input type="checkbox" checked="checked"></div>
<div>广东<input type="checkbox"></div>
<div>上海<input type="checkbox"></div>

> file 上传文件 (如果需要提交到后台,需要特殊的设置)

如果想要提交文件到后台,需要在其所在的form标签添加

  
```
  

password 密码框

submit 提交数据到后台

赞(0) 打赏
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

小白学堂,学的不止是技术,更是前程

关于我们免责声明

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏