前端 1

其他 2020-02-18 18:34:08 阅读次数: 0

域名解析

域名 -- ip地址 -- 192.168.1.10

https://192.168.1.10:80  -- www.jd.com  -- DNS解析 {'www.jd.com':'192.168.1.10',}

请求和响应

请求:浏览器socket客户端给服务端发信息
响应:服务端socket给客户端回信息

标签

Html标签:超文本标记语言,就是标记用的.

必须是封闭的
<meta >
<h1></h1>  
标签属性  id='xx' asdfasfd='xxx'
<h1 id='xx' asdfasfd='xxx'>

标签分类


两类:
	内敛标签(行内标签):不独占一行,内敛标签只能嵌套内敛标签    b\i\u\s\button\span\img\a
	块级标签(行外标签):自己独占一行,可以嵌套内敛标签和某些块级标签   \h1-h6\br\hr\p\div
	p标签:不能嵌套p标签,也不能嵌套块级标签

head标签中的标签

<title></title>	定义网页标题

<meta/>	定义网页原信息\配置信息(了解)

body标签中的基本标签

<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>

img标签

图片标签
属性 src='图片路径'  网络地址的绝对路径\本地相对路径
示例:
	<img src="1.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">

a标签 超链接标签

属性
href:超链接的地址
target:是否新建窗口
target="_self"  当前窗口打开某个路径对应的html页面
target="_blank" 新建窗口打开某个路径对应的html页面
示例:
	<a href="https://www.baidu.com" target="_blank">百度</a>

列表标签

无序列表:    
<ul type="none">
        <li>太白</li>
        <li>alexdsb</li>
        <li>景女神</li>
    </ul>
有序列表:
    <ol type="a" start="2">
        <li>大壮</li>
        <li>B哥</li>
        <li>灭霸</li>
        <li>雪飞</li>
    </ol>

标题列表标签

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

特殊字符

空格:&nbsp;
小于号:&lt;
大于号:&gt;
&符号:&amp;
...

表格标签(重点)

table
	cellpadding:文字和内边框的距离
	cellspacing:内边框和外边框的距离
	border:边框宽度

<table border="1" cellpadding="10" cellspacing="20">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>B哥</td>
                <td>40</td>
                <td>炒鸡蛋</td>
            </tr>
            <tr>
                <td>大壮</td>
                <td>38</td>
                <td>抽烟喝酒烫头</td>
            </tr>
            <tr>
                <td>雪飞</td>
                <td>18</td>
                <td>大壮</td>
            </tr>
        </tbody>
    </table>

form标签 表单标签和input标签 用户输入或者选择使用的标签

    action:指定数据提交路径
    input标签:
    	type属性:控制输入框的样式的
    	name属性:分组,携带数据的key   key:value
    	value:选择框提交数据的时的值,输入框的默认值
    input type属性的值:
    	text	单行输入文本	<input type=text" />
		password	密码输入框（不显示明文）	<input type="password"  />
		date	日期输入框	<input type="date" />
		checkbox	复选框	<input type="checkbox" checked="checked" name='x' />
		radio	单选框	<input type="radio" name='x' />
		submit	提交按钮	<input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
		reset	重置按钮	<input type="reset" value="重置"  />  #页面不会刷新，将所有输入的内容清空
		button	普通按钮	<input type="button" value="普通按钮"  />
		hidden	隐藏输入框	<input type="hidden"  />
		file	文本选择框	<input type="file"  /> （等学了form表单之后再学这个）
    	
    	
    <form action="http://127.0.0.1:8001">

            用户名:<input type="text" name="username" value="dazhuang">
            密码:<input type="password" name="password" value="111">

            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女

            <input type="checkbox" name="hobby" value="a"> 喝酒
            <input type="checkbox" name="hobby" value="b"> 抽烟
            <input type="checkbox" name="hobby" value="c"> 烫头
            <input type="submit">
            <hr>
        	<input type="date">
        	<input type="button" value="普通按钮">
        	<input type="reset">
        	<input type="hidden">
        	<input type="file">
    </form>
    
    form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通的按钮
    	<input type="submit">
    	<button>提交按钮</button>
   
