码迷,mamicode.com
首页 > Web开发 > 详细

第一章.前端之html

时间:2019-10-11 16:46:06      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:html   一个   zh-cn   注意   自动完成   ima   识别   checked   兼容   

第十七章、前端之html

一. html介绍

  1. web服务本质
import socket


sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)


while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b"<h1>Hello world!</h1>")
    conn.close()

过程:浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

  1. html是什么?

    • 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。
    • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
    • 网页文件的扩展名:.html或.htm
  2. html不是什么?

    HTML是一种标记语言(markup language),它不是一种编程语言。
    
    HTML使用标签来描述网页。

    技术图片

  3. html文档结构

    最基本的HTML文档:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>css样式优先级</title>
    </head>
    <body>
    
    </body>
    </html>

    补充:

    1. <!DOCTYPE html>声明为HTML5文档。
    2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
    3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
    4. <title>、</title>定义了网页标题,在浏览器标题栏显示。
    5. <body>、</body>之间的文本是可见的网页主体内容。
  4. html标签

    单标签:<br/>、<hr/>、<img src="1.jpg" />等。 
    
    双标签:<div>和</div>,第一个标签是开始,第二个标签是结束。
  5. 几个重要的属性

    id:定义标签的唯一id,就好像人的身份证
    class:为html元素定义一个或多个类名
    style:规定元素的行内样式(CSS样式)
  6. html注释

    <!--注释内容-->
  7. <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

    二.html常用标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>
内容  对应代码
空格  &nbsp;
>   &gt;
<   &lt;
&   &amp;
¥   &yen;
版权  &copy;
注册  &reg;
img标签

 img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签

超链接标签

a?href="http://www.oldboyedu.com"?target="_blank"?>点我</a> 

所谓的超链接是指从一个网页指向一个目标的连接关系

href属性指定目标网页地址。该地址可以有几种类型:

绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
相对URL - 指当前站点中确切的路径(href="index.htm")
锚URL - 指向页面中的锚(href="#top")
 

target属性:
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

补充

URL地址由4部分组成
第1部分:为协议:http://、ftp://等 
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。
列表
1.无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>
 
type属性:

disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
有序列表

<ol type="1" start="2">
   <li>第一项</li>
   <li>第二项</li>
</ol>
 
type属性:

1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表标签

<dl>
  <dt>标题1</dt>
    <dd>内容1</dd>
  <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>
表格标签
<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>爱好</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>1</td>
        <td>Egon</td>
       <td>杠娘</td>
     </tr>
     <tr>
        <td>2</td>
       <td>Yuan</td>
            <td>日天</td>
      </tr>   
    </tbody>
form表单标签
<form type="">  </from>

type属性:
属性  描述
accept-charset  规定在被提交表单中使用的字符集(默认:页面字符集)。
action  规定向何处提交表单的地址(URL)(提交页面)。
autocomplete    规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。如果是上传文件需要将enctype="multipart/form-data"
method  规定在提交表单时所用的 HTTP 方法(默认:GET)。
name    规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate  规定浏览器不验证表单。
target  规定 action 属性中地址的目标(默认:_self)。
input元素
type属性值 表现形式    对应代码
text    单行输入文本  <input type=text" />
password    密码输入框   <input type="password"  />
date    日期输入框   <input type="date" />
checkbox    复选框 <input type="checkbox" checked="checked"  />
radio   单选框 <input type="radio"  />
submit  提交按钮    <input type="submit" value="提交" />
reset   重置按钮    <input type="reset" value="重置"  />
button  普通按钮    <input type="button" value="普通按钮"  />
hidden  隐藏输入框   <input type="hidden"  />
file    文本选择框   <input type="file"  />
----------------------------------------------------------------------
属性:
name:表单提交时的“键”,注意和id的区别
value:表单提交时对应项的值
type="button", "reset", "submit"时,为按钮上显示的文本年内容
type="text","password","hidden"时,为输入框的初始值
type="checkbox", "radio", "file",为输入相关联的值
checked:radio和checkbox默认被选中的项
readonly:text和password设置只读
disabled:所有input均适用
select标签
<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>
   
属性说明:

multiple:布尔属性,设置后为多选,否则默认单选
disabled:禁用
selected:默认选中该项
value:定义提交时的选项值
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
属性说明
name:名称
rows:行数
cols:列数
disabled:禁用
块级标签:
<h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>
 特点:

  1.总是从新的一行开始

  2.高度、宽度都是可控的

  3.宽度没有设置时,默认为100%

  4.块级元素中可以包含块级元素和行内元素
行内标签:
<span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表
  特点:
  1.和其他元素都在一行

  2.高度、宽度以及内边距都是不可控的

  3.宽高就是内容的高度,不可以改变

  4.行内元素只能行内元素,不能包含块级元素

第一章.前端之html

标签:html   一个   zh-cn   注意   自动完成   ima   识别   checked   兼容   

原文地址:https://www.cnblogs.com/demiao/p/11654975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!