input标签的其他属性
	checked默认选中
	 <input type="radio" name="sex" value="2" checked>女   #简写方式,当属性名和属性值相同时可简写
     <input type="checkbox" name="hobby" value="a"> 喝酒
     <input type="checkbox" name="hobby" value="b" checked="checked"> 抽烟
     <input type="checkbox" name="hobby" value="c" checked="checked"> 烫头

	readonly  只读 针对的是输入框  text password
	disabled  不允许操作  所有的input都可以设置
设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的

select标签 下拉选择框

单选
	<select name="city">
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
    </select>
多选:multiple
	<select name="city" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
   </select>

label标签

标识标签的功能的

方式1:for:执行对哪个标签进行标识
效果:点击label标签中的文字,就能让标识的标签获得光标
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">
方式2:
        <label>
            密码:<input type="password" name="password" value="111" disabled>
        </label>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
name：名称
rows：行数  #相当于文本框高度设置
cols：列数   #相当于文本框长度设置
disabled：禁用

昨日内容回顾

HTML

标签分类

内敛标签:不独占一行,只能嵌套内敛标签

块级标签:独占一行,能嵌套内敛标签和某些块级标签

标签封闭

<img >  自封闭
<div></div> 全封闭

head标签

​ meta标签,title标签

body标签

h1-h6  b u s i p span div br hr img a form input button table ul li ol li select label
textarea dl dt dd 
特殊符号 &nbsp;空格...

input

type属性
text password date radio checkbox file submit reset button hidden 

name属性 分组,提交数据时的key,提交的数据value

value属性 指定默认值

默认选中  checked属性

readonly 只读
disabled 禁用

table

<table border="1" cellpadding="1" cellspacing="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>alexdsb</td>
                <td>84</td>
                <td>吹牛逼</td>
            </tr>
        </tbody>
    </table>

form表单

    <form action="地址">
        <input type="text" name="username">

        <input type="radio" name="sex" value="1">
        <input type="radio" name="sex" value="2">
        <input type="submit">
        <button>提交</button>
    </form>

img

    <img src="图片地址" alt="图片未加载成功的提示信息" title="鼠标悬浮的提示信息" width="1" height="1">

a

    <a href="超链接地址" target="_blank"></a>
    <a href="超链接地址" target="_self"></a>

select下拉框

    <select name="city" multiple>
        <option value="1">上海</option>
        <option value="2" selected>深圳</option>
        <option value="2">惠州</option>
    </select>
selected默认选中
multiple 多选

label标签

        <label for="username1">用户名</label>
        <input type="text" name="username1" id="username1">

        <label>
            <input type="text" name="username2" id="username2">
        </label>

textarea 文本输入框

<textarea name="" id="" cols="30" rows="10"></textarea>

今日内容

CSS选择器(Cascading Style Sheet，层叠样式表)

css代码写法: h1{color:red;} 选择器{css属性:属性值;}

css代码引入

方式1
	head标签里面写
	<style>
        div{
            background-color: red;
            height: 100px;
            width: 100px;
        }
    </style>
方式2
	内敛样式:
	<div style="background-color: blue; height: 200px;width: 200px;"></div>
方式3 
	外部文件引入
	head标签里面写link标签
	<link rel="stylesheet" href="文件路径">

css选择器

基本选择器

元素选择器:
	div{  #标签名字
         color:red;
	}
id选择器:id值不能重复
	<div id="xuefei">
    	雪飞大美女
	</div>
	
	#xuefei{  
		color:green;
	}
类选择器: 类值可以重复
	<div id="dazhuang" class="c1">
    	大壮dsb
	</div>
	<div id="xuefei" class="c1">
    	雪飞大美女
	</div>
	
	.c1{
		color: green;
	}
	
	div.c1{ #div标签里面含有class值为c1的标签
		color: green;
	}
通用选择器
*{ #找到所有的标签
	color: green;
}

组合选择器

后代选择器

div a{   #找到div标签后代里面的所有a标签
	color:red;
}

儿子选择器

div>a{ #找到div的儿子标签这一代的a标签
	color:red;
}

毗邻选择器

div+a{  #找到是紧挨着div标签的下一个标签(是兄弟标签)
	 color: red;
}

弟弟选择器

div~a{  #找到的是同级的后面的所有兄弟标签
	color: red;
}

属性选择器

	#通过属性名来查找
	[title]{ #找到所有含有title属性的标签  
		color: red;
	}
	
	div[title]{  #含有title属性的div标签
		color: red;
	}
	#通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='666']
	input[type=text]{ #含有type属性,并且type属性的值为text的input标签
		background-color: red;
	}

分组

多个选择器选择的标签设置相同css样式的时候,就可以用分组
div,p{  #div选择器和p选择器共同设置相同的样式,可以逗号分隔
	color:red;
}

伪类选择器

a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */  这个用的比较多,可以应用在其他标签上
a:hover {  
  color: #FF00FF
} 

/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
  #outline: none;
  background-color: #eee; #框里面的背景色
}

伪元素选择器

 		/*伪元素选择器*/
        div:first-letter{
            color: red;
            font-size: 20px;
        }
        /*在p标签内容的前面插入一些内容*/
        p:before{
            content: '?';
            color: green;
            font-size:100px;
        }
        /*在p标签内容的后面插入一些内容*/
        p:after{
            content: '哈哈!';
            color: pink;
        }

选择器的优先级

      /*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
        /*id选择器优先级为100*/
        /*#d1{*/
            /*color:deepskyblue;*/
        /*}*/
        /*!*继承的优先级为0*!*/
        /*body{*/
            /*color:red;*/
        /*}*/
        /*!*类选择器的优先级是10*!*/
        /*.c1{*/
            /*color: blue;*/
        /*}*/
        /*.c2{*/
            /*color: orange;*/
        /*}*/
        /*!*元素选择器优先级是1*!*/
        /*div{*/
            /*color: green;*/
        /*}*/
        内敛样式优先级为1000
        <p class="cc3" style="color: red;">我是cc3的p标签</p>
        
        important优先级最高,最牛逼
        .cc1 .cc3 {
            color: purple!important;
        }

css属性相关

高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的

	div{
            width: 100px;  宽度
            height: 100px; 高度
            background-color: pink;
        }

补充:a标签的字体颜色设置必须选中a标签才行

.c1 a{  
	color: red;
}

字体属性

字体

.c1{
	font-family: '楷体','宋体','微软雅黑';
}

字体大小

.c1{
            /*font-family: '楷体','宋体','微软雅黑';*/
            font-size:14px; 默认字体大小为16px.
            
        }

字体颜色

color:red;

子重,粗细

 .c1{
           
            font-weight: bold;
            font-weight: 100;
        }
        

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold

颜色表示方式

		p{
            /*color: red;*/
            /*color: #78FFC9;*/
            /*color: rgb(123,199,255);*/
             color: rgba(123,199,255,0.3);  多了一个透明度的数字:0-1的一个数字
        }

文字属性

文字对齐

	text-align
	
	div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*text-align: center;*/
            text-align: right;
        }
        
	left	左边对齐 默认值
	right	右对齐
	center	居中对齐

文字装饰

	text-decoration
	
	div a{
            /*text-decoration: none;*/  #给a标签去除下划线
            /*text-decoration: line-through;*/
            text-decoration: overline;
        }
	值	描述
	none	默认。定义标准的文本。
	underline	定义文本下的一条线。
	overline	定义文本上的一条线。
	line-through	定义穿过文本下的一条线。

首行缩进

p {
  text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}

背景属性

背景颜色
background-color: red;

	div{
            width: 600px;
            height: 600px;
            /*background-color: red;*/
            /*background-image: url("yeye.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: 100px 50px;*/  相对于div标签的,距离左边100px,距离上面50px
            background:url("yeye.jpg") no-repeat left center;
            /*background-position: right top;*/

        }
简写方式,颜色  图片路径 是否平铺 图片位置
background:#ffffff url('1.png') no-repeat right top;

猜你喜欢

转载自www.cnblogs.com/shaohuagu/p/12327317.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